2017 – process and prototyping

Subi Food

Subi Thumbnail

School: ArtCenter College of Design
Role: Individual
Instructor: Brian Boyl


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.

Scenario Video

Scenario video demonstrating common use cases and interactions

Interaction Highlights

Browsing through different through items
Saving items into favorites for later
Access saved items
Expanding an item for more information
Opening maps and directions to a location


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.

Project Focus

Study existing user behavior and points of friction.

Document users to refine and further iterate.

Hone high fidelity micro-interactions and behavior.

Research & Analysis

User Interviews & Observations

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.

Group of interviewies


  • Aspires to trying out new places.
  • Likes to eat at regular places out of comfort.
  • Photos of food help decide faster.
  • Likes to see whats popular or trending.


  • Users want to explore and try out new stuff.
  • Balance between suggesting old and new places.
  • Surface critical information faster.
  • Being able to see what's popular/trending.


Information Architecture

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.

Simplified information architecture of Subi
Information was simplified to deliver a better experience.


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.

Image of paper prototypes on a desk
Montage of someone testing the paper prototypes

Key Learnings

  • "Like" and "Save" are confusing for the user.
  • Would like more information about a restaurant.
  • Friend interactions are too obscure.
  • No place to see notifications.


  • Provide better distinction, and naming for "Like" and "Save".
  • Streamline information in restaurant details
  • Downplay social features as it detracts focus.
  • Determine necessity of notifications due to change.

Visual Design

Design Explorations

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.

Exploration and experimentation with various different design approaches

Interaction 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.

Video showcasing interaction flows


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.

Screenshot of Framer design mode
Modular layout in Framer design mode
Screenshot of Framer code mode
Interactions and details werer added dynamically


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.