独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Visual Design of Foodie Finds

Taking a prototype from low to high fidelity

Concept project for General Assembly course

Services Provided: Wireframes, Branding, Mood boards, Prototyping, User Testing

In an earlier project, I researched a classmate’s problem and built a paper prototype of a mobile app to meet her needs. This week I focused on the visual design, taking that paper prototype and making a mid then high fidelity clickable prototype. I established the visual identity of the mobile app through research and user feedback.

For more info on the initial concepts, please see: https://medium.com/@bmaewright/foodie-finds-22da84a929a5

Fiona is a well-travelled foodie, she likes to pass on great food recommendations to friends but can find it difficult to remember the specifics (e.g. name, location) months later. This is especially true when names are in a foreign language/alphabet and also when remembering small places such as market food stalls and family-owned restaurant without a web presence.

The solution identified in the first week was to build Fiona a mobile app that allowed her to easily save and send food recommendations to her friends: the Foodie Finds app. This week the focus was on the visual identity of the Foodie Finds brand and app.

Foodie Finds Brand

In establishing the Foodie Finds brand, I first identified brand affinities. Foodie Finds is like Goodreads because it values the community and the contributions of its members. It is similar to Airbnb as it focuses on the discovery of hidden gems, places that would not be easily found through a search engine. And finally, Foodie Finds, like Instagram, puts emphasis on the visual image. This was an important point from user research — Fiona, as an artist, really enjoys taking a great photo of food. But she rarely shares foodie photos on Instagram, instead she shows friends the images when telling them about her trip.

This was an important point that became part of the Foodie Finds brand as I defined semantic differentials.

Sharing but not broadcasting. Foodie Finds is not a review board but a way to share recommendations with close friends.

Inspiring but not overwhelming. Sites that show strangers’ reviews for dozens of restaurants can be overwhelming. Foodie Finds focuses on recommendations between close friends.

Simple but not basic. As a user will be adding info about a restaurant, cafe, or food stall on-the-go, the app needs to be simple but enjoyable to use.

Bringing these together, I defined our brand voice and tone.

Mood and Colours

In initial research, I focused on review apps and foodie apps. The apps seemed to have two approaches. Apps like Time Out and Yelp had a more corporate feel with red and black. Other apps such as HappyCow and Food Diary used icons and large colour blocks. A selection was shown to the user for her feedback and she preferred the HappyCow and Food Diary approach.

From this feedback, I created a moodboard with a focus on how Fiona would feel when using the app. In general, if she had a great food experience she would be excited to share that with friends. So the moodboard below includes elements of travel, discovery, sharing with friends and of course food and places to eat.

Because Fiona is a vegetarian and loves fresh food, I decided to use bright purples and greens, as shown above, in the Foodie Finds app.

Design Iterations

The paper prototype focused on the user flow of adding a new restaurant entry and sending it to a friend via the app. This is shown below.

These screens were digitised into low fidelity wireframes using Sketch.

From these initial designs, colour and copy was added to create a higher fidelity prototype, which was tested with Fiona and four other users. Some changes from the design iterations can be seen below.

New Eatery Entry Screen

Home Screen

The home screen went through several iterations focusing on the buttons to achieve the main tasks.

4. In the original design, the users found that the buttons had too much text, were too high on the screen, and it was in general too plain.

5. In version 3, the buttons were moved lower so they would be easier to click and a title and preliminary logo were added. Copy was also simplified. The users found the button placements better but the buttons were too small.

6. In the final version, the buttons were returned to a column but they were larger and located in the bottom half of the screen. A logo with food in the map pin symbol was created for the focus on finding food.

Prototype

The clickable prototype can be found in the link below. The scenario is that the user is in a restaurant and has just had a great meal. She thinks her friend Rachel would love this place, so she adds a new entry about the restaurant and sends it on to Rachel via the app. This prototype focuses on a few key paths and is not fully functioning.

The Outcome

Fiona was very happy to have all her food memories in one place.

The next steps will be to iterate on the note functionality as users other than Fiona found it to be too much clicking. The design was originally made more editable because Fiona doesn’t use the same language when making recommendations to her friends and her boss. Further testing of possible designs for this screen will identify the best approach.

Another future focus will be on the asking for recommendations from friends as this has yet to be designed.

Any feedback on the design and process is always much appreciated! Please let me know in the comments below.

Add a comment

What is your view?

Send

Related posts:

Working With Others

Humans learn to be social at an early age which will prove to be important down the line. I believe being someone that others want to work with is about being able to go above and beyond whether that…

Hello Katie

This is my little story. “Hello Katie” is published by Nate.

Why Your Band NEEDS Good Art

Perhaps the most direct financial benefit that you can find in the music business is having good art. I know that sounds crazy. I know that a lot of you reading this will talk about how different…