The Mocha Nut Coffee Shop

The Mocha Nut Coffee Shop

The Mocha Nut Coffee Shop

A mobile application for a local coffee shop

A mobile application for a local coffee shop

A mobile application for a local coffee shop

My Role

My Role

UI/UX Designer

UI/UX Designer

UI/UX Designer

Skills

Skills


My Role

Ideation, User Research, Usability Testing, Wireframing, Prototyping

Ideation, User Research, Usability Testing, Wireframing, Prototyping

Ideation, User Research, Usability Testing, Wireframing, Prototyping

Team

Team

Team

Hannan Hussain (CEO), UI/UX Team, Dev Team, Marketing Team

Hannan Hussain (CEO), UI/UX Team, Dev Team, Marketing Team

Timeline

Timeline

Timeline

Jul 2024-Sep 2024

Jul 2024-Sep 2024

Jul 2024-Sep 2024

introduction

introduction

What is Mocha Nut Coffee?

The Mocha Nut Coffee shop is a small business located in Indianapolis. They are known for their cozy vibe and high-quality drinks that are a local specialty. I was hoping to improve their mobile order app by redesigning some key screens.


**Disclaimer: I am in no way affiliated with the Mocha Nut Coffee Shop, this case study and redesign was done as a project for DevX's UI/UX Design Intern project at UCLA.

The Mocha Nut Coffee shop is a small business located in Indianapolis. They are known for their cozy vibe and high-quality drinks that are a local specialty. I was hoping to improve their mobile order app by redesigning some key screens.


**Disclaimer: I am in no way affiliated with the Mocha Nut Coffee Shop, this case study and redesign was done as a project for DevX's UI/UX Design Intern project at UCLA.

The Mocha Nut Coffee shop is a small business located in Indianapolis. They are known for their cozy vibe and high-quality drinks that are a local specialty. I was hoping to improve their mobile order app by redesigning some key screens.


**Disclaimer: I am in no way affiliated with the Mocha Nut Coffee Shop, this case study and redesign was done as a project for DevX's UI/UX Design Intern project at UCLA.

objectives

objectives

Create a seamless app experience for coffee lovers

My goals for this case study is to create an app that simplifies the ordering experience, visualize the business' branding in an aesthetically appealing way, and further engage the app's existing users.

My goals for this case study is to create an app that simplifies the ordering experience, visualize the business' branding in an aesthetically appealing way, and further engage the app's existing users.

My goals for this case study is to create an app that simplifies the ordering experience, visualize the business' branding in an aesthetically appealing way, and further engage the app's existing users.

The Design Process

empathize

empathize

Seeing the app from a usability standpoint

Before even going into the problem statement and brainstorming my ideas for the Mocha Nut Coffee app, I conducted a heuristic analysis on the application to get a general sense of its functionality. This served as an effective introduction for me to the app.

Before even going into the problem statement and brainstorming my ideas for the Mocha Nut Coffee app, I conducted a heuristic analysis on the application to get a general sense of its functionality. This served as an effective introduction for me to the app.

Before even going into the problem statement and brainstorming my ideas for the Mocha Nut Coffee app, I conducted a heuristic analysis on the application to get a general sense of its functionality. This served as an effective introduction for me to the app.

User Interviews

User Interviews

User Interviews

My goal for these user interviews was to gain insight on how everyday users interact with the current app, focusing on any pain points or specific frustrations come up during the interviews. I made sure to pay close attention to the users' explicit verbal and nonverbal reactions while I had them order a drink or pastry from the mobile app.

My goal for these user interviews was to gain insight on how everyday users interact with the current app, focusing on any pain points or specific frustrations come up during the interviews. I made sure to pay close attention to the users' explicit verbal and nonverbal reactions while I had them order a drink or pastry from the mobile app.

My goal for these user interviews was to gain insight on how everyday users interact with the current app, focusing on any pain points or specific frustrations come up during the interviews. I made sure to pay close attention to the users' explicit verbal and nonverbal reactions while I had them order a drink or pastry from the mobile app.

Questions Asked

Questions Asked

Questions Asked

-Was the app easy or difficult to understand, and why?

-What was the easiest/most difficult task to accomplish?

-What is something you think differs in this app compared to others?

-Was the app easy or difficult to understand, and why?

-What was the easiest/most difficult task to accomplish?

-What is something you think differs in this app compared to others?

-Was the app easy or difficult to understand, and why?

-What was the easiest/most difficult task to accomplish?

-What is something you think differs in this app compared to others?

Affinity Mapping

Affinity Mapping

Affinity Mapping

From around 10 interviews, I gathered a couple key pain points that I planned on focusing on to guide my new design.

From around 10 interviews, I gathered a couple key pain points that I planned on focusing on to guide my new design.

From around 10 interviews, I gathered a couple key pain points that I planned on focusing on to guide my new design.

Informed Decisions

Clear Time Zone

Accessible UI

define

define

Figuring out the problem

User Persona

User Persona

User Persona

Using the data gathered from the user interviews, I compiled a user persona to try to describe a target user for the Mocha Nut Coffee Shop App.

Using the data gathered from the user interviews, I compiled a user persona to try to describe a target user for the Mocha Nut Coffee Shop App.

Using the data gathered from the user interviews, I compiled a user persona to try to describe a target user for the Mocha Nut Coffee Shop App.

low-fidelity +

iterate

low-fidelity +

iterate

Here's to the start of (many) iterations

Here's to the start of (many) iterations

