Tasty trails
client
UX Project
(Hogeschool van Amsterdam)
Role
CMD’r
duration
1 week
Description
This project is part of my interaction specialty focus, where we were tasked with designing an app that triggers a chain reaction, inspired by the work of cartoonist Rube Goldberg. I decided to put my own spin on this concept by combining my passion for cooking with the idea of creating a chain reaction. The result is Happy Trails, an app designed to inspire people on what to eat, whether it's discovering new recipes or finding great places to eat out.
From Nothing to Something
When we received the assignment for the week, the first problem that came to mind... well, that's a bit of a lie... I actually had no idea what kind of chain reaction the instructors were referring to. But after some clarification, the gears in my brain finally started turning. The first problem that came to mind was the daily struggle of deciding what to cook for dinner. I usually scroll endlessly through TikTok, hoping to find something, but with no luck. That frustration became the fuel for this idea.
Since we had limited time to create four main screens, I decided to jump straight into the digital design (I'm not a fan of sketching, as I'm not very good at it). I had a vague idea in my head of what I wanted, but I dove into Dribbble for some inspiration. And so, my prototype phase began, as seen below.
Design challenge
How can I design an app that inspires people when choosing what they want to eat?
Target audience
For the target audience of the app, I initially kept the scope broad, focusing on "people" as the primary group. This decision was based on the understanding that anyone with a smartphone and no limitations preventing them from using the app could benefit from it. Given the time constraints of the project, refining the target audience was not a top priority. However, under different circumstances, I would have taken the time to step back and approach the problem from multiple perspectives, ensuring the app’s design was even more tailored and accessible for specific user groups.
building up from scratch
Given the time constraints, I opted to begin the process digitally by creating a wireframe in Figma. This allowed me to quickly outline the structure and functionality of the app before moving forward with further design steps.
Style guide and first prototype
Next, I created a basic style guide for the app. I already had a clear vision for the color palette, so I focused on finding fun elements to incorporate into the design. I also considered the typography and defined rules for the line weight of the icons used in the app to ensure consistency and visual harmony.
Peerfeedback and iteration
After gathering peer feedback, I made several key improvements to the design. I added a navigation bar to enhance usability, tested the color contrast against WCAG guidelines to ensure readability (which was successfully approved), and refined the use of color, particularly for the call-to-action button—to make it more effective and visually distinct.
References
App, P. M. (n.d.). Food Delivery Mobile App UI/UX design. Dribbble. https://dribbble.com/shots/25541233-Food-Delivery-Mobile-App-UI-UX-Design
Golovko, A. (n.d.). Food delivery - Mobile app. Dribbble. https://dribbble.com/shots/22271780-Food-delivery-Mobile-app
Khmelyk, K. (2024, June 7). Do rounded buttons perform a better usability? Cieden. https://cieden.com/book/sub-atomic/shapes/rounded-buttons-and-usability?utm_source=chatgpt.com
Kuznetsov, G. (n.d.). Simple banking app UI by Milkinside. Dribbble. https://dribbble.com/shots/24858631-Simple-banking-app-UI-by-Milkinside
Odama. (n.d.). Navbar - Navigation Bar apps. Dribbble. https://dribbble.com/shots/22956431-Navbar-Navigation-Bar-Apps
Outcrowd, & Outcrowd. (n.d.-a). Makko - UX/UI mobile application design for a social network. Dribbble. https://dribbble.com/shots/23161510-Makko-UX-UI-mobile-application-design-for-a-social-network
Outcrowd, & Outcrowd. (n.d.-b). Makko - UX/UI mobile application design for a social network. Dribbble. https://dribbble.com/shots/23161510-Makko-UX-UI-mobile-application-design-for-a-social-network
Skip the Drive-Thru and make Taco Bell’s crunchwrap supreme at home. (2024, November 19). Simply Recipes. https://www.simplyrecipes.com/copycat-crunchwrap-supreme-recipe-6280368