Frapphaus: Frappuccino Customizer
Frapphaus: Custom Frappuccino App/Website – Role: Independent UX Designer & Research
- Client: Frapphaus Café
- Timeframe: 12 weeks
- My Role: UX Designer & Researcher
- Methods: Competitive Analysis, Storyboards, Personas, Figma & Adobe XD
Challenge
Frapphaus recognized an issue with mistaken orders and customer complaints regarding drinks being either too sweet or not sweet enough. To address these problems, a user-friendly and intuitive digital solution was needed.
The Goal
The primary goal was to create an app and website that would: Improve the comprehension of customer orders, empower users to customize their drinks by controlling essential parameters, enhance the overall user experience and satisfaction.
Tasks
This project was a solo endeavor, encompassing all aspects of the UX design process:
- User Research: Understanding the pain points and preferences of cafe customers.
- Wireframing: Creating visual layouts of the app and website.
- Prototyping: Developing interactive prototypes to test the user flow and functionality.
- Ideation: Brainstorming and generating insights to inform the design.
- UI Design: Crafting a visually appealing and user-friendly interface.
User Research: Summary
I used interviews, usability studies, personas and user stories to help understand and accommodate user needs in the designs. A primary group identified prior to research was millennials who commonly work remotely at cafés.
While it was assumed millennials would be the primary group to frequent the café and utilize the app, it appears proximity was the largest factor. In other words, neighbors surrounding the cafe were more likely to use the app, irrespective of age group.
Other groups this product best served were those with food sensitivities and those with orders that contain multiple requests.
Pain Points
User Persona
User Journey Map
Following John’s user journey revealed where to prioritize efforts when designing this product.
Sitemap
Using strategic information architecture decisions, I created a sitemap that’s both functional and crawlable by search engines.
Paper Wireframes
Mapping out the paper wireframes created a smoother experience when designing digital prototypes on Adobe XD. Not only, I was able to map out user pain points, too.
Since users access Frapphaus from a variety of devices, it was important to create paper wireframes of a variety of sizes. Pictured below are the mobile wireframes.
Digital Wireframes
The prototype was developed taking into account user research and insights generated from them.
Responsive Design: Mobile Optimized. The home page is designed to communicate clearly that this is the spot for customized drinks and facilitate ordering them.
Low Fidelity Protype
After assembling the necessary app frames, I created a flow that allows users to quickly customize their drink and effortlessly checkout.
Usability Study
After conducting a usability study with five diverse participants, here were the key findings:
Hi-Fi Mockups
After finding where users got “stuck” I created a high fidelity mockup for Frapphaus, allowing customers to select and customize their drink with ease!
