Case study: Coffee Ordering App
This case study succinctly explains in detail my design process on how I solved a user's pain points by creating an excellent coffee ordering app experience from start to finish.
PROJECT OVERVIEW
My reason for choosing this project is because of my attachment to coffee drinks. I grew up in a family where I literally took coffee three times a day after each meal and I am a big fan of it. The idea of this coffee ordering app is to cater to the needs of a wide array of people of all ages who are bound by the love for coffee while also, receiving quality customer service at their fingertip.
PROJECT DURATION
December 1st 2021— December 20th 2021
MY ROLE
I was responsible for the app design from start to finish
MY RESPONSIBILITIES
Creating user-centered designs by understanding business requirements, User research, conducting interviews, and user feedback. Creating user flows, wireframes, Low and High fidelity, Usability testing and studies, prototypes, factoring accessibility in my design and mockups. Translating requirements into style guides, design systems, design patterns, and attractive user interfaces.
MY DESIGN THINKING PROCESS
STEP 1: USER RESEARCH
I conducted interviews so as to understand the likely pain points of users, their needs, and behavior so as to avoid implicit bias or any bias for that matter. I interviewed 5 adults who are coffee lovers ranging from 19–60.
USER PAIN POINT
Major pain points highlighted in the research phase were
- Time
- Long waiting hours before orders are ready.
- Inability to make group orders.
- Flexible payment option.
- Ability to book a seat reservation.
USER PERSONA
COMPETITIVE ANALYSIS
I did thorough research on who my competitors are, what they are doing right and wrong, determine who my direct and indirect competitors are, and their value proposition so as to have a better understanding on how I could build a better product.
USER JOURNEY MAP
Mapping out the user journey of two ideal users showed how potential users could interact with the app to ensure they have a good user experience.
STEP 2: DESIGN PROCESS
This was when I started sketching out the carcass of what the app could look like, the features, and whatever innovations I intend to bring to life.
PAPER SKETCH
I noted down the different screens the users would likely interact with from the onboarding screen to when they have achieved their aim which was to have a seamless journey when making their orders or booking a seat reservation. The goal was to solve users' pain points with the least clicks possible to ensure a solid user experience.
WIREFRAME
After I was done with my sketch and picking up what designs are key, decided to take it one step better by doing a digital wireframe.
USABILITY TEST (LOW FIDELITY PROTOTYPE)
I did a low fidelity prototype, then decided to do user testing so as to ensure the journey to completing set tasks was seamless. I tested the lo-fi with 5 participants in a non-moderated environment, then asked a series of questions to get their thought process as to what made the task uneasy. This helped with determining the little flaws in the user experience. afterward, I documented the experience with themes in the affinity map.
Below is a user flow from the onboarding screen to the order successful page
STYLE GUIDE
MOCKUP DESIGN
I decided to begin my mockup after I corrected the flaws in my low-fidelity prototype. I played around with a color that gave that rich coffee feel with the right icons to boot.
HIGH FIDELITY
I found this somewhat challenging as it felt as though I was doing motion graphics for the interaction for a moment. I ensured the experience was an easy one for the users from start to endpoint.
USABILITY TESTING FOR HIGH FIDELITY PROTOTYPE
i conducted a second user testing on my high fidelity prototype with selected users representing my target audience. This felt like the real experience with the final product as the users couldn’t contain their delight.
They felt comfortable with the app and had no further worries as it took them a shorter time to get to checkout and back to the homepage.
ACCESSIBILITY
- I made use of the right icon.
- I provided a filter option in the search bar.
- Use of Imagery that depicted the text's meaning.
TAKEAWAYS
I learned that iteration is a big part of the product design life cycle and one should be ready to get feedback every step of the way. Also, the craziest ideas you might want to discard while brainstorming could actually be one of the stand-out features in a product.
“The potential customers/users are the king” like they say in marketing also applies here as solving their problems was the main reason I started the whole design process. so, I shouldn’t let my own personal biases get in the way of me doing a great job.
NEXT STEPS
- Search for areas of improvement by conducting further user testing.
- Do a brand identity design for the app
- Bring the design to life and host it on playstore.
TOOLS USED
FIGMA
MIRO
GOOGLE SLIDES
GOOGLE SPREADSHEETS
GOOGLE DOCS
MICROSOFT TEAMS
Thank you for taking the time out to read my piece.
If you’re interested in this project and what to hear more, see more of my work, or just want to chat, feel free to contact me!
Follow me on Behance
Follow me on Twitter
Connect with me on Linkedin
