UX UI design for a CaFe Application

Personal Project

This is a personal project made by Bhargob Choudhury for personal growth in Agartala India.

"How might we help a Cafe to scale its business and be known as the best Cafe focused on delivery and users needs in Locality."

Objective

Help a Cafe to increase the impact and gain business scale.

The Goal

The prime goal of this project is to build a fully functional application for a café so that it can be used by every single users whether they are physically abled or normal and to scale the café business.

The Solution

Elaborate a complete analysis of the current problems and goals and bring a solution aligning business with the market and users needs.

My Role

User Experience Strategist and Visual Designer for this new project. Developing all these tasks: Planning, User Research, Wireframing, Usability Tests , User Journey Map and High-fidelity Prototype .

Paper wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.

Low-fidelity prototype

Here is the Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and ordering a coffee, so the prototype could be used in a usability study.

High-fidelity prototype

Here is the High-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for ordering coffee and checkout. It also met user needs more payment option as well as order confirmation.

Intro

MIX café is an application for a café to order coffee and snacks, located in the suburbs of a metropolitan area. MIX CaFe strives to deliver coffee, shakes and snacks. They offer a wide spectrum of competitive pricing. MIX CaFe targets customers like youths and workers who lack the time or ability to prepare their breakfast.

The UX process

1 - Check actual Website

As It was my first project , I needed to first understand what can i do on with the project. So the first thing I did was to check other website designs and noted reviews of cafes around me to better understand the scenario.

2 - User Research

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have time to cook breakfast. 

This user group confirmed initial assumptions about MIX CaFe customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included obligations, interests, or challenges that make it difficult to get groceries for cooking or go to restaurants and cafes in-person. 

3 - Usability study: findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

1. Users want to order coffee quickly

2. Users want more payment options

3. Users want a delivery option

Round 2 findings

1. The checkout process has too many unnecessary steps

2. “Offers & Coupons” functionality is confusing

4 - Accessibility considerations

1. Provided access to users who are vision impaired through adding alt text to images for screen readers.

2. Used icons to help make navigation easier.

3. Used detailed imagery for coffee, shakes and snacks to help all users better understand the designs. .

5 - Takeaways

Impact:

The app makes users feel like MIX CaFe really thinks about how to meet their needs.

One quote from peer feedback: “The app made it so easy and fun to order my own coffee! I would definitely use this app as a go-to for a delicious, fast, and even healthy meal.”

What I learned:

While designing the MIX CaFe app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.