Kit Coffee
I created a responsive website design that introduces new branding 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
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 that contributed to user prioritizations such as time, convenience, and meeting their goals. This data was able to narrow down areas of focus, which transformed 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.
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 was able to discover areas that could improve like the online ordering system. I was able to add new features like a search bar and improve the overall user-interface.
A GAP IN VISUAL IDENTITY
Kit Coffee's in-person and social media identity differed from their website, this was an opportunity to align their branding.
I crafted a visual framework of the website, aiming to incorporate colors and organic shapes that better communicated their in-store persona.
BEFORE
AFTER
DEFINING CATEGORIES
I transformed existing features into a new visual layout, prioritizing information architecture and product offerings.
Reviewing the original menu, the organization method could be repetitive, as customizations were offered as their own individual item. For example, there is latte (hot) and a latte (cold) selections. This would extend unnecessary scroll time and choice overload.
BEFORE
AFTER
MY USUAL, PLEASE
Reviewing the original order customization, options were offered to change the original offering. For example, if a user selected “Latte (Iced)”, the customization additionally offered buttons for “No Ice” or “(-) Ice”, changing the order to a hot latte. In addition, there was extra copy to buttons like “(ADD) Vanilla”. These options made customization take more time and create confusion.
I included images of the order along the way, to better visualize the order for the user’s engagement.
BEFORE
AFTER
ARE WE THERE YET?
Check Out Faster, Timed Right
Refining the existing features, I added a call to action for directions for the user to initiate google or apple maps.
When it came to the order pick-up and live tracking, I utilized icons to better communicate the information. For example, there is an icon of a car to demonstrate the user’s drive to the location.
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