Mobile Experience

Objective

In this project, you will create a very simple mobile application that fulfills a user need. You will engage in a prototyping and ideation process that will eventually result in a tested and verified low fidelity mockup.

Description

Foodly is a food recipe app.  It features a lot of the basics. You can look through tons of recipes, save your favorites, and create your own recipe. It also comes with step-by-step instructions and an accompanying set of photos, reviews and timers within a beautiful, streamlined interface.

Persona

I create a persona based on people who cook everyday and enjoy cooking for their family,  or want to cook food with healthy ingredients and people who like to be creative with cooking.

Screen Shot 2018-03-23 at 12.39.34 PM

Affinity mapping

I used an affinity mapping method to find patterns and group them together. It helped me get useful information about my target users

Screen Shot 2018-03-23 at 12.53.28 PM.png

I analyzed the results and noticed users similar behavior and pain points.

  • It can be divided into two group— people who don’t know what to cook and people who plan their menu in advance
  • There are three ways to know what to cook—search on the internet, check on fridge or already known recipes.

Interaction Framework 

The interaction flow is easy and intuitive. I created a chart explaining how content will interact with each other.

Screen Shot 2018-03-23 at 11.29.42 AM

Paper Prototype

I created a paper prototype to test my design ideas with users. It was my first experience with paper prototyping and I was amazed by its benefits. It’s a great tool to test app’s navigation and workflow, create a rough layout and quickly test the ideas.

Screen Shot 2018-03-23 at 1.18.36 PM

Screen Shot 2018-03-23 at 1.30.52 PM.png

Wireframe Prototype

Next I created wireframes using Adobe Xd. After sketching using pen and paper I thought everything would fit into place when I will create wireframe. It takes lot of effort to make a wireframe for a mobile app. It was not easy to fit everything I want in my app. Therefore, I made a list of what is important for the final design.  I truly enjoyed the experience of sketching and wireframing. I learned, designing a wireframe doesn’t mean designing a mobile app from scratch all by myself. It just means determining how users will interact with the basic functions of your app.

https://vimeo.com/261550977