Scope

UI/UX, Interaction Design, Creative Direction, Branding, Logo

Tools

Illustrator, Sketch, InVision

Timeframe

April 2018 - May 2018

Based on users' previous history and rating, Foodie recommends recipes and local restaurants to try.

'What should we eat tonight?' When paralyzing indecision hits, Foodie saves the night with recommendations and reviews from other “foodies”. Users input their likes and preferences and get personalized recommendations. With Foodie's various filters, users get exactly what they are looking for. Want a carryout Mexican place just 2 block away or a sit-down vegetarian-friendly restaurant within 10 miles? Foodie has got you covered! Foodie gets you out of the rut of eating at the same places and cooking the same meals over and over again. You might even discover a new favorite restaurant to bring your friends or recipe to impress your party guests.

I worked with 3 other students to design an information system that would solve a problem. In addition to the user interface design, we identified the functional and non-functional requirements and used UML to communicate the structural design of our application.

Requirements
We started by identifying the app's requirements to get a better understanding of what the app needed to do and how it should perform. By putting all our expectations into written form, all group members had a physical document to refer back to.
Defining the Users
As creators of the app who based Foodie off of our own daily frustration, we put ourselves (college students) as a main user. But we also decided that Foodie had a much larger user base than college students. Foodie's users were young adults - people that experiment more with their food choices and are more willing to seek out new things and experiences.
Value Analysis
In moving forward, one key test we wanted evaluate was Foodie's value it would bring to users. In order to be a worthwile app, users will have to see value in the app and thereafter take the added time and effort to both download and learn how to use the app.
Diagramming Flow
Together, we designed a sequence diagram to show a user as they move through the app in chronological order. The diagram also shows how various types of screen interact with each other like returning to the the full recipe list once a user defines their filters.
Structure
After extensive discussion, we identified each different type of screen. To quickly rearrange the hierarchy and allow for easy changes, we initially used card sorting, eventually putting together a final information architecture diagram.
Considering Trends
In our research of popular apps and websites, we noticed common design trends. In designing the interfaces, we decided to include some of these popular trends. Hero images allow for attractive visuals that catch the eye. Infinity scrolling is for simplicity and reducing the amount of clicking around. With mobile screens hamburger menus allows for more spacial real estate so more content can be shown. Lastly, drop shadows give elements depth and an illusion of design brought to 3D real life on a 2D flat screen.
Time to make things pretty!
After analyzing and deciding on various elements to include in the final product, we moved to designing the user interfaces and identifying how screens interact with each other. We quickly drafted up low fidelity sketches - portraying interactions between screens, transitions, and key visual elements. Converting our rough sketches to cleaner wireframes, we were able to get an idea of available space and appropriate layout of content. Finally, we used InVision Studio to both craft mockups and create an interactive prototype.
Lessons Learned
The biggest takeaway I learned was the complexities of working in a team. There are obviously the well known advantages of teamwork like diverse skill sets, people specializing in areas they are good at, and generation of new ideas, but no one talks about the intricacies of group work. When we talk about how each group member brings their unique perspective to the table, that can also mean different expectations and different ideations of how to implement what has been verbalized. Through working in a small group, it was fun and sometimes challenging addressing each group members’ concerns and still at the end of the day having a final product that everyone is happy with.