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 along with their delicious coffee! She'll go in to order, but also likes to use their online ordering for convenience. She notices it's visual inconsistency and confusing categorization.
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
Intuitive interface offers streamlined navigation with clear visual hierarchy
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
Revamped menu exploration with clearly defined categories and enhanced 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
Quantitative and Qualitative Data
I conducted a competitive analysis, user surveys, user interviews, user card sorting, user personas and storyboarding to supplement my user-experience research.
OBJECTIVES
1
Understand what a user prioritizes when browsing and selecting a product to order
what are a user’s ideal features when it comes browsing online ordering and making a purchase decision
2
Discover common obstacles and pain points that hinders a user’s online ordering experience
users feel challenged when the routine lacks convenience, ease of use, personalization and affects their time
Gain insight on how online experiences contribute to a brand’s relationship with users
users are more likely to have positive engagement with reward systems, seasonal items, live tracking, etc.
COMPETITIVE ANALYSIS
DISCOVERING PATTERNS
I pursued user research through interviews, surveys, and affinity mapping to gather personal and visual insight into what might bring one to enjoy or feel challenged by the act of ordering online.
Our research participants answered these questions about their online ordering experience
SURVEY RESULTS
"How satisfied are you with the ease of use of online ordering for coffee shops?"
"What online features do you find most valuable when ordering coffee online?"
"What frustrates you the most when ordering coffee online?"
USER INTERVIEW RESULTS
AFFINITY MAP
Once the qualitative and quantitative research was observed, it was time to track the patterns between the thoughts and concepts that would influence the design goals.
USER PERSONAS
Defining Personalities
STORYBOARDING
Telling A Story
After understanding the user and their needs, it was time to understand design requirements to prepare how to better fulfill their goals.
ESTABLISHING DESIGN GOALS
Integrate and Engage Effectively
Through my research, I began to turn my objectives into design goals. I was seeking to integrate methods that would create a cohesive brand experience along with boost website traffic to online ordering.
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
APPROACHING DESIGN
Defining Branding, Transforming Visual Systems
I drew inspiration from Kit Coffee's existing branding that is present throughout their storefront and social media, driving it into reinvented branding and UI kit for the website
BRANDING
Visual Experiences Across The Board
I started with a mood board and brand style tile to develop reimagined brand identity of soft colors, organic shapes and inviting imagery.
UI KIT
Utilizing Kit Coffee’s existing branding, I transformed it with a mood board and brand style tile to develop reimagined brand identity of soft colors, organic shapes and inviting imagery.
USABILITY TESTING
1, 2 Testing
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.
DESIGN ITERATIONS
Findings Empower Solutions
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
WHAT IS A CATEGORY?
Influencing Choice
I transformed existing features into the 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.
A VANILLA LATTE, PLEASE
Meeting User Preferences
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.
ARE WE THERE YET?
Check Out, Order Tracking, and Location
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.
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