A recipe web + app for food lover

I love food, and enjoy cooking and baking, therefore I actively search for different recipes. When looking for new recipes, I usually prefer a recipe site that has appealing graphic presentations, easy to navigate, and options to save recipes.

With Savoureux, this recipe app will make one's daily life easier with many recipes available at the tip of your fingers, at the market, and right into your kitchen. Whether if it's just a meal for yourself, friends, or family, Savoureux provides many different cuisines and categories that fit everyone's preference to satisfy the tummy.

OBJECTIVES

Design responsive user interface mobile app for Savoureux
Extend and develop the brand into web application.

TOOLS

Adobe XD
Google Doc
UsabilityHub

ROLE

UX/UI Designer
(Research, Interaction Design, User Testing, Visual Design)

RESEARCH

GOAL

Understand users’ life styles and preferences.

Competitor Analysis

It’s important to research to get a feel for what kinds of issues are related to the problems, as their solutions to similar issues might give more comprehensive understandings about their strengths and weaknesses. These insights also help identifying any gaps in features that Savoureux could address. I analyzed 2 competitors. A complete analysis can be viewed here.

USER RESEARCH

Understanding is the key to problem solving. Without a solid grasp on what a problem is, where it originates, and what feeds it, any solution one arrives at will be inadequate. We might find something we would have never considered on our own, and to gain this understanding, a user research in the form of interviews was conducted. A complete user research can be viewed here.

USER PERSONA

Since user research is conducted, more details have presented, and it is time to make sense of the collected information. I created scenarios as part of developing user persona to help communicate and synthesize user research findings. Stories and contexts are both real and fictional. User personas paint a clear picture of a user’s goals, needs, and behaviors.

DESIGN & TEST

Now moving to my favorite part, design!

MOOD BOARD

Mood board is great method that helps me consolidate inspirations into a more concrete visual directions for the designed product/pages. Then, I organize images and pieces of visual content so that I can examine my ideas and share them. Initially, I created 2 because I was still undecisive on the color theme:

STYLE GUIDE

USER FLOW

LOW FIDELITY WIREFRAME

A/B TESTING

Upon sketches, I was debating on which color to use as support for ‘selector’ feature in a search page, therefore I conduct a preference test on UsabilityHub (also as part of a lesson during this course). Result can be viewed here.
The preference test was run correctly and shows unbiased results from a wide variety of participants.

USER FEEDBACK

Once wireframes are created, it’s time to conduct some testing plans for design feedback.

Positive

Pg 1: I like that it’s compatible with many devices. That way it gives people options whether to download it on their phone, tablet, or laptop. App available on multiple platforms. Consistent color scheme, font treatment, photo style and quality to tie the look across all devices.
Pg 2: I like the color theme and how the colors of the food chosen corresponds with it too. It’s simple and not hard to read.
…

Contructive

Pg 2: "Savoureux" has an odd placement. I get that you don't want to cover the image so you placed it between the drip of honey and negative space, but it feels too close to the left. Maybe just push it to the right more to its centered since the other text is centered.
Buttons are transparent here but not on the other pages. Keep it consistent. I think the button on the other page that's solid looks better and has a nice gradient transition.
…

A full review of user comments can be viewed here.

VISUAL DESIGN

MOCKUPS

After getting feedback from user analysis, more optimized elements and features are added to create more efficient and intuitive flows.

RESPONSIVE UI DESIGNS

Responsive UIs are created by applying established styles. It further helps to examine the overall aesthetic feelings and visual balance on different devices’ screen size.