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.
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.
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.
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.
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.