café bap

Café Bap is a local café in need of a menu app in order to reply to its customers expectations.
I designed a mobile interface answering the customers pain points, respecting the café's brand identity, and keeping accessibility and inclusivity in mind.
ROLE
TOOLs
timeline
research
visual Design
figma
june 2021
User Experience
User Interface
Digital Design
Visual Identity
Branding
Café Bap app screens presentation

the challenge

How can I access the café's menu when not at the shop?

It is expected nowadays for businesses to have a website or an app for their products and services. However, Café Bap doesn’t have either, which leads to frustrated busy and stressed consumers, and impacts the café business.

The Café Bap menu app is an intuitive and inclusive platform allowing customers to access the café product anytime, anywhere. My goal is to design a complete and stress-free experience to all customers.

understanding

context

To identify the customers needs and pain points, I conducted interviews and created empathy maps. My researchs revealed a primary user group (active adults with limited time to check the menu at the café) and the following pain points that needed to be addressed:

01

Accessibility

The actual menu is not accessible to those with limited vision and is very time-consuming

02

Inclusivity

The lack of categorization and information makes it difficult for those with food allergies to choose quickly and confidently their orders

goal

Make it accessible to all. In order to do so, the app has to be easy and quick to read and browse, and put an accent to possible allergens. I also think of adding a "cart" feature to allow busy customers to prepare a quick order-in.

01

Clean design

Create a clean picture-oriented design to provide better access to users who are vision impaired

02

Quick filters

Add allergens-free menus and filters for quicker and intuitive navigation

03

Favorites feature

Create a "favorites" and "cart" features so customers can quickly prepare their order in advance

researching

user research study and personas

My first step to better understand the users and their needs is to conduct users interviews. I was able to drew empathy maps and identify the users problem and pain points to adress for this project. Using those insights, I created personas to guide me in making relevant design choices.

competitive audit and user journey map

To learn about the customers expectations and frustrations with the current solutions on the market, I completed a competitive audit of direct and indirect competitors and I created a user journey map. It was critical to understand what is already working and expected, and where are the opportunities for an obstacle-free user experience.

key takeaways

My researches made it clear that the design has to be intuitive and attractive. Users are used to picture-oriented menu which reassured me on my solutions.

Persona presentation for Café Bap
Logos of direct and indirect competitors used for competitive audit
User journey map illustration

designing

ideation: paper & digital wireframes

I kicked off the design by sketching out low-fidelity concepts on paper after using the Crazy Eight method. My priority was to ensure all pages address user pain points. I also planned out a basic user flow for the lo-fi prototype.

Café Bap paper and digital wireframes

usability studies, affinity diagram and iteration

I conducted a first moderated usablity study to identify a couple of new pain points my designs brought up. I then prepared an affinity diagram to find themes and proritize the updates to-be-made on the final hi-fi prototype.

Café Bap homepage iteration with clear dividers
01

Clear dividers

Users weren't drawn to the middle of the page. I used a more prominent divider to highlight this feature

02

Visible filters

Users didn't notice the filter button. I opted for a scrollable, already visible list at the top of the page to fit to the users habits

Café Bap menu iteration with visible filters
Café Bap feature iteration with better wording and logo
03

Less confusing wordings

Users didn’t understand what and why the cup feature stood for. I changed the wording and logo to make the feature more intuitive

final product

Café Bap App prototypeCafé Bap App prototypeCafé Bap App prototypeCafé Bap App prototypeCafé Bap App prototype

reflection & growth

This very first UX project was fun to make! Even though I'm not 100% satisfied with it, I learned how to empathize with the users through ideation, research and testing. I also realized that I'm not the user, and the importance of each steps of the process.

For the next steps, I'd like to make the following improvements:

Customizable text

Creating a one-button only feature on each page to change the text's size, font, color, background, to make it easier for those with impared visibility

Clickable labels on item pages

Adding allergens labels on item page to improve navigation while highlighting important informations

Search feature

Developing a search feature to filter items by allergens or ingredients (with an "including" and "excluding" button) to improve browsing

other projects

Let's create together!

For work inquiries, or to chat a bit, please reach out to me through hakimi.cassandre@gmail.com