Café Cisco App Design

Café Cisco is a fictional café in San Francisco. They serve a variety of foods, pastries, and beverages and their goal is to provide delicious food for everyone, no matter their dietary restrictions. Café Cisco targets health-conscious young adults who want a variety of food options.

Project duration:

July 2021 to December 2021

<a href="https://www.freepik.com/psd/mockup">Mockup psd created by crowf - www.freepik.com</a>

Project Overview

The Goal:

The Problem:

It is difficult to find food options that are suitable for different lifestyles at a typical restaurant.

Create an app that will allow users to search by a wide variety of dietary options and allow for customization, as well as providing a review system so that customers can feel confident in their choices.

My role was the UX designer designing an app for Café Cisco from conception to delivery. My responsibilities included conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User Research

My primary research consisted of conducting interviews and creating personas based on the information learned in those interviews. One main group identified was health-conscious individuals who want to know more about menu items before they place an order.

The initial assumption was that customers would like to read reviews of individual dishes before they placed an order, and although these interviews did confirm that many think it would be helpful, it also revealed other important issues. Other desired features included being able to sort menu items by type, seeing calorie counts, and getting information about the cafe as a whole.

User Pain Points

1

Big file sizes

Users were frustrated about long loading times due to most menus being PDFs. By incorporating the menu into the app, this can be avoided.

21

Review Specificity

Users wanted to see reviews cover certain aspects of the orders, like how long it would take to prepare and other more specific questions.

3

Motivation

Users were concerned that not many people would use a review function without some sort of rewards program.

4

General Information

Users found it annoying when websites and apps didn’t include basic information like the address and hours of the cafe.

Persona and User Journey

Problem statement:

Viktor is a health-conscious vegan

who needs advanced search options in order to find menu items that suit their lifestyle.

Google UX Design Certificate - Persona [Template] (1).jpg

Google UX Design Certificate - User Journey Map [Template] (1).jpg

Mapping out Viktor’s journey showed the importance of having both advanced search options and reviews from other users.

Paper and Digital Wireframes

Creating paper wireframes allowed me to think about how to best incorporate functions that would be useful to the user. These functions were carried over to the final designs.

This information allows users to determine whether other reviewers are reliable.

Early in the process, one large problem that was identified was that users were concerned about fake reviews or bots. To address this problem, I designed the profile pages to include the user’s average rating and the number of likes and dislikes on their reviews.

One of the most important user needs was the ability to sort the menu in several different ways.

These buttons allow users to sort the menu based on different dietary restrictions.

This dropdown menu allows users to select ingredients they do not want to be included in the search results.

Low-Fidelity Prototype

The low-fidelity prototype mapped out the process of sorting the menu and ordering items from the Café Cisco app so that the prototype could be tested in a usability study.

View the Café Cisco low-fidelity prototype

Usability Studies

I conducted two rounds of usability studies. The first study was on a low-fidelity prototype and findings were used to influence designs in the high-fidelity prototype. The second study was using the high-fidelity prototype and results were used to polish the mockups.

Round 1 Findings

1

Bottom navigation bar was confusing for users

2

Add to cart icon was difficult to find

3

Checkout process was too abrupt

Round 2 Findings

1

The menu screen looked unfinished and did not have appealing colors

2

Some buttons did not link properly

Refining the Design

Before usability study 1

After usability study 1

The first usability study revealed that some users had difficulty using a bottom navigation bar to move between pages. To address this problem, I created a hidden side menu for navigation.

Before usability study 2

After usability study 2

The second usability study revealed that users did not like the color scheme of the menu and would like to see more colors being used. To fix this problem, I added more colors and an image that matched the palette of the app.

Final Mockups for User Flow

High-Fidelity Prototype

The final high-fidelity prototype includes easy navigation from several different places and an updated color scheme.

View the Café Cisco high fidelity prototype

Accessibility Considerations

1

Used icons along with text to make navigation easier

21

Used photos of menu items and ingredients to help users better understand what they are ordering

3

Made text comply with accessibility standards

Takeaways

Impact

This app makes it easier for users to find options that will suit them and makes them more excited to order from Café Cisco.

One quote from the second usability study:

“I love that it lets me sort by vegan options. Even though I’m not vegan, I could see myself using that a lot on days I don’t want meat.”

What I learned

While designing the Café Cisco app, I learned that user’s needs don’t always align with my initial assumptions. Users wanted to read reviews as I had expected, but they had serious concerns about the content and whether they would be able to filter them, for example. I had to learn to account for these differences to make the user experience more appealing.

Next Steps

1. Run another round of usability testing to determine the efficacy of changes made after the second round of testing and whether they address the user’s concerns.

2. Conduct more user research to gauge reactions on the new review system.