All work
Social commerce · Mobile & web
Bringing a dedicated shopping experience into a social platform without interrupting how people browse.
Role
UI/UX Designer, Product Designer
Tools
Figma
Collaboration
Product, Engineering, Stakeholders
Timeline
2023 - 2025
Hero image or video
01 · Challenge
The challenge
Kitter aims to introduce a dedicated interface that lets users purchase products while improving overall product discovery.
On the social side, the platform needed a more structured home experience: multiple feed types, a visible list and count of followers and following, and a direct path from any user to that user’s profile.
How might we
How might we design a seamless, integrated experience within Kitter that lets people discover and buy products easily, while making feeds, followers and profiles simpler to explore?
02 · Solution
The solution
User-controlled content feeds
A simple toggle between the For You and Following feeds lets people switch between algorithmic discovery and content from creators they trust. It removes deep navigation and introduces a more social, familiar experience.
Shop without disruption
A shopping bag icon in the core navigation opens the store instantly, so moving from discovery to purchase never breaks the browsing flow.
View detailed builds
A View Build button on each post opens a full breakdown of the setup, with every component listed and linked to its own product page.
Full build checkout
Buy All Today adds the entire build to the cart in a single step, which removes the work of adding each part by hand.
Screen or video 1
Screen or video 2
03 · Discovery
Discovery
Competitive analysis
I studied how TikTok, Pinterest and Facebook integrate social commerce. Each runs an active shopping ecosystem and each takes a different approach to social-driven discovery.
Key insights
People want a more intentional and trustworthy shopping experience inside niche communities. Interview participants were frustrated by cluttered layouts, unclear product information and long checkout flows. That pushed the design toward simplicity, credibility and a short path from discovery to purchase.
Competitive analysis
Persona
04 · Define & ideate
Define & ideate
User journey
The journey maps how people move through Kitter from discovery to interaction and purchase, and where the experience needs support.
Site map and wireframes
The site map organizes content and navigation into a clear, scalable structure. Wireframes then fixed the layout, hierarchy and core interactions before any visual design.
User journey / site map
Wireframes
05 · UI design
UI design
Colour
Kitter’s neutral palette is built on a range of grays. The quiet tones keep contrast and consistency while product imagery does the talking.
Typography
Oswald sets the headings with bold, condensed letterforms. Lato handles longer text with open curves and even spacing.
Iconography
A mix of Material Symbols and custom icons drawn to match their clean, geometric style.
Design system or desktop shot
Design image 2
Design image 3
06 · Testing
Usability testing
Product discovery
After refining the prototype, participants found specific items without guidance. Clear categories and simpler filters removed the sense of being lost in a long product list.
Efficient checkout
Participants called checkout “quick” and “easy”. Shorter forms and clear progress indicators helped them finish with no friction.
Trust and confidence
Visible distributor details, clear return policies and licensing information made the interface feel more “legitimate” and “secure”.
07 · Results
Results & impact
Testing with ten participants showed strong improvements in clarity, trust and overall flow. Most described the experience as clean, intuitive and easy to navigate.
Streamlined page structure and transparent product information reduced hesitation and decision fatigue, and the shopping experience felt cohesive from start to finish.
90%
of participants completed checkout in under one minute
10
usability test participants
1
designer, from research to high-fidelity mockups
Results image
08 · Closing
Final thoughts
As the sole UI/UX Designer on Kitter’s eCommerce expansion, I learned how to balance usability, brand identity and trust while designing for both users and business goals.
Winning moments
Merging social engagement and eCommerce into one flow. Anchoring the UI in Jakob’s Law so the shop felt familiar from day one. Leading the whole process alone, from research to final mockups, under tight timelines.
Lessons learned
Clarity and consistency earn more trust than novelty. Clear documentation matters when bridging design and development. Design does not end at the final mockup; it sets the foundation for what comes next.
Next project