Role
UI/UX Designer
The Challenge
Kitter aims to introduce a dedicated interface that enables users to purchase products while enhancing overall product discovery.
On the social media side, the platform will provide a more structured home experience by allowing users to view multiple feed types. Additionally, users will be able to see both a list and count of their followers and following, along with the ability to select an account and navigate directly to that user’s profile.
How might we?
How might we design a seamless, integrated experience within Kitter that enables users to easily discover and purchase products, while also enhancing social engagement through intuitive feed navigation, follower visibility, and effortless profile exploration?
The Solution
User-Controlled Content Feeds
By introducing a simple toggle between the For You and Following feeds, users can seamlessly switch between algorithm-driven discovery and content from creators they trust. This solution reduces friction, eliminates the need for deep navigation, and mirrors familiar interaction patterns found in modern social platforms.
Shop Without Disruption
To bridge the gap between content and commerce, Kitter integrates a dedicated shopping experience directly into the core navigation. By tapping the shopping bag icon, users can instantly access the eCommerce section without interrupting their browsing flow. This approach minimizes friction and creates a natural transition from discovery to purchase, allowing users to explore products in the same environment where they engage with content.
View detailed builds
Kitter transforms passive viewing into deeper engagement by allowing users to explore the full build behind each post. By selecting View Build button, directly from the homepage, users are taken to a detailed breakdown of the setup, including all components and parts used.
Build Exploration
The build detail page was designed to give users full visibility into each setup by breaking it down into a structured list of individual components. Users can browse every part used in the build and select specific items to view dedicated product pages with more information.
Full Build Checkout
To streamline the path from interest to purchase, the build detail page includes a Buy All Today call-to-action that allows users to add the entire build to their cart in a single step. This reduces the need to manually add each component, significantly lowering friction in the purchasing process.
1.DISCOVERY
Competitive Analysis
To better understand how social media platforms integrate commerce into their user experience, I conducted a competitive analysis of TikTok, Pinterest, and Facebook. These platforms were chosen for their active and fully integrated shopping ecosystems, each representing a different approach to social commerce.
Qualitative Research
Open-ended responses revealed several recurring themes:
Quantitative Research
From the survey responses, several patterns emerged:
Discovery is heavily centralized around social platforms rather than intentional search or shopping behavior.
Users prioritize frictionless purchasing over other decision factors.
Users are primarily in a passive consumption mindset rather than intentional shopping mode.
Social interaction is a core behavior, not a secondary feature. Users actively explore people, not just content.
User Persona
The primary user is a young, tech-savvy music fan who regularly attends live events and values memorable experiences.
Key Insights
DEFINE & IDEATE
User Journey
The user journey begins with discovering events through a swipe-based, engaging home feed, allowing users to quickly browse and explore concerts.
Site Map
Next, I created a User Flow to organize all the pages and features Nightlife needed. From the landing screen, joining ticket queues, notification of winning a ticket, to checkout.
Wireframing
In the wireframing phase of Nightlife, I focused on translating early ideas into clear, functional layouts that prioritized usability and flow.
UI DESIGN
Color Palette
We used Kitter’s neutral color palette, built around a range of grays for balance and clarity. The minimal tones maintain contrast and consistency while letting product imagery stand out.
Gray
HEX
#222222
RGB
139, 92, 246
Gray 2
HEX
#585858
RGB
7, 7, 7
Gray 3
HEX
#999999
RGB
238, 238, 238
Gray 4
HEX
#C8C8C8
RGB
238, 238, 238
Pure Black
HEX
#000000
RGB
139, 92, 246
Pure White
HEX
#FFFFFF
RGB
7, 7, 7
Off White
HEX
#F3F3F3
RGB
238, 238, 238
Gray 5
HEX
#E4E4E4
RGB
238, 238, 238
Typography
Oswald serves as Kitter’s heading typeface, chosen for its bold and condensed letterforms that convey strength and precision. Its clean, modern structure gives the interface a confident personality while ensuring legibility at various scales.
Lato complements Oswald by bringing warmth and balance to the overall design. Its open curves and even spacing make longer text easy to read, supporting usability across both web and mobile.
Oswald
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Lato
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Iconography
I used a mix of Material Symbols and custom icons designed to match their clean, geometric style. This combination kept the interface consistent, scalable, and aligned with Kitter’s unique visual identity.
Desktop Shots
4.USABILITY TESTING
Clarity in Design
User testing showed measurable improvements in clarity, trust, and checkout efficiency, validating the design direction.
Product Discovery
After refining the prototype, users navigated the product catalog with ease. The participants successfully located specific items without guidance. Clear categorization and simplified filters reduced visual clutter and eliminated the sense of overwhelm reported during discovery.
Efficient Checkout
Participants described the checkout process as “quick” and “easy.” Condensed form fields and clear progress indicators helped users complete purchases confidently and without hesitation.
Trust and Confidence
Displaying verified distributor details, clear return policies, and licensing information on product pages significantly improved user confidence. Participants described the interface as more “legitimate” and “secure,” reinforcing Kitter’s credibility as a licensed distributor.
Positive Perception
By combining cleaner visuals, faster checkout, and transparent product information, participants described the experience as “professional” and “reliable.” The prototype successfully balanced eCommerce efficiency with the assurance users expect from a licensed firearms distributor.
5.RESULTS & IMPACT
Where Research Met Results
User testing showed measurable improvements in clarity, trust, and checkout efficiency, validating the design direction.
Qualitative Insights
Testing with ten participants revealed strong improvements in clarity, trust, and overall user flow. Most users described the experience as clean, intuitive, and easy to navigate, with 90% completing checkout in under one minute. Participants said the interface felt “organized” and “reliable,” noting that clear hierarchy and consistent visuals made browsing and purchasing more straightforward.
Design Impact
The results confirmed that user-centered design choices effectively enhanced clarity, confidence, and task flow. Streamlined page structure and transparent product information helped reduce hesitation and decision fatigue. Consistent visual organization and simplified interactions created a smoother shopping experience that felt cohesive and trustworthy from start to finish.
My Final Thoughts
This project marked a defining chapter in my journey as a designer. 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. Although this concept isn’t being implemented immediately, the designs and documentation lay the groundwork for future development when the company is ready to expand its platform. Beyond the deliverables, this project reinforced that great design isn’t just about how something looks, but how effortlessly it works for the people who use it.
Winning Moments
Integration: Successfully merging two distinct experiences—social engagement and eCommerce into a single, cohesive flow was a major milestone.
Familiarity: Anchoring the UX strategy in Jakob’s Law and the “power of boring” ensured that users instantly understood how to navigate the shop. By modeling the experience after familiar eCommerce patterns like Amazon’s, you reduced the learning curve, improved usability, and created an intuitive journey that balanced familiarity with brand personality.
Designing Solo, Delivering Big: I led the entire design process from research and wireframing to final high-fidelity mockups. Balancing stakeholder feedback, brand guidelines, and usability principles under tight timelines showcased my ability to think strategically, adapt quickly, and deliver results independently.
Lessons Learned
Simplicity: I learned that great design isn’t about doing something new for the sake of being different—it’s about making something that works beautifully. By leaning into familiar patterns and predictable flows, I saw firsthand how clarity and consistency drive user trust far more effectively than complexity ever could.
Collaborating: I had to work closely with developers and stakeholders to bring ideas to life. I learned that clear communication, thorough documentation, and visual consistency are essential when bridging design and development, especially in a fast-moving startup environment.
Continuous Process: Even though the eCommerce feature isn’t being implemented immediately, this project taught me that design doesn’t end at the final mockup. It’s about creating a foundation for future growth—building systems that can evolve as the company and its users do.