Food Magnet
Role: User Experience Design, Product Design, Visual Design, User Research
An upper-level major requirement for the School of Arts, Technology, and Emerging Communication, a student's Capstone is intended to be a semester-long culmination of what one has learned through their time at UT Dallas. For my Capstone, I chose to design and prototype Food Magnet, an app that connects hungry customers with local food trucks. Throughout the process, I worked with a student-run start-up whose goal was to turn my prototype into a fully functional app.
The video I made to present my completed capstone.
Discover
Getting Started
The original site map for the app. Hover over the image to magnify.
To start the process of designing this app, I sat down with Mercedes Johnson, the head of the UT Dallas-based start-up who had originated the idea for Food Magnet. We brainstormed and planned our next steps, including what my role would be for this project and what the deliverables would be. I decided to concentrate on the user experience for this app since Mercedes already had developed brand guidelines. We also came up with a site map of every screen that would need to be included in the app and the individual elements that needed to be present on each screen, which we built using Figma's FigJam.
User Research: Interviews, Surveys, & Personas
The deck I prepared to present the results of my research.
The personas I made based on my interviews and surveys. Click the arrows to navigate.
The next step was conducting user research, which we decided would include interviews and a survey. The goal of the interviews and survey was to prove or disprove our assumptions about our users - whom we referred to as foodies - such as the assumption that foodies enjoy eating at new trucks. I interviewed eight people in person at the food truck park on the UT Dallas campus and conducted a digital survey at the same location that was filled out by 10+ participants. The result of our research was that most of our assumptions were validated, with one assumption - that foodies actively seek out their favorite trucks - disproved. To synthesize my research, I prepared a deck to present this information, as well as a set of three personas of our target user based on the insights I gained.
Design
Low-fidelity wireframes
Examples of my low-fidelity wireframes. Click the arrows to navigate.
After completing the research stage of my capstone, it was time to move on to initial screen designs. As the goal of this process was to quickly capture a wide variety of potential screen layouts and evaluate each one for how well it worked for our purposes, I drew many low-fidelity screens both digitally and on paper, experimenting with which screens were both visually cohesive with the existing brand guidelines and displayed all the information and elements needed, as well as exploring specific user flows. In the end, with Mercedes' guidance, I had a full set of low-fidelity wireframes for Food Magnet.
Medium-fidelity wireframes & user testing
Examples of my medium-fidelity wireframes.
Next, I took the low-fidelity sketches and translated them into digital medium-fidelity mockups using Figma. This was probably the most time-intensive part of the process since there was a big jump in complexity between the two levels of fidelity, as well as the added process of turning the screens into a clickable prototype. I also took the time to focus more in-depth on user flows that were important to the app's minimum viable product, such as the process a user would go through to preorder food from a food truck. Then, in order to validate my design decisions, I conducted user testing of each flow with two very generous classmates, iterating based on the feedback gained during this process to develop a final medium-fidelity prototype.
Deliver
High-fideliy prototype
My final high-fidelity prototype. Tap and swipe as you would on a smartphone to navigate.
Finally, I brought the medium-fidelity screens up to high-fidelity and fine-tuned the prototyping. This was a less intensive process than the previous phase since the process mainly consisted of bringing the prototype into full color and making sure individual elements were properly aligned with each other on a screen. Overall, the final high-fidelity prototype included 40+ screens.
Promotional video
The video I made to present my completed capstone.
As a final touch to bring my capstone together and display all of my effort at the annual capstone celebration, I made the above promotional video in After Effects, utilizing screenshots and recordings of my high-fidelity prototype. This was probably the second-most labor-intensive part of my capstone since animation is a bit outside my comfort zone. However, I knew that an effective promotional video would really benefit me and in the end, I completed the video with help from Mercedes and many late nights filled with YouTube tutorials.
Lessons learned & acknowledgements
Mockups of my high-fidelity screens.
As the culminating project of my time at UT Dallas, I put everything I have learned throughout my years here into Food Magnet, from the color theory I learned in my visual design and fine arts classes, the layout design skills I learned working at the student-run paper, and the user experience and interaction design I learned in upper-level design classes. As such, I'd like to extend a huge thank you to all of my past and present professors, particularly Dr. Jillian Round, Cassini Nazir, and my capstone advisor Roxanne Minnish. In addition, thank you to my friends and many peers in ATEC who made my time at this school special.