Zinat Farahani
Zinat Farahani UX, UI Designer
Download CV

A Fresh Visual Design

Jan 2021

What is Toogreen?

It is hard to find vegetarian dishes or restaurants in Turkiye, cause the majority of the population loves meat dishes. Toogreen is a food delivery just for vegetarians in Istanbul/Turkey You can find a variety of vegetarian meals in Istanbul’s restaurants.

Business Goles

  • Ease of use
  • Users able to prepare vegetarian dishes with recipes
  • Orders frequency
  • Returning users to the app

What should we do as product designers?

As product designers of this project, we should design it for ease of use for users to find their wished dishes quickly and make sure they can find recipes for dishes if they want to make that dish.

So we did:
  • Determine user priorities and tasks
  • Create and post user surveys online
  • Conducted user interviews with four people who are vegetarians
  • Determined user problems
  • Created user persona
  • Competitive analysis
  • Conduct card sorting
  • Prepare IA, flow chart, and task-flow
  • In the last step, we conducted a usability test. We found five issues to solve, so we did an iteration

User Research

To fully comprehend our users, we conducted a survey and interview with vegetarian people, which helped us know their pain and make something more helpful for them and the business.

Survey

By sending a survey to some community of vegetarians to know them, we got surprised and had 32 participants!

Interview

We interviewed four people who took part in our survey. We found some crucial keys that you can see in the user problems and user pain points sections. You will see some of our questions and answers below:

User Problems

  • Lack of content of foods (ingredients, photos) on current apps
  • Lack of vegetarian types
  • Lack of finding a variety of vegetarian dishes
  • Set address
  • Difficult to find vegetarian restaurants or those restaurants that have vegetarian dishes

User Pain Points

  • Find dishes based on the type of vegetarian
  • Encounter distracting home page on food deliveries
  • Adding address
  • Longer checkout time

User Persona

By on the data we obtained from our small and quick research, we draw up a general user persona that reflects the app’s users.

Competitor Analysis

By analyzing our significant competitors, Yemeksepeti and Getir, we have identified our strengths and weaknesses, by knowing those, we can become aware of opportunities to grow and surpass rivals.

Card Sorting

Card sorting is an effective technique in information architecture; It can help us organize content so that it suits our users’ mental models rather than our point of view of us. Fast, Affordable card sorting is remote card sorting that we did with Figma.

Information Architecture (IA)

By combining our research we obtained an optimized and organized structure that helps users navigate them to find and process the information they need.

Flow Chart and User Flow

By depicting the whole process, we can identify how the user is navigating and see if they meet their needs. Also, by creating the user flow, we know the steps a user takes to complete that task. It helps us make a clear way for the user to achieve its goal.

Crazy 8

For the main page of this application, we needed to generate as many ideas as possible, so we decided to do it with the Crazy 8 method. After we came to a common opinion, we went to draw other sketches.

Sketches

Design system

As always, we prepared the general design system before going to design interfaces, and little by little, we completed the design system while we designed each screen.

User Interface

In this project, we had both light and dark themes that you will see below.

User Interface

We ran a usability test with 5 participants and found some minor UX writing issues and two spots for improvement

#Issue 1

The first one was when users searched for dishes, some of them didn’t realize there was more than one dish in each restaurant, and some of them had problems with swiping them in restaurant cards. We decided to change them to vertically order and show up to 3 foods, then a more button to see more foods. Here you can see before and after the usability test result.

#Issue 2

In the second issue, we found some users had problems when they wanted to explore the menu list, so we added links to each topic of the menu that by clicking on that, the user will scroll to the related section. Here is what we did:

What’s next?

We want to find a solution to choosing the type of vegetarian to avoid re-selecting that for each use. In addition, they should be able to choose another type for other people that they want to order for them.

See other case studies