PREP | Product & Concept Design

PREP is an app proposal created to defend yourself from impulse buying food at the supermarket.

COLLABORATION
Merel Dassen and Hanna Kooistra - 3 weeks (2018) 

ROLE
Product Designer
Research, Concept Development, Wireframing, Interaction Design, Visual Design, Prototyping

TOOLS
Adobe Illustrator, Adobe Photoshop and Adobe XD

Banner: Prep App - Track your mood before you buy food

We don't always eat just to satisfy physical hunger
Sometimes it is because:

We feel lonely
We feel stressed
We feel exhausted
We feel bored
We feel (h)angry

Research sketch

The supermarket is designed to make you impulse buy

> Promotional prices
> Giving out “free” samples to whet your appetite 
> Specific foot traffic patterns
> The scent of baking bread or cupcakes 

After doing research and developing the concept we found that our ideas would fit the format of an app the best. 

Concept 

Track your mood before you buy food

When opening the app the user is asked to fill out a questionnaire. 

Based on the user's answers the app will direct the user to one of the 3 options:

  1. Do not go to the supermarket and order online
    > App provides healthy options
  2. Eat a snack and try again in 30 minutes
  3. You are ready to go to the supermarket!
Prep app screen
Prep app screen
Prep app screen
Prep app screen

Custom profiles based on goals

When the user opens the app for the first time, they are asked to fill out a questionary to customize the settings of the app based on their personal preferences and goals. 

Prep app screen
Prep app screen
Prep app screen

Flow

We broke our ideas based on our research down into three key objectives: mood scan, preparation and supermarket visit. We began to work on them in parallel. These "how might we" questions drove our exploration and experimentation for sketching concepts.


First draft 
We figured we needed to add a registration proces to the final flow. This way custom profiles could be saved for later. 

Prep app flow scheme process
Prep App flow scheme

Wireframe

Wireframe

Mockup

App Experience - User: "Finn"

We made a mockup based on user "Finn". He has already filled out his personal profile and is a frequent user of the app. His goals are getting into shape and eating healthy. 

What I would do differently

Because we made this project within 3 weeks, we missed out on opportunities to make this even better. So if we had the opportunity to push this even further, these are what I would do differently:

- Develop concept further
- Dive deeper into the user's journey
- Usability testing
- Accessibility Considerations
- UI Transitions to give visual orientation

Merel Dassen 

Product UX Designer