In this stage, I created numerous low-fidelity wireframes, implementing key user feedback in my updated designs and aiming closer to an ideal final product from the user's standpoint.

Home Screen

Version 1: In my initial wireframe, I wanted to increase visibility and accessibility for the user, therefore I laid out all the possible options and suggestions for them to order. However, this proved to be a bit overwhelming for some users after having conducted initial usability tests.


Version 2: In this second version, I simplified the options, recommending users a few favorites based on past orders. I've also given users the choice to choose a new order as well if they weren't satisfied with any of the suggestions. Additionally, I included a section for rewards towards the bottom because it was largely overlooked in the original app. I made sure implement it in a largely visible way that let users know how many rewards they've accumulated and potential rewards they can claim.

Version 1

Version 2

Menu Item

Version 1: Similarly to the home screen, my main objective with this wireframe was to increase accessibility and give users easy viewing of all their possible options so it is easy to select their drink at a single glance. However, this proved overwhelming.


Version 2: With this wireframe, I utilized dropdowns to save space on the screen, allowing users to customize their drinks if they please, again, giving them more choice and freedom. I also got rid of the old navigation bar because I didn't think it'd be necessary for the user to go back to another screen when they were about to order.

Version 1

Version 2

Schedule Order: Date and Time

Schedule Order: Date and Time

Version 1: In this first flow, I wanted to offer users


Version 2: With this wireframe, I utilized dropdowns to save space on the screen, allowing users to customize their drinks if they please, again, giving them more choice and freedom. I also got rid of the old navigation bar because I didn't think it'd be necessary for the user to go back to another screen when they were about to order.

Version 1

Version 2

High-Fidelity

High-Fidelity

And Finally: Here's my final screens

And Finally: Here's my final screens

Homepage

Homepage

No visual interest

No visual interest

No Visual Interest

UI looks Unfinished

No Rewards Info

UI looks unfinished

UI looks unfinished

No Rewards Info

No Rewards Info

Original

Original

Original

New

New

New

Select Suggested Drinks

Select Suggested Drinks

Select Suggested Drinks

Option for New Order

Option for New Order

Option for New Order

CTA to check Rewards

CTA to check Rewards

CTA to check Rewards

Visible Nav Bar

Visible Nav Bar

Visible Nav Bar

Schedule Order

Schedule Order

Vague CTA

Vague CTA

Vague CTA

Weird Wording

Weird Wording

Weird Wording

Too Much Blank Space

Too Much Blank Space

Too Much Blank Space

Original

Original

Original

New

New

New

Calendar View to Choose Date

Calendar View to Choose Date

Calendar View to Choose Date

Clear Choose Time CTA

Clear Choose Time CTA

Clear Choose Time CTA

Store Hours

Store Hours

Store Hours

Schedule Order: Choosing a Time

Schedule Order: Choosing a Time

Difficult to Choose Valid Time to Order

Difficult to Choose Valid Time to Order

Difficult to Choose Valid Time to Order

Original

Original

Original

New

New

New

Only Display Valid Shop Hours

Only Display Valid Shop Hours

Only Display Valid Shop Hours

Additional Feature:

Editing Pickup Time at Checkout

Additional Feature:

Editing Pickup Time at Checkout

Users can choose to edit their pickup time before checking out

Users can choose to edit their pickup time before checking out

Users can choose to edit their pickup time before checking out

Date Confirmation at

Checkout Screen

Date Confirmation at

Checkout Screen

Date Confirmation at

Checkout Screen

Selecting a New

Pickup Time

Selecting a New

Pickup Time

Selecting a New

Pickup Time

Only Display Valid Shop Hours

Only Display Valid Shop Hours

Only Display Valid Shop Hours

Menu Item Screen

Menu Item Screen

Stiff and unappealing design

Stiff and unappealing design

Stiff and unappealing design

Original

Original

Original

New

New

New

Dropdowns save screen space and reduce noise

Dropdowns save screen space and reduce noise

Dropdowns save screen space and reduce noise

Reflection

Reflection + What I learned

Reflection + What I learned

Sometimes, Less Really is More

With my initial iterations of this app, I definitely went overboard on the accessibility and gave the users too much all at once on a single screen. This project taught me how to strike a balance and keep the interfaces more simplistic whilst giving users freedom in the app.

With my initial iterations of this app, I definitely went overboard on the accessibility and gave the users too much all at once on a single screen. This project taught me how to strike a balance and keep the interfaces more simplistic whilst giving users freedom in the app.

The Importance of Wording

Before this project, I never really paid much attention to wording and the importance of clear CTAs. However, usability tests and interviews made it much more prevalent how misleading or confusing the current CTAs were. That's why in the new iterations I ensured the CTAs were all concise and paired with self-explanatory components (like the calendar to select a date) if necessary.

Before this project, I never really paid much attention to wording and the importance of clear CTAs. However, usability tests and interviews made it much more prevalent how misleading or confusing the current CTAs were. That's why in the new iterations I ensured the CTAs were all concise and paired with self-explanatory components (like the calendar to select a date) if necessary.

Before this project, I never really paid much attention to wording and the importance of clear CTAs. However, usability tests and interviews made it much more prevalent how misleading or confusing the current CTAs were. That's why in the new iterations I ensured the CTAs were all concise and paired with self-explanatory components (like the calendar to select a date) if necessary.

Intern Guys Nora AI Mock Interviewer

Intern Guys Nora AI Mock Interviewer

Intern Guys Nora AI Mock Interviewer

Back to my work

Back to my work

Back to my work