top of page

Campus Crunch App

A student led project aimed at streamlining the online food ordering system for on-campus restaurants.

CampusCrunchUI

Elements

Problem Identification

Preliminary Interviews

Personas

Value Proposition

User Flow

Card Sorting

Touchpoints

Wireframe

Interface Design

Interactive Prototype

Usability Testing

A/B Testing

Descriptive Statistics

Teamwork

Brand Creation

Tools

Adobe XD

Adobe Photoshop

Canva

Monday.com

Draw.io

Zoom

Google Workspace

Microsoft Office

Duration

3-1/2 months

The Process

Phase 1: Defining the Scope

In the User-Centered Design course at Michigan Tech, a class of ten students was assigned the task of creating and independently leading a system design project for the duration of the semester. Together, we decided to address the issue of long wait times at on-campus restaurants by developing an application that would allow students to order online and schedule a pickup time. This solution addressed the need for time, comfort, convenience, health, and efficiency in the student body. We also assigned roles at this time, with five students working to create an end-user application and four students working to integrate that application into a Point-of-Sales system. I served as a go-between manager of the project, stepping in where needed and guiding the process on both ends to ensure the end products would cover the same features and the teams would not become siloed. 

Phase 2: Identifying What Users Want

First, we identified what we expected our core user groups to be and developed a few personas to encompass them. Then we each set up open-ended preliminary interviews with volunteer participants that fall into those persona types to verify that an online ordering system was something that was needed on campus and what such a system would look like to different individuals. Based on the results of those interviews, we developed a hybrid card sort and each conducted card sorting sessions with a new set of volunteer participants. The results of this card sort would guide decisions about the information architecture. 

CampusCrunch_UI.png

Phase 3: Wireframe

For both the client and end-user side of this project, a series of whiteboard wireframe sketch sessions were pooled together to create a viable information architecture. For clarity's sake, I have recreated a few pages of the app wireframe in Krita for easy viewing. There were several iterations of this wireframe and a lot of discussions over which information architecture would serve the end-users the best.  

CampusCrunchWireframe

Phase 4: User Flow

The following user flow is how we expect our users to navigate our system on a basic level. It was created in Draw.io.

CampusCrunchUserFlow.drawio.png

Phase 5: Interactive Prototype

Using the wireframe, we developed an interactive prototype in Adobe XD. While designing, we created a color palette and a logo for the app, deciding to call it Campus Crunch. At this point in the project, we decided to put all of our efforts into the app itself instead of the POS system, as the app would be our final deliverable and the subject of further testing. 

CampusCrunchXD_edited.jpg

Phase 6: Usability Testing

Each member of the team conducted usability test sessions on the initial interactive prototype to determine which points of the system were working well and which were frustration points for users. Some team members conducted these tests remotely via Zoom while others did the tests in person. The results were recorded and used to determine what changes needed to be made to the design. Some changes were made immediately while others were saved for A/B testing. All questions were formed to be as unbiased as possible.

Phase 7: A/B Testing

Our A/B testing focused on improving the design of adding items to the cart. In model A, the plus and minus buttons next to each menu item would automatically add items to the cart when clicked. In model B, in addition to the plus and minus buttons, there was an additional add to cart button that would deploy the quantity to the cart. After receiving the results from these tests, we applied some descriptive statistics to determine the effectiveness of each model.  

Phase 8: Final Report

To conclude the semester, we summarized our project in a final report. 

bottom of page