Gutom
SI 582 Class: Introduction to Interaction Design
Focus: Design
Year: Fall 2018
​
Overview:
This was a semester long, design project where I designed a meal planning app targeted to college students by utilizing different UX methods (story mapping, wireframing, prototyping, personas, scenarios, storyboard) and the tool, Sketch. I wanted to help students gain confidence in meal prepping healthy food for themselves, while being aware of their budget and school schedule.
Process:
Problem statement
How to help college students gain confidence in meal prepping healthy food for themselves, while being aware of their budget and school schedule?
​
Solution overview
My solution is to design an app that considers the student’s schedule to make suggestions when to meal prep and using the student’s budget to create meals with food that is on sale at their local grocery store. This app can be implemented on a tablet, particularly with the iPad in mind. The iPad screen is larger than a phone screen, so it would be easier to view recipes while in the kitchen.
​
Design process
In my brainstorming process, I had about eight sketches to be potential solutions for my problem statement.
Sketch Ideas
One sketch involved a deck of cards that featured different foods and students can mix and match and learn about food pairing. It was a unique idea but didn’t quite fit with how I wanted to address the problem statement. I ended up choosing the idea about meal planning on a website with a phone app component, which later became an app for a tablet (iPad).
Story Board
The initial sketch provided a good framework on how I wanted the final design to look like. Through the usability testing of my paper prototype I recognized how the students were interacting with my tool. The first thing I noticed is that I purposely had the page with three buttons (schedule, budget, meal plan) without any numerical indication of carrying out the task.
Paper Prototype: Home Page
I set these buttons from left to right. I wanted the user to start with any button but noticed that it confused some of the students if they didn’t start with the button on the left. During this process, I recognized the students interacted quite similarly to each other with the page of food choices. Since I didn’t indicate with words on what to do on this page, majority of the students chose an abundance of food choices. I hadn’t taken this into account and I later made this an option as I developed my design.
Paper prototype: Food Choice Page
After the usability testing, I made some changes by including text to be more clear. My digital prototype had better distinction than my paper prototype. The digital prototype was user tested again to get more feedback. I learned I needed to improve the functionality as well include potential elements that will benefit the user. The functionality focused primarily to the page of food choices. The elements that I added was having a home page for a new meal plan and a saved meal plan, option for meals to be saved as a favorite, option to view saved meal plan. The feedback from the digital prototype lead me to a final design of having an app with better functionality and features.
Digital Prototype: Food Choice Page
​
My final prototype had major changes on the food choice page. I decided to have the top part of the page still have blue as the background color and keep the lower portion in white in the final design. I initially had only food photos to choose from with little to no text in the paper prototype. I decided to add more text to make it clear in my low-fidelity prototype. In the final design, I continued to incorporate the students’ feedback about including a way to add the meals to a favorites page, which I decided to include a heart icon. I wanted to indicate to users that there were more food options by including the orange triangles for a scrolling feature on the side of each food category.
​
Final Design: Food Choice Page
My favorite comment that I got from the usability testing was from a student. I have worked in the food industry for several years and grown accustomed to being aware of dietary restrictions. Before choosing your foods, I designed a page to include dietary restrictions: none, allergy, sugar free, vegan, vegetarian.
Dietary Restriction Page
The student liked seeing that a vegetarian option was considered because she was a vegetarian. I was glad that I was able to convey thoughtfulness in my design.
​
What I learned:
I learned how usability testing was important to make improvements to my app. When I had the students utilize the paper prototype, I recognized that my design wasn’t as clear as I thought it was. Taking the consideration of the feedback, I went back to my design and made tweaks to it. This helped make the functionality clearer the next time I had students test it.
Work Cited:
Photos of food used in digital prototype are from https://www.pexels.com/search/food/