Mocha Nut Coffee Shop App Redesign

ROLE
UI/UX Designer

TIMEFRAME
January 2023- April 2023

TEAM
Individual

SKILLS
User research, competitor analysis, interviews, wireframing, prototyping, low-fidelity/high-fidelity, information architecture

PROJECT OVERVIEW
The Mocha Nut Coffee Shop is a local coffee shop in Indianapolis, IN. Its delicious drinks and cozy atmosphere makes it a favorite of many customers! To improve my UX research skills and creative thinking, I decided to look at their online ordering app and find ways to improve it for better accessibility.

❗️This project is not affiliated with or endorsed by the Mocha Nut Coffee Shop. It was an independent case study that I worked on during my time as a design intern for UCLA DevX. With that said, please enjoy!

💡GOAL: create a visually appealing and user-friendly coffee shop app interface that enhances the overall customer experience, increases user engagement, and simplifies the ordering process.

The Process

First, Empathize

☕️ I began with my own heuristic evaluation using 10 classifiers to rate the app’s existing functionality:

💬 Interviews

Objective: Investigate user behavior and pain points while using the Mocha Nut Coffee Shop app to place orders for their favorite drinks, while also gauging user sentiments associated with these interactions

Methods: To fulfill the objective, I conducted interviews giving these instructions:

  • Observe the user’s verbal and non-verbal reactions to the app

  • Have the user order a go-to drink and at least one additional item of a different category

I then asked these questions:

  • What was your first impression of the product?

  • Was anything surprising/did not perform as expected?

  • Was the interface easy to understand?

  • Rate the usage experience overall on a scale of 1-10

Defining The Problem

Using about a dozen interviews, I created two user personas to capture Mocha Nut’s target audience and their needs:

👥 User Personas

🌩️ Pain Points

I used an effort-to-impact graph to measure my priorities— because the project was completed in a mall timeframe, I wanted to nail the most important aspects!

Using all of my findings, I identified what aspects to prioritize in my redesign:

  • elevated interface

  • cohesive location page

  • efficient way of choosing pickup time

  • improving accessibility on select pages

These guidelines helped me decide to redesign the home, select time, menu, specific item, location, and checkout pages.

Time to Start Designing!!

The initial wireframes…

🎨 Design Systems

Homepage Iterations

Striving for the Best!

⚙️ With the help of potential user feedback and accessibility testing, I refined the app’s details and went through several rounds of iterations:

💡I wanted a rewards area on the homepage, but figuring out the format was a trial and error! Test users said they wanted a clear ‘Redeem’ button, which was added in the 3rd iteration!

💡The point balance bar placement was also tricky, but I found that incorporating it with the welcome banner would help fill the space.

💡I added an ‘X’ to insert a graphic later— users said the 1st iteration felt a little empty!

Choose Time Iterations

💡The first iteration was very similar to the original design and didn’t really solve any of its issues!

💡I continued to iterate and landed on the third iteration, which has an easy way to select/change your option plus adequate spacing for a time-choosing pop-up at the bottom.

Final Comparisons

Homepage

Choose Time

Menu

Specific Item

Location & Info

Checkout

☕️ Prototype Walkthrough

  1. Consistent user flow from location to desired pages

  2. Back buttons where necessary

  3. Navigation to home and menu

💡 Prototyping Priorities!

Reflection

☕️ Because this project was completed within the time that I was a Design Intern for UCLA DevX, there were many things that I wish I could’ve added but could not. If I had more time, I would have loved to further develop other key pages, such as the Rewards and Past Orders. I would have also liked to continue receiving more user feedback to allow for more iterations of my final designs! However, I was really happy with my use of prototyping to simplify users’ journeys. I also learned a lot about how to effectively use space by filling it (or not filling it) wisely.