Subi is a platform that allows food lovers to visually share and discover new food choices based on their own tastes. The appearance of food heavily influences our perception of a tasty meal, and Subi is designed to present that upfront.
You've just gotten a break from work, or from class, and you really want to just go out and eat something. Time and time again, you're met with the same burning question: "What do I really want to eat?" You sit there, burning through Yelp!, Instagram, anything, and yet you just can't quite grasp what it is you want from looking through places and menus.
10 minutes have now passed, and you simply decide to just go to that taco truck right around the corner that you always go to instead.
People have trouble deciding what it is they want to eat, yet they want something new every once in awhile and they need to know in a timely fashion. This is what I'd like to solve.
Study existing user behavior and points of friction.
Document users to refine and further iterate.
Hone high fidelity micro-interactions and behavior.
All participants place the highest value in seeing visual imagery first, otherwise it is discarded. Secondary priorities are considering other factors such as reviews, distance, and pricing.
By categorizing information, I can understand what kind of information should be presented to the user in different states of the product. Later revisions of the IA consist of simplifying the structure by discarding redundant information and/or features that are either out of the scope of the product or does not serve to enhance the product's value.
Wireframes were first created out of pen and paper to allow for faster iterations. Multiple versions of a particular screen were created to explore different ideas. The most promising one was made into a paper prototype. These prototypes were tested for its ability to communicate key information and logical flow between sequences.
The design of the product is where it becomes really intricate. With a food app that helps people discover new things, I wanted the product to feel bold, vibrant and fun to use. These were my 3 key design guide words which will inform the direction of my design.
Flow and fluidity were one of the primary goals of designing the interactions for Subi. Every transition and micro-interaction were tuned to empower the user to navigate naturally through the experience as an extension of their mind.
A large portion of the app flow and interactions were created in a single Framer project. By utilizing Framer's new Design feature, I was able to create and reuse components by templating information within it from a .json file. What this means is I can create as many pages/items as I want just from adding items to a .json file instead of designing different screens with different information. This allows for every single card you see in the main carousel to have its own detailed information page and I can add more just as easily.
The final design cover's most of the primary use case and scenario's for Subi. By constantly revisiting the scope and goals of the product, I was able to contain much of the experience in a very small amount of screens by enhancing the value of each respectively.