The Scotty Exchange
A mini project focusing on streamlined, intuitive menus for university students, rushing or relaxing.
Sector Role Team Size Function Tools
Restaurants UI/UX Designer Individual Mobile app Figma
Information Architecture
01 The Challenge (Opportunity!)
A constraint-based, information architecture, and UI-focused mini project-- how could I convey all the content of a menu with 1 font and 3 colors? University students may have tight schedules: rushing from one class to the next, they may only need to pick up one small item. Conversely, they may be interested in sitting and chatting with friends for hours: a restaurant with more complex options may be suitable for drawing them on. I focused on structuring the information architecture according to this mindset, honing efficient design choices and structuring content in the most digestible manner.
2 week timeline.
02 Background (A need for...)
A saying people have tossed about goes, "no one can know the mind of a woman." This phrase is both problematic and intriguing, often used in scenarios to subtly dismiss a woman's concerns or actions by implying that that thought is inherently impossible to understand, nonsensical, and irrelevant.
Thus, I set to create a project, investigating methods to subvert this form of thinking.
03 Target Group & Research
The focus group: university students. Some rush between classes to purchase a quick snack or on-the-go meal, while others may have time at that moment to settle and chat with friends for hours. How could this app service both parties? Initial breakdowns focused on chunking 'Hot Food' versus 'Grab 'n Go' items in various ways.
Based on group critique and feedback (from roughly 10 others) in two rounds of iteration, the following selection bar was designed, accommodating a hierarchy between the two distinct groups (hot food (slow) versus faster food and the time of the day).
Next, I conducted research on global competitors in the menu and food ordering industry to investigate visual components and organization that were aesthetically and usably pleasing for larger audiences, which are incorporated in the sectioning and structure of several of the prototypes below.
04 Ideation & Visual Style
Prototypes 1-5, ranging from low-fidelity prototypes to higher.
Above are the first 5 iterations, with various constraints ranging from pure grayscale for low-fidelity prototyping for a focus on usability to high fidelity, considering color psychology and refined detail. The color palette was tweaked to consider the WCAG 2.0 color contrast checker for accessibility purposes, and based on color psychology, invoke a warmer atmosphere while retaining a sense of freshness to complement the images of food. In total, 4 distinct methods of separating categories of food items were explored.
04 Final
05 Reflection
A focus on restraint, content organization, and simplicity allowed me to focus and gain a deeper understanding of modularity-- how each item's size, shape, hue, and even radius could be distilled to unconsciously signal a specific cue to a user, and allow them to process and understand an app more easily and speedily.
Similarly, crafting 6 iterations in the span of one week allowed for me to refine my practice in generating new visuals and structures rapidly.
.png)
A snapshot of the final opening screen, with an emphasis on the order ahead icons.