Kit Coffee
Kit Coffee is your friendly neighborhood Orange County coffee shop and eatery, rooted in community, they offer a place of gathering for neighbors and visitors. Their brand provides a comforting experience, from their quality of coffee to their range of pastries and meals. They have a strong local and social media presence, but could use more attention to their website.
I created a responsive website design that introduces new branding, visual layout, and features to boost website traffic, leading users to an improved online ordering experience.
UX RESEARCH
WEB DESIGN
BRANDING
THE PROBLEM
Sam loves going to Kit Coffee, for their warm and inviting in-person environment and delicious coffee. She online orders for convenience, often struggling with the confusing lay out. It takes her several uses to learn the ordering system.
THE QUESTION
To better understand how to improve Sam's user experience, I looked to discover users relationships with website navigation and online ordering. I explored the topics of speed, convenience, customization, accessibility and purchase decision, both virtual and in-person, in building effective and efficient design
THE SOLUTION
Website Screens
ENHANCE USABILITY AND VISUAL CLARITY
Users can access past orders with a single click
Visual hierarchy and search bar improves browsing and ordering
Real-time order tracking provides live updates on order status, ensuring transparency and timing
ENGAGING, USER-FRIENDLY OFFERING DISCOVERY
Updated menu exploration with clear, defined categories and product pages
Users can easily explore new drinks, specials and favorites with rich imagery, detailed descriptions and recommendations to encourage discovery.
This feature is designed to reflect the visual identity of Kit Coffee’s brand, using consistent colors, fonts and aesthetics that mirror their welcoming and community-focused vibe.
THE RESEARCH
I conducted a user interviews, user surveys, and affinity mapping to support producing a competitive analysis, user personas and storyboarding, which allowed me to discover key patterns, compassionate centered solutions, and strategic design decisions.
OBJECTIVES
1
Understand what a user prioritizes when browsing and selecting a product to order
2
Discover common obstacles and pain points that hinders a user’s online ordering experience
Gain insight on how online experiences contribute to a brand’s relationship with users
USER INTERVIEWS, SURVEYS, AND MAPPING
From conducting these user research studies, I gathered insight on personal experiences, pain points, and overall patterns amongst my participants. I discovered over-arching themes for user prioritizations such as time, convenience, and meeting their goals. This data narrowed down focus areas, transforming into intentional design decisions applied to my wireframes and prototypes.
KEY RESEARCH INSIGHTS
COMPETITIVE ANALYSIS
USER PERSONAS
Defining personas captured our users in their routines, priorities, and pain points that empowered future design decisions.
STORYBOARDING
Gathering information, patterns, and needs from research participants, creating a story helped consider not only a routine but the beginning thoughts to task flows and user flows.
TASK AND USER FLOWS
Seeking to implement structure before designing, these flows provided me direction to getting closer to a solution. Envisioning the path defined answering the problem.
LOW FIDELITY WIREFRAMES
DEFINING BRANDING AND VISUAL IDENTITY
I drew inspiration from Kit Coffee's existing branding that is present throughout their storefront and social media, seeking to capture brand consistency across all of their touch points.
Moodboard
Visual Identity
USABILITY TESTING RESULTS
Participants completed 2 tasks, where we observed and discussed their train of thought, movement patterns and enjoyment of the experienced. Based on their feedback and findings, I prioritized improving direction and existing design.
DESIGNS REIMAGINED
Through usability tests and participant conversations, I discovered areas that could improve like the online ordering system while finding room to grow with features like a search bar.
A GAP IN VISUAL IDENTITY
I crafted a visual framework, aiming to incorporate colors and organic shapes that better communicated their in-store persona while incorporating elements to improve user flow and achieve business goals.
BEFORE
AFTER
DEFINING CATEGORIES
I added features including a search bar and past order options, not only improving user experience but meet business goals of specialty product offers and increasing web sessions.
BEFORE
AFTER
MY USUAL, PLEASE
I transformed existing features into a new visual system, prioritizing hierarchy, information architecture, and product offerings.
BEFORE
AFTER
ARE WE THERE YET?
Check Out Faster, Timed Right
I kept design elements and features, with wanting to add clarity through icons and CTAs.
BEFORE
AFTER
FINAL PRODUCT
ADDED FEATURES & PRINCIPLES
Search Bar
Provide users the opportunity to find exactly what they're looking for
Live Order Tracking
Planning the commute efficiently, knowing how much time is needed to pick up
Past Orders
Quick button to reorder a go-to favorite
Google/Apple Map Integration
Ability to direct to destination after ordering, beginning the commute
Brand and Visual Identity
Reimagining branding of in-person to virtual, incorporating organic colors and shapes
Information Architecture
The menu made easier, creating categories to easily browse
BRANDING IS PERSONAL
A change to brand identity can be vulnerable. There's are existing sub-identities, even if they are not necessarily in harmony. I learned to be conscious of this, making an effort to honor these identities in their transformation. In addition, I learned to be more feature-forward in the interface like integrating Apple maps, search bars, icons, customization opportunities, etc.
NEXT STEPS