About
Déjà Brew is a relaxed cafe that specializes in artisanal coffees. They pride themselves on their great ambience and high quality products.
Project Duration
4 weeks
Design Tools
Figma, Photoshop
Role
UI/UX Designer and researcher, designing a mobile app from conception to final prototype
User research
Competitor analysis
Information architecture
Wire-framing
Low-fidelity prototypes
High-fidelity prototypes
User interface design
Usability testing
Responsibilities
Challenge
To create a mobile ordering app that will enable users to engage with the brand and allow them to order their favourite coffee in a way that is convenient to their lifestyle.
Opportunity
To understand what coffee drinkers want most out of their local cafe while also focusing on how we can turn their needs into an exceptional experience that can potentially drive new customers and increase revenue for the business.
Understanding Users
To start the research process, I conducted quantitative research on a group of coffee consumers. A survey of 50 participants revealed a few of the following insights:
84% of participants in the survey were between the ages 18-55
about 60% of participants said they are satisfied with coffee ordering apps currently on the market
80% of participants said they would be interested in a way to order their coffee in advance
User interviews
In addition to consumer surveys, I also conducted interviews with 7 participants to collect qualitative data. Here I tried to gain an insight about current consumer habits and the kind of features users would find most useful in an online ordering app. Here are a few of the pain points participants mentioned:
“I normally make my coffee at home most mornings because I don’t have time to wait around in a crowded cafe.”
“I am often late for class but no matter how late I am, I always like to stop at a cafe first. I wish I had a way to place my order ahead of time”
“It’d be nice to have an app that remembers my past order because I always order the same thing.”
User Persona
In an effort to better understand our users, I created a user persona based on our survey and interview data.
After analyzing a target user and their user journey, I redefined the problem.
Sage is a MBA student and part-time administrative assistant who needs an easier way to order coffee in advance because she does not have much free time in her busy schedule.
Competitive Analysis
Next, I completed a competitive analysis to understand where our brand could bring the most value.
How Might We’s
After mapping out all the findings, I re-framed our insights into opportunities…
How might we integrate the Déjà Brew brand and products into a digital platform that allows users to order coffee anywhere anytime?
Integration :
How might we use technology to grow customer retention and acquisition in order to increase revenue?
Customer Retention :
Starting the design
Next, I began the user interface design process by drafting possible iterations of mobile screens on a whiteboard. This allowed for quick brainstorming and it provided an easy way to see what elements were most effective at addressing user pain points. Through this approach, I prioritized a simplistic way to solve the problem.
Low-fidelity prototype
After drafting up sketches, I produced digital wireframes that included the basic skeleton for each page, including its layout, organization, and elements. Then I created a low-fidelity prototype of the main user flow.
Usability Test
I then conducted the first round of usability tests using the low-fidelity prototype. Observations from this study assisted in iterating on the next prototype. Some of the themes I discovered during this usability study include:
Users want a way to sign up using existing accounts (such as Google, Facebook, etc.)
Users want an easy way to save favourites
Users want a way to see their past orders
Users want intuitive navigation between pages
Some of the changes I implemented as a result of this usability study include:
A dedicated browsing page with a search bar, giving users more freedom in browsing
A favourite button that appears on every page, allowing users to view their favourite menu items at any time
An additional option to log in or sign up using existing social media accounts
A profile page that includes past orders, customer rewards, saved favourites, notifications, and payment type selection
Clear call-to-action buttons for easy navigation between pages
In order to begin the process of creating a high-fidelity prototype, I developed a design palette for the app. This includes the app’s colour scheme, typography, buttons, and iconography.
Design System
Mockups
After conducting usability studies using my low-fidelity prototype, I began the process of creating a high-fidelity prototype. These mockups provided visuals accurate to the final design of the app.
Incorporating accessibility in designs is always a major priority for designers. Some key ways I demonstrated this while designing the Déjà Brew app include:
Using clear icons and call-to-action buttons
Implementing an accessible colour scheme
Adding bold images and simple descriptions so that users can better understand the products
Accessibility Considerations
High-fidelity prototype
The final high-fidelity prototype demonstrates clear user flows, simple navigation, and an intuitive checkout process. It prioritizes users needs while also making the product appealing to consumers.
The high-fidelity prototype can be viewed in full here.
Takeaways
Designing the app for Déjà Brew was a very exciting opportunity for me because it was my fist ever UX design project. Through this experience, I learned the fundamentals of designing for commerce. One of the paramount insights I gained from this project is that there is always constant room for improvement and iterations. This is why usability studies and feedback are crucial to the design process.
