Food.com

Redesign

UI/UX Project

A database to makeRedesign the recipes website with the possibility of sharing and buying raw materials.

About

Business goal

It’s a social media for finding and sharing recipes and has alot of features to use and enjoy.

Features and pros

Making personal profiles and sharing recipes by everyone.
Communicating with others by like, comment, share, retweak, ...
Using recipes by saving, printing, shopping their ingrediends, ...
Searching recipes in variant categories and groups

Team

3 Members

My Role

Product definition and strategy
User and competitor research
Information architecture
Visual design
Mid-fidelity wireframes and prototypes
High-fidelity designs and asset creation
Usability testing and validation
Providing direction to the design team

Tools

Original

User Target Group

Everyone is interested in food and cooking.

Problem & Solution

❌ Problem: not displaying business values when the user enters the site, including being a social network, various site features and ...
✅ Solution: Change the home page and show the values at a glance to the user.

❌ Problem: page clutter, irregular sections, confusing content and page layout.
✅ Solution: Redesign the pages of the site and their layout, change the gradation, cards, typography, colors and try to integrate the generalities and visual details of the site.

❌ Problem: Irregular categories and sections, inability to quickly access different content, incorrect filtering, etc.
✅ Solution: Change menus, filters and categories with the help of competitive analysis, card sorting and user interviews. Perform information architecture completely in several steps and with different iterations.

❌ Problem: some sections, buttons and CTAs do not work, lack of guidance and guidance of users in different sections, the presence of irrelevant buttons, additional and repetitive messages constantly.
✅ Solution: Redesign buttons and CTAs and their prototypes and ensure their functionality and other parts using usability test and various iterations based on userflow provided.

Competitive analysis

Given that there were a variety of similar sites with different features, I decided to use competitive analysis to view the features and information architecture of similar sites and check the capabilities and features of the current site and other popular sites to find shortcomings and If the market needs, with the consent of the employer, I will add new items to the site to.

Card sorting

The main reason for doing the card sorting was to access the best information architecture based on the site content according to the needs and line of thought of different users.

Card sorting

Writing items on cards for Card Sorting
Writing Site`s items on cards
Asking some people to sort them
Interviewing with them while sorting

Data analysis

Importing card sortings in a table
Analysing the groups and categories
Extracting site map from datas

Site Map

We designed the site map based on the sorting card performed by users.

Second site map

After the user testing, I realized that users can not easily reach the desired result from the categories, so we decided with the team to make changes based on user behavior in the test.

The final site map

After presenting the project and showing the site, I got feedback on changes in the menu category to create a better user experience.

Finally, after reviewing and testing again with the team, we decided to use competitors' analysis to categorize the menu.

And according to the results, we designed the final map site.

Interview

There were questions along the way for us that we decided to answer by interviewing users to design a path to their sanctity on the site smoother.

1- when do you search for a food recipe?

2-Do you enjoy watching photos and watching cooking videos?

Hueristic Evaluation

After reviewing the site and finding out its flaws, we performed a first-hand heuristic and by classifying them, we realized that the biggest and main problems of the site are the lack of user awareness of the system and the lack of integrated and standard design, which we decided to correct.

Persona

Based on the results we achieved through research and interviews, I designed a persona with the characteristics of the interviewees.

Task Flow

Based on the business strategy and the results obtained from Research on the behavior of users on such sites and according to the conversations of the interviewees, I designed the user's path.

Wireframe

During the research, I tried to understand the needs of users when entering the site and their movement path on the site, and I designed the site's wireframes based on the user's convenience to access her favorites.