top of page
Linkol AI — Bridging Business and Creators
CLIENT
Linkol AI
TEAM
VaporAviator Design Studio
SKILLS
Product Design
UI/UX
Design System
Website Design
MY ROLES
2025 Summer Internship
User Flow & Wireframing
Visual Direction
Interface Design
Design System Setup
MISSION
Developing a comprehensive platform for the creator economy that facilitates "Post to Earn" and "Post to Predict" functionalities.
SCOPE
Delivering a high-fidelity landing page, core feature pages, and a responsive phone interface.
TARGET AUDIENCE
A dual-sided marketplace serving both businesses (looking for the "Right KOL") and individual customers/creators.
Before Design — From Mess to Clarity
Rapid Onboarding
I joined the project during the early-stage development phase, inheriting existing service system maps and preliminary wireframes and prototypes.
service system map
wireframes & prototypes
Building the Foundation
To move from confusion to competence in the complex crypto field, I leveraged industry articles and news curated by my mentors, acting as a user to understand creator valuations and digital assets.
VaporAviator's Notion - Research Checklist
Design Development — The Iterative Engine
Market Positioning & Competitor Analysis
I performed deep dives into leading platforms to understand how to balance data density with social engagement:
Four.meme
Analyzed as a core competitor for its "Create Token" flows and the way it handles social/meme-centric UI components.
Coinbase
Studied to understand the onboarding flow for new crypto users, specifically looking at how they simplify wallet setup and transaction histories.
Coinmarketcap
Analyzed for its data visualization of "Market Stats" and "Top Trending" lists, which influenced how we presented the Linkol "Value Ranking" and asset performance.
Design Development — The Iterative Engine
To maintain consistency across a growing platform, my team members and I established a rigorous design system:
Typography
A clear hierarchy using the Inter family, led by 48px BOLD headers for major landing sections.
Color Key
A blue-based palette centered on #007AFF, utilizing varying opacities for tags and background elements to create depth without visual clutter.
AI-Augmented Collaboration
In a fast-paced agency environment with limited labor, we redefined collaboration by integrating AI into our communication loop. This allowed us to maintain an iterative pace that far exceeded traditional design cycles.
AI-generated Vibe Coding
From "Vibe" to Visualization
The clients utilized AI-powered "vibe coding" tools to generate raw page layouts that captured the "feel" and basic functional requirements of the product.
Eliminating Ambiguity
Instead of relying on abstract verbal descriptions that often lead to misinterpretation, the clients provided these AI-generated frames alongside detailed documentation for every meeting, making their needs immediately tangible.
The Human-in-the-Loop: Polishing and Tailoring
The Designer as Curator: While the AI could generate a "vibe," it often failed to produce the exact logic or technical accuracy required for the final product.
Rapid Translation: I acted as the critical human link, rapidly grasping the core intent of these raw layouts and asking targeted follow-up questions to refine the "vibe" into a polished, logical UI that aligned with our development progress.
Iterating Wisely: By bypassing the "blank canvas" stage, I was able to focus my energy on high-value design tasks—such as perfecting the service flow and ensuring the dual needs of businesses and creators were met—rather than basic layout exploration.
Synchronous Efficiency with Figma
Figma Workplace
Real-Time Collaboration
To maintain total transparency, I integrated my refined work into shared Figma files immediately upon completion.
Contextual Feedback
This allowed clients and team members to work synchronically, leaving comments directly on the specific UI components, which significantly reduced the feedback loop and ensured every iteration moved the project forward.
Core Platform Features
Looking for KOLs
The "Looking for KOLs" interface underwent a rigorous refinement process to transition from a basic functional tool to a sophisticated discovery engine. This phase demonstrated my ability to iterate wisely by leveraging modular design assets.
Phase 1: Translating the Fundament
Initial Prototype
I began by creating the first high-fidelity prototype directly from the project's inherited wireframes.
Establishing the "Bricks"
During this stage, I established the core UI components—the evaluation cards, search bars, and filtering sidebars—using our Inter typography and #007AFF color system.
Phase 2: Data-Driven Refinement
Rapid Adaptation
Because I had built the first version using a modular "brick" system, I was able to quickly adapt these existing components into the refined layout.
This workflow allowed for a rapid turnaround, resulting in a discovery page that seamlessly integrated global leaderboards with deep-dive KOL performance metrics.
Second Wireframe
After initial feedback and alignment with the agent’s business goals, a second, more refined wireframe was developed to improve the information hierarchy.
The Final Version
Brand Value
The challenge here was translating abstract social engagement into a concrete financial "vibe" that creators could easily understand.
Initial State
The "vibe coding" layouts provided a basic concept of "Branding Value" but lacked a distinct, shareable visual identity.
Visual Polish
The final version utilizes your established color key to make complex data look clean and trustworthy. It also incorporates the Tweet Value Card, which acts as the definitive "shareable" asset of the brand value experience.
The Final Version
Landing Page
The landing page serves as the gateway to the Linkol AI ecosystem, designed to immediately communicate value to both business agents and individual creators. The layout focuses on conversion through clear calls-to-action and structured feature highlights.
Simple Portal Structure
The initial layout derived from "vibe coding" was a minimalist entry point focused on basic navigation.
Limited Information Architecture
It featured a straightforward "What can I help with?" prompt with two primary buttons: "Post to Earn" and "Find the right KOL".
Dual-Sided Navigation
The final design features a sophisticated header with distinct paths for "Agent," "Predict," and "Post to Earn," allowing users to self-identify their role immediately.
Trust & Onboarding
Following research into Coinbase, I implemented a prominent "Connect Wallet" CTA to anchor the page in a secure, decentralized user experience.
Minimal Brand Identity
The visual style was functional but lacked the established design system's depth, using generic placeholders for campaign and community data.
The Final Version
Extended Platforms & Adaptation
Scalable Ecosystem: From Desktop to Mobile
Responsive Adaptations: Trading & Agent
Takeaways — Growth Beyond the Classroom
Working as an intern at VaporAviator Design Studio on the Linkol AI project was a transformative experience that redefined my understanding of the design process in a professional setting.
Professional Agility & Speed
I learned to design at a pace that is impossible to replicate in academic projects. In a studio environment, meeting client deadlines requires a balance of high-quality output and rapid iteration, teaching me how to "iterate wisely" without losing sight of the core user experience.
The Designer as a Strategic Curator
This project completely shifted my perspective on AI in the design workflow. Rather than seeing AI as a replacement for creativity, I learned to use it as a powerful communication bridge—taking raw "vibe coding" concepts from agents and refining them into logical, technically sound, and user-centric interfaces.
Mastering Complex Domains
Moving from zero knowledge to a designer capable of handling a niche, data-heavy field like crypto and creator valuations proved that my research methodology is effective. By using structured checklists and mentor-guided learning, I can rapidly bridge domain knowledge gaps to make informed design decisions.
Systemic Thinking through "UI Bricks"
I realized the immense value of building modular design systems early in a project. Creating a robust library of "UI bricks" (components) allowed me to scale the product across web, trading, and mobile platforms with total visual and functional consistency.
Collaborative Synergy
Communicating directly with the agents who paid for our service taught me the importance of stakeholder alignment. I learned how to ask the right follow-up questions to turn a client's "vibe" into a final version that matched both their business goals and our studio’s design standards.
bottom of page