RealRecipe

Creating a platform for foodies to share and learn from one another

Overview

I dedicated four months to crafting the foodie experiences for Connect Link. Through collaborative efforts, I designed and prototyped a seamless mobile experience that complemented its desktop counterpart.

ROLE

Product Designer

DURATION

4 months

SKILLS

Product thinking

User research

Visual design

Team

Rana Jayant

Siyu Offor

During my time at ConnectLink...

Connect link is an early-stage startup. During my four months, I addressed information architecture gaps, created wireframes, and adapted the RealRecipe website into a responsive mobile application. Currently, RealRecipe is in its early stages, seeking seed funding.

What is RealRecipe? A user-generated content (UGC) app, where users can share their own food photos and recipes.

The product

The feed

A curated feed of posts, events, challenges, and giveaways specific to users.

Full recipes

Users can write in depth recipes for other users to read. They can also request recipes from image only posts.

Events and challenges

Community-wide events and challenges open to all users to participate in.

A GIF of RealRecipe's splash screen and app walkthrough.

Navigating ambiguity

Upon my arrival, I was promptly handed a detailed spreadsheet outlining the features and functionalities of RealRecipe. Faced with relatively limited initial guidance, I took the initiative to formulate my own comprehensive project plan. This plan aimed to provide a structured roadmap for my involvement with the RealRecipe project, ensuring that all aspects of the development and implementation process were thoroughly considered and organized.

Site map

Understanding RealRecipe's structure to gain a clearer perspective on its components and their relationships.

A team member and I collaborate to create a site map for RealRecipe.

A image of the site map for the RealRecipe app.

Competitive analysis

The objective was to explore successful user experiences and discover valuable patterns that could be leveraged to enhance RealRecipe.

I aimed to identify strategies that could be adapted and implemented to create a more user-friendly and engaging experience for RealRecipe users.

Facebook Logo
An image of Facebook's home screen.

Facebook seamlessly integrates a wide variety of content within its feed, from events to photos.

Instagram Logo
A. image of Instagram's home screen.

Instagram's layout and general user flows is well known by many. it serves a great base for any social media app.

Pinterest Logo
An image of Pinterest's home screen.

Pinterest has a thorough onboarding process and easily allows users to discover new content.

Ideation

Based on the research, here are the goals I am helping users to achieve:

Explore and find content that the user wants to see.

Write out in depth recipes.

Build community and bring foodies closer together.

First run of iterating and testing

I explored various iterations of RealRecipe's core features to investigate different possibilities before delving into high-fidelity designs. My primary focus during this phase was experimenting with interaction patterns and user interface layouts, because they would directly affect other screens.

Two mid-fidelity designs of viewing a recipe on a post. One inspired by Facebook's user flows and the other inspired by Instagram's user flows.

I thought having a less cluttered feed would be better for users. However, the majority of user prefered the second design because the flow seemed more straightforward and involved less tapping.

Two mid-fidelity designs of requesting a recipe on a post. One inspired by Facebook's user flows and the other inspired by Instagram's user flows.

Not all posts have fully written out recipes. Some are image only. An important feature of RealRecipe is the ability to request recipes. The early testing was crucial in deciding how this main feature looked so that the UI stayed consistent throughout.

Creating the RealRecipe brand

After the first round of testing, the team and I decided to move forward to branding. RealRecipe is based on a physical website (recipesinhindi.com). To call back to the original website, we used a similar color scheme for RealRecipe.

a image showing the colors used in the RealRecipe app.

Putting it all together

With a more thought out branding and UI concept in mind, I proceeded to design high-fidelity wireframes and prototypes for the mobile application. During this phase, I prioritized accessibility considerations and delved into a bit of interaction design.

An image of the final designs of the RealRecipe app.An image of the final designs of the RealRecipe app.

Adding little things

With a more thought out branding and UI concept in mind, I proceeded to design high-fidelity wireframes and prototypes for the mobile application. During this phase, I prioritized accessibility considerations and delved into a bit of interaction design.

Approving recipe requests

Drivers can post their upcoming trip, offer up their seat, and connect with other riders.

A GIF of approving a recipe request from the notifications screen.

Filtering comments

Drivers can post their upcoming trip, offer up their seat, and connect with other riders.

A GIF of viewing comments on a post.

Saving recipes to collection

Drivers can post their upcoming trip, offer up their seat, and connect with other riders.

A GIF of adding a post to a favorites folder.

Final designs

A GIF of posting images to the app.

Post images

An accessible button that takes the user right to all the available orders that are ready to be delivered.

Post recipes

Drivers can post their upcoming trip, offer up their seat, and connect with other riders.

A GIF of adding and publishing a recipe on a post.
A GIF of adding a poll post, replying to the poll, and viewing the poll results.

Post polls

An accessible button that takes the user right to all the available orders that are ready to be delivered.

Prototype

Reflection

This was my first time working with startups, and it was a bit challenging at the start. But, I'm really thankful for the experience. It helped me get better at designing and taught me how to explain and stand up for my design choices. Sadly, things come to an end and I cannot see this project through to the end.

Next steps

  • If I had the chance, I'd do another round of usability tests.
  • I want to learn more about design systems. I'd like the fully think out RealRecipe's design system.