Campus Cafe App

Competitive Audit

Insight: Users need to be able to view all relevant information where they expect it in order to be able to check out efficiently

I completed an audit to compare the unique features and offerings of popular coffee apps, as well as an app specific to Northwestern University.

Starbucks

A higher-end global coffee chain

Dunkin'

A coffee chain for those on-the-go

Einstein Bros. Bagels

A coffee and bagel chain

NUhelp

An app with resources for Northwestern students

Strengths

Ability to customize drink orders
Store locator
App’s organization allows users to quickly add items and check out
Can call and email within the app

Weaknesses

Some terminology is overly technical
Confusing and unintuitive navigation - can't order directly from menu tab
Hidden product descriptions
Map doesn’t show walkable directions

This analysis offered valuable insight into helpful features that existing coffee apps currently have, as well as what gaps I could fill with the design of the Campus Cafe app.

Storyboards

Scenario: Rami is a busy student who needs to order coffee for himself and his friends because they're having a study session

From the gathered information, I created a big picture storyboard to contextualize the journey the user would take when using this app in their daily lives, and a close up storyboard to define what screens I’d need to design for that journey.

Crazy 8s -> Paper Wireframes -> Digital Wireframes

How might we... provide enough information for users before they arrive at their location?

I completed a Crazy 8s exercise to generate a broad set of possible ideas and ideated until I had sketches for all the screens I needed. Afterward, I transformed my best ideas from the Crazy 8s brainstorms into low-fidelity paper wireframes to show the basic structure of each page.

Early Idea - Popular Times

Google uses this format to show when stores are busy - familiarity
Can visually see which times have a higher volume of people
Screen updates with the "current line" on the graph

Design System & Prototype

To ensure my design would be associated with Northwestern University, I created a design system based on their brand guide, which I utilized in my high-fidelity prototype for a cohesive design

High-Fidelity Prototype

Usability Testing & Affinity diagram

High-Fidelity Prototype Prompts

I measured effectiveness of my prototype by tracking 5 users’ experiences with choosing a cafe and adding their friends’ orders

I wrote 2 hypothesis statements to center my usability studies around the goals of my target user:

Hypothesis statements

If students in large clubs use the Campus Cafe app to collect and submit orders, then they can get coffee for a large group quickly and easily
If students that want to pick up coffee on-the-go use the Campus Cafe app to check relevant information, then they will be better informed and waste less time choosing a cafe to order from

After gathering participant feedback, I organized the results into grouped themes to determine priority revisions. Each color represents one user.

From the affinity map, I was able to note the following:

Key Findings

preferred the cafe screen to be condensed

had difficulty with adding friends

found the map in the informational overlay to be too large

thought this app would be useful and enjoyed the social aspect of the app

Final Design Changes

Final Design Prompts

I focused on what users noted as pain points and thought of possible updates I could make to the design, and major changes to improve the app's overall experience are detailed below

Cafe Page

Testing proved that users preferred a simpler screen focused on entering into the cafe menu.

Prototype

Final App Design

Changes

Cafe Menu

Each cafe has different operating times and offers different items, so within a specific cafe's menu, the information icon opens to a pop-up that shows more information about the selected cafe.

Add Friends' Order

Users found the “adding friends” flow to be confusing. The focus of this design was to make a group order, so I changed the flow so that the user already had people in their friends' list and only had to search for people in their network to make a group order.

Original Flow

1. Log in and add friends

->

2. Add friend's go-to order

->

3. Add personal order items

->

4. Choose friends' orders

New Flow

Users can turn their individual order into a group order on their bag screen.

1. Search and select friends

2. View friend’s bag items

3. Add friend’s favorite drink

4. Choose friends' orders

Originally there was a pop-up that specified what users could search by, but this was confusing and quickly forgotten

I changed this to multiple search bars to show what categories users can search for and also allow searching in multiple categories to further narrow down results

View items in a friend’s order by clicking on the bag icon

View a friend’s profile to find more information about them, their favorite drink, and their favorite cafe

Users can also add their friend's favorite drink or open their friend's favorite cafe's menu from this screen

Selected users are more differentiated with the entire background turning purple, and users can add multiple friends' orders all at once

The combined bag shows items separated by each person's order

Final App Design

Final Takeaways

I learned a lot about working within brand guidelines

I can see this app being modified for different universities, and in the future, I’d develop an onboarding flow where users are asked for permission to share their contact information or location because they might be hesitant to share private information.

If this were a real-world project:

Stakeholders

I’d have discussions with stakeholders because each would have different goals and constraints for the app. For example, the business goal might be getting more partnering cafes, while the product goal might be maintaining the design in line with the college's brand.

Additionally, information on the cafes would be reliant on outside sources so I’d ask engineers if it’d be feasible to pull outside data or allow the app to reroute to other apps like Google maps.

Further testing

Lastly, I’d do A/B testing on the cafe screen because participants might show different behavior compared to their spoken preferences, so testing would validate whether the final screen would actually lead to faster cafe selection and higher conversions/click-through rates.