Background
Established in 2014 in Missouri, Ozark Coffee Company was born from a profound love for crafting exceptional coffee blends. Presently, the company thrives in downtown Sedalia, Missouri. Despite their widespread acclaim, the company faced a website dilemma. It lacked responsiveness and was divided into two distinct versions for desktop and mobile platforms. In addition to the non-responsive design, their website required a visual overhaul to align with their unique aesthetic and brand identity.
My Role
As the only product designer for the project, I bore the singular responsibility of overseeing the design process. The primary emphasis of this project was on ensuring website responsiveness and enhancing user-friendliness.
UX/UI Goals
Create a visually captivating and user-friendly website that aligns with Ozark Coffee’s mission statement and aesthetic
Design a responsive platform that ensures a seamless experience across all devices
Design Process
Research
Conduct Competitor Analysis
User Research
Analysis and Synthesis
Define
How Might We Questions
User Persona
User Flow
Feature Set
Design
Brand Style Tile
Low Fidelity Screens
High Fidelity Screens
User Testing
Analysis and Synthesis
Summary
Results and Next Steps
Research
Competitive Analysis
I began the research stage by conducting a competitive analysis, aiming to assess the UI design, navigation, information architecture, and content of two direct, namely Teremok Coffee and Tiger Coffee. Additionally, I included Starbucks as an indirect competitor in the evaluation.
During the competitive analysis, I simultaneously conducted virtual user interviews with fellow coffee enthusiasts. I completed five interviews, engaging users across a range of ages from 20 to 60.
Click arrows to enlarge imageKey Findings
Streamline the website by reducing clutter, opting for a brighter theme, and drawing inspiration from the organizational structure seen on the Starbucks site.
Maintain the cozy ambiance reminiscent of a small-town coffee shop while preserving the current call-to-action (CTA) elements.
User Interviews and Affinity Mapping
Click logo to open external linkKey Findings
Initial positive impressions: Moody colors and a simple navigation bar were well-received.
The shift in perception: Disappointment emerged when navigating due to the lack of a visible menu.
Dissatisfaction with third-party ordering: Users expressed discomfort about using an external platform.
Understanding limitations: Recognizing the challenges and costs in creating a direct ordering system like Starbucks.
Define
Leveraging the findings from the research phase, I developed a user persona, outlined a feature set, and formulated user flows.
How Might We Questions
How might we design a website that seamlessly presents menu items with appealing product images, detailed descriptions, and transparent pricing?
How might we optimize the website layout to make store location, operating house, and contact information easily accessible to users?
How might we ensure a consistent and visually appealing design that bridges the gap between the physical store and the website for a cohesive brand experience?
Click to enlargeKey Findings
Amy, a working mother, seeks the most convenient way to locate coffee.
Amy aims to easily access and view the hours, location, and menu on her phone.
Amy desires a location with pleasing aesthetics.
User Flows
Click logo to open external linkFeature Set
Must Have
Menu
Description: Users must be able to see menu items with images, descriptions, and prices
Data: User Interviews and Competitive Analysis
Location and Hours
Description: Users must be able to quickly view and find the location and hours of the coffee shop
Data: User Interviews and Competitive Analysis
Contact Information
Description: Users must be able to access the phone number for the coffee shop quickly
User Interviews and Competitive Analysis
Nice to Have
Pop-Up Revamp
Description: Revamping the initial pop-up when users enter the website
Data: User Interviews- 80% of users stated they clicked out of popups
Surprising and Delightful
Coffee Shop Stories Section
Description: Storytelling section featuring anecdotes or short stories about the coffee shop, its staff, or memorable customer experiences.
Data: Competitive Analysis
Can Come Later
Order within the website
Description: Rather than using a third-party website, users would be able to place their coffee orders within the Ozark Coffee Company website
Data: User Interviews and Competitive Analysis
AI-Powered Chatbot
Description: Integrate a chatbot that uses artificial intelligence to answer customer queries, suggest menu items, and provide personalized recommendations.
Data: User Interviews
Design
In my design approach, I prioritize crafting the style tile initially to visualize the color scheme and overall product ambiance before delving into wireframes. Opting to retain Ozark Coffee's original logo was a deliberate choice, considering the strong embodiment of its brand identity and recognition among locals.
Brand Style Tile
Click to enlargeOzark Coffee embodies a warm, home-town charm with cozy interiors adorned with brick walls and inviting wood tones. The comforting ambiance invites customers to savor their favorite brew in this welcoming haven. I aimed to capture all these elements in my design, ensuring users get the most accurate depiction of what Ozark Coffee truly represents.
Low Fidelity Wireframes
Mobile Wireframes- click to enlargeiPad Wireframes- click to enlargeI chose to concentrate on the iPad version since there wasn't one initially. Despite the initial impression of the website being responsive, further investigation revealed otherwise. This issue became apparent during user interviews when one participant struggled to navigate the website on her iPad, experiencing difficulties due to overlapping components. The usability on an iPad or tablet was nearly impossible.
High-Fidelity Wireframes
Desktop- click to enlargeiPad- click to enlargeMobile- click to enlargeDesktop- click to enlargeiPad- click to enlargeMobile- click to enlargeHigh-Fidelity Prototype
Click arrows to enlarge Testing
Methodology
Conducting virtual testing involved utilizing a high-fidelity prototype of the product. Doing so allowed me to simulate a realistic user experience in a digital environment. Through this process, I observed user interactions, gathered feedback, and assessed the functionality and usability of the design. The high-fidelity prototype enabled me to replicate the final product's look and feel, providing a comprehensive platform for user testing and validation without the need for a physical, fully-developed product.
Results
Throughout user testing, all five participants completed tasks aimed at accessing the menu and contact information on the website. This evaluation allowed a comprehensive understanding of user interactions with these vital elements, providing valuable insights into the site's usability and accessibility in these specific areas.
Actionable Findings
Low Effort/High Priority: Consistent naming for Contact Us/Visit Us Page links and buttons
Low Priority/ High Effort: Menu Page reorganization
A/B Testing for horizontal vs vertical layout
Card sorting for items on the menu
In Summary
This project significantly enhanced my understanding of responsive web. Crafting adaptable components in Figma proved challenging yet pivotal for my growth. However, my intense focus on spacing led to an oversight in consistent page labeling, highlighted during user testing. Overall, users recognized notable improvements, yet I regret not having more time to refine the menu area. The project underscored the importance of component creation and bolstered my research skills, reinforcing my confidence in analyzing user feedback for impactful insights.
Next Steps
Addressing oversized images
Exploring horizontal layout options via A/B Testing could optimize the menu section.