Case study: An app for your memorable culinary experience
By: Rina Lia
Tags: Product Design, Case Study, Culinary, Mobile, User Experience

Prototype

Sketch

After done with user flow, the next step is sketching a solution. I had a pretty good idea, start with app outlining, what to include, content hierarchy then select what I thought would work the best. With time not on my side, I decided to do Paper prototyping. Testing ideas and user flow with users then improved prototype on Hi-Fi.

A select sample of many of the paper prototyping made for Elok

Wireframes

When I began wireframing, based on the information from the users became more realistic and helped me put all the elements in perspective without worrying about its appearance. I designed my wireframes in Figma and liked how I could see them all laid out in their own sections and notice the flow in a cleaner setting. This helped me to identify any missing steps or actions that needed to be worked on more and to identify useless steps. Here some wireframe:

Onboarding, login and forgot password wireframes

Home and community wireframes

Profile wireframes

Note: Hi-Fi results will be quite different from the Lo-Fi designs, from the location of the information, the buttons, styling, and so on.

Moodboard

Elok Moodboard

Benchmark :

Grab Airbnb Zenly

Onboarding

Inspired by Zenly, they had blue pastel as a background colour, comfortable on the eye and short messages to introduce the user what the app is.

Icon

Grab shows the features they had by the icon. The icon is simple, understanding, and similar background colour with the primary colour of grab, which is green.

Cards and profile

Airbnb card utilises white space, clean elements, and price so that users can quickly get the info they need and encourages that it is a simple process to choose to rent out a property or spare room to guests. For the profile section, it is accessible to understanding.

Community

Airbnb inbox is quite simple, they had a tab section, so it was more practical and didn’t need another bottom tab bar design for messages and notifications. Especially in my case, this tab section will help me a lot to make a more clean design.

Colour Palette

Since culinary brings happiness, joy, and fun. I went for pastel orange as my primary colour. I want users to feel the excitement when using the app. I put some illustrations that show the emotions that the user can experience.

Typography

I decided to go with Poppins because of its versatile font weights, and it is easy to read. Also, the fact is Poppins a round-type font which makes it more fun then adjusted font sizes would help achieve a clean look.

High Fidelity

Onboarding

Onboarding usually the set of screens shown during the first interaction with the app. information about the product to the new user. Gives a quick insight into what problems the app solves, how it can help the user and what benefits it provides.

Login

I added a social sign in along with conventional email sign up and log in. For efficiency, I do not show the sign-up process here. It is similar to the login process, but I also ask the user’s name.

Home

For the sake of avoiding redundancy, I do not show the permission process here. Within the homepage screens, I request access to users location, access to contacts, and request the ability to send push notifications. I decided to show a user’s place at the top of the home screen, which is like visualising delicious food around the user. During my research, I got to know that when thinking about culinary. People generally search either by authentic food or hits food in that area and 24 hours food that is always available, especially for someone who is looking for food at midnight or early morning. Sort feature, help the user to sort food by ratings, price, most purchased quickly.

Home features

On tapping “Cuisines”, “On budget”, “Togetherness”, it takes the user to a screen with a list of different cuisines, set minimal or maximal money for a portion of food, and various places to spend their culinary. That would help the user in decision making.

Detail Card

Back button: Back to the previous page, which is the home. Share and wishlist: Share the food that users like via social media and save delicious food that the user wants. Food images: Set user expectations about the foods they are selecting. The idea is used to get a feel for the food in a way that food descriptions never can, and users appreciated offering multiple images. Information: Give the users the critical thing they need to know about the food. Call: Call the restaurant for booking or ask for more information. Menu: List of food and beverages offered to users and the prices. Payment: Payment methods available at restaurants. Direction: Open a map, and how to get there. Facilities: List of facilities provided by restaurants. Rating and reviews: Access the quality of the food. CTA: Show all 500 reviews need to be easy to see on the page. Giving options if the user wants to continue reading reviews. Add review: Users write their opinion about the food.

Share Recommendation

Users can see all discussions then recommend food or restaurant by three tabs. One to tap “discussion card”, one to tap “write recommendation”, and one to tap “Publish” button to post your recommendation. This is great because you can give food or restaurant your personal review with three taps.

Ask Recommendation

Blank state in “my posts” page if you’re a new user and never ask for a recommendation. Users will begin to type the location they want or use the current location, then type the desired food or restaurant. Tap the “Publish” button to post questions.

Profile

The last tab is the profile tab, but I don’t focus on the profile for the sake of the project’s scope — for now. The profile is where you can view list friends by one tap and another account settings.