Cal Poly Iter8
We are Cal Poly's first product design lab for students interested in gaining hands-on UX and product design experience. Our mission is to give aspiring product designers a space to collaborate in teams and gain project experience.
As a part of the first ever Cal Poly Iter8 cohort, I work on designing, researching, prototyping, and mentoring others as a Project Manager and UX/UI Designer.
Ample
For our first and second quarter project, I worked as a designer to create an app prototype called Ample, which aims to reduce food waste from restaurants while providing college students with affordable food options.
Problem Statement
Food waste is an issue in the U.S, especially from restaurants who get rid of surplus food at the end of the day that they could’ve made a profit from. On the other hand, college students lack affordable food options that are convenient to access. We thought to ourselves, how might we connect these restaurants to students who would want to purchase their surplus food at an affordable rate? Which is why Ample was created, we wanted to design an experience between users who would like to purchase foods as a discounted price with establishments who feel bad throwing out excess food at the end of the day.
The Ideation Process
User Personas
In order to understand both the customer and business side of our users, we created a few sample user personas. Creating these profiles helped us map out our target audience and identify their potential needs, goals, and pain points.
consumer user persona
business owner user persona
"How Might We" Statements
With the key needs and goals that we identified in our user personas, we created How Might We (HMW) notes, a way to frame the challenge that we are trying to solve in a way that helps us spark new ideas. One key discussion we had was in regards to food allergy and dietary needs.
User Flows
Using these user personas we created a customer journey map, which is a flowchart that shows how users experience the problem space.
Style Guide
By identifying "buzz words," or words and ideas that our team wanted our app to embody, we were able to create a style guide containing our color palette and font book.
Prototyping: The early design stage
After conducting our research and going over it as a group, we had each team member draw what they imagined key design elements and features would look like in Ample. We drew from our How Might We statements while sketching, and utilized the customer personas we created during Week 4 to create truly user-focused design. We iterated on each other’s sketches and critiqued each solution and design. We voted on our favorite ideas to determine the final key features we wanted to implement.
This is what we ended up focusing on:
-
An onboarding carousel to help new users understand the purpose of the app and to give a brief overview of how Ample aims to reduce food waste
-
A dietary restrictions page that allowed users to customize their profile to their needs and desires
-
A confirmation screen that summarizes all the information for users after ordering and a QR code
​
Group storyboard sketches
 |  |
|---|
We then created a user flow to connect all of our favorite sketches and solutions in the order that a user would engage with while using our application. This is where we identified any gaps and added screens where necessary. Using a design software called Figma, we created these lo-fi wireframe mockups for our app. My role was to collaborate with another designer to mock up the onboarding and landing pages.
Lo-fi Wireframe
Usability testing
Our team conducted 11 user testing interviews to observe and uncover potential problems and opportunities in our designs. Our interviewees ranged from frequest users of food apps to those who rarely interact with similar apps. During our interviews we allowed our testers to navigate our prototype freely while also asking questions about how they would use our app to carry out various tasks.
From the interviews, users found that:
-
Certain features were missing: Some dietary restriction options were not available to select (i.e. vegetarian option) and some pages were difficult to access
-
There were some design inconsistencies: The style of specific graphics varied throughout different pages and some inconsistencies were found with transitions between screens.
-
Important information was missing: It wasn’t clear that the app was intending for pickup only and some other common questions weren’t answered in the FAQs
-
We ranked each insight based on importance and mention frequency, and moved forward to adjust our mid-fidelity prototype.
​
High-Fidelity Prototyping & Design System
After completing our user testing and finalizing our mobile app design, we have created a protoype that showcases our best solutions. Here is a breakdown of Ample’s key features and design.
Filters made to find restaurants fit for you
Easily browse through local restaurants based on dietary restrictions, location, and more
Users can tailor their experience with Ample using a variety of filters, such as adjusting your location radius or sorting by price range in order to browse efficiently and effectively.
Detailed restaurant pages
Get informed about what could be included in your box and times to pick it up
Each restaurant featured on Ample has a details page with information regarding pick up time slots, what could be included in your box, and images of the cuisine. Users will be able to quickly access this information and place an order with ease.
Active order & QR code
Receive a QR code to smoothly pick up your order, along with a summary of your order information
After purchasing, a confirmation page summarizes your order and pick up time, and provides you with the restaurant’s address. A QR code is also created to allow businesses to simply scan and hand out the grab box.
Custom home page
Create a home page filled with your favorites, food nearby, and recommended
Along with the filters provided, users can favorite restaurants for easy access. Users can also adjust the app’s settings to provide restaurants with certain time slots and receive recommendations to restaurants similar to their favorites.
​
Hi-fi Prototype
Challenges & Lessons Learned
Ample’s complete case study was conducted over a span of two academic quarters and we realized really quickly how hard it was to design and prototype this app from scratch. The initial design learning process took about three weeks for us because we only meet once a week and needed the time to interview peers and friends about their opinions on our app. Since we are all student designers with the emphasis on students first it was difficult to reconvene and find availability with everyone on our team since we had upcoming midterms and other academic commitments outside of Ample.
The scope of this project was very ambitious and we learned we had to scale back our project to focus mainly on the consumer mobile side over the vendor’s tablet/business side screens. However, given more time we would love to delve into the vendor’s tablet screens.