Product STRATEGY
DESIGN SYSTEM
UI DESIGN
Vtopia - A Web 3 Tech Hub
Vtopia is a Web3-powered NFT marketplace and tech hub built on Solana, where users can discover, collect, and trade extraordinary NFTs. I led the complete UI/UX overhaul of the platform to enhance clarity, navigation, and visual hierarchy ensuring scalability, developer-readiness, and user trust.
Role
UI/UX Designer
Collaborators
Solo
Year
2024
Impact at a glance
Primary success metric
+42%
Secondary success metric
−31%
Business or adoption metric
4.6/5
Context & objective
Set the scene in three or four sentences: what the product is, who it serves, and where it stood when you joined. Then state the single objective the work was measured against, so everything that follows has something to be judged by.
The Problem
The initial marketplace design had potential, but lacked visual hierarchy, clear navigation, and product focus causing friction for both new and advanced users.
Scattered Experience & Lack of Purposeful Flow
The user journey lacked structure from landing to action. There was no clear narrative or hierarchy guiding the user toward discovering collections, rewards, or making a purchase.
Ineffective Navigation & Entry Points
Core sections like Launchpad, NFT-Fi, or Multi-chain views were either buried or inaccessible, requiring unnecessary effort. Users didn’t know where to start or what to do next.
Unscalable Design Language
The interface lacked consistency in spacing, typography, component logic, and state handling. This made development slower and non-reusable across features like staking or multi-market browsing.
Research & insights
Summarise how you learned what you learned — interviews, session recordings, support tickets, analytics, competitive teardowns — and how many people or data points it covered.
Insight 01 — What users actually did
State the behaviour you observed, not the opinion you were told. Add the evidence: how many people, in what context, and what it cost them.
Insight 02 — Where the model broke
Describe the mental-model mismatch between how the product was built and how people expected it to work, and why that mismatch mattered.
Insight 03 — The unlock
Name the one insight that reframed the problem and directly shaped your design direction. This is the sentence a hiring manager will remember.
Constraints & principles
Great case studies show judgement under pressure. List the real limits you designed inside, then the principles you used to make decisions when the team disagreed.
Constraint — Technical or platform limit
What you could not change, and how it narrowed the solution space.
Constraint — Time, scope or team
The delivery reality: timeline, squad size, or dependencies you had to design around.
Principle — The rule you designed by
One sentence you could repeat in every review to settle a debate, e.g. “clarity before density”.
Process
Show the path, not the polish. Four phases is usually enough — each one should say what you did, what you produced, and what decision it unlocked.
01 — Discover
What you did to understand the problem and the artefact it produced.
02 — Define
How you turned findings into a framed problem, scope and success criteria.
03 — Design & 04 — Validate
How you explored options, what you tested, and how feedback changed the design before handoff.
Explorations & iterations
Introduce the comparisons below. For each version, say what you were testing, what failed, and what you carried forward. Iterations are the most persuasive part of a case study — never present the final screen as if it arrived first.
The earlier design lacked visual hierarchy, CTA focus, and a clear brand voice. In the new version, we introduced a defined hero section, consistent stats layout, structured top collections view, and an inviting CTA for exploration. This instantly reduced visual clutter and gave users an immediate sense of what the platform offered.
In the final version, we focused on depth and discoverability. A refined sidebar architecture, multi-market toggle, performance metrics, and category modules like ‘Entertainment’ or ‘Explore Vtopia’ were added enabling faster decision-making for experienced users and improved onboarding for new ones. Visual consistency, token-based layout, and optimized grid views made the experience highly scalable and delightful for the users.
Key design decisions
Three decisions, each written as problem → options considered → what you chose → why. This is where craft and reasoning become visible.
Decision 01 — Structure
The navigation or information-architecture call you made, the alternative you rejected, and the trade-off you accepted.
Decision 02 — Interaction
The flow, state or input model you chose, and how it reduced effort or error for the user.
Decision 03 — Visual & tone
The typographic, density or motion decision that gave the product its character, and the reasoning behind it.
Design system & components
Prove you build for scale, not just for one screen. Cover the foundations, the component library and the handoff.
Foundations
Type scale, spacing rhythm, colour tokens and radii — and the rule that keeps them consistent.
Components
The components you built, their variants and states, and how many screens they now cover.
Handoff & adoption
How engineering consumed the work, what documentation you wrote, and how adoption was tracked.
Approach
The initial marketplace design had potential, but lacked visual hierarchy, clear navigation, and product focus causing friction for both new and advanced users.
Approach
The initial marketplace design had potential, but lacked visual hierarchy, clear navigation, and product focus causing friction for both new and advanced users.
Approach
The initial marketplace design had potential, but lacked visual hierarchy, clear navigation, and product focus causing friction for both new and advanced users.
Testing & validation
Describe how you proved the design worked: usability sessions, prototype tests, A/B results or post-launch analytics. State what you got wrong and what you changed because of it — admitting a miss reads as senior, not weak.
The Outcome
Conclusion
The initial marketplace design had potential, but lacked visual hierarchy, clear navigation, and product focus causing friction for both new and advanced users.
Credits & team
Be precise about ownership. Name the people you worked with and state clearly which parts were yours.
My contribution
The specific areas you owned end to end.
Collaborators
Product, engineering, research and content partners, with roles.
Tools & timeline
What you designed in, and over what period the work ran.
