Published on | Prototyping: From UX to Front End — Medium Martijn van Meijel

Random Recept — Case Study

What if there was a website that can answer the dreaded question of “What do you want to eat?”.

How can we enable people to find a suitable recipe quickly?

What if there was a website that can answer the dreaded question of “What do you want to eat?”. Wouldn’t that be nice? You know the deal, you’re coming home from a hard day of work or school and you’re not quite sure what you want to eat… Spending another hour looking for that delicious recipe is definitely not an option, right? That’s how the idea behind Random Recept started.

Visit website

<a href="https://medium.com/media/e5b5932fc433f82f57f1e0610a4d19a7/href">https://medium.com/media/e5b5932fc433f82f57f1e0610a4d19a7/href</a>

The problem

Why is finding a good and enjoyable recipe so hard? In the time it takes to find a recipe that qualifies to what you want, you could’ve probably already made it. That was the main question behind Random Recept and the question that would lead to a simple yet amazing solution.

After spending some of his own time building a website that would cater to the people with this problem, Enver (the founder) came to the conclusion that a redesign was needed. The website got lots of visitors but it was hard for them to find what they were there for, great recipes.

The challenge

The goal was clear: design and create a website where people can find new and enjoyable recipes in a breeze.

The process

I started doing research in collaboration with Enver about the target audience, use cases, the pros and cons of other recipe websites. We came to the conclusion that a lot of other recipe websites had outdated designs, and too much noise in terms of information.

With the research in the back of our minds we continued and with every step asking ourselves, ‘Does this action cut time?’.

Taking inspiration from the more established recipe websites on the web and asking the questions ‘What are they doing that’s good?’, ‘Why are they the more established sites out there?’ I began sketching. Trial and error lead to a design that was both functional and eye catching.

The solution

A fully responsive website that could help people find new delicious recipes in a fast and easy to navigate way.

The recipes are presented in different stages. You get an image with a name and your search queries first to make a choice. if you are interested then you go on to check out the ingredients and finally you’re presented with the instructions.

There is even a way to help you out if you don’t know what you’re looking for. Other visitors of the website can rate the recipes and a top 3 is created from these ratings. And if you just want to check out all the recipes at once you can do that by navigating to the “All recipes” page, there you can sort the recipes by rating.

We found a way to engage more with the visitors by having the ability to send their favorite recipes and a chance for the recipes to be featured on the site for others to enjoy.

Colors and typography

We went for a fresh but traditional look on the design by using a combination of a sans-serif and serif font. The colors white, green and black support this choice as it’s associated with health and elegance.

<a href="https://medium.com/media/50533cc2d82fbe0f015a0841e54e6ae7/href">https://medium.com/media/50533cc2d82fbe0f015a0841e54e6ae7/href</a>

Recipe optimization

When a recipe is clicked on you will not be redirected to a separate page of the recipe, instead an overlay is presented with the recipe which is loaded with AJAX from our recipe database.

We did this to make the website feel lightning fast and not spend time waiting for separate pages to load, really emphasizing on the fact of cutting time to find a recipe.

Extra Features

Cinemagraphs of food related things can be found all over the website to create a more vibrant and alive website. It’s also a great way to stand out from static images on other websites.

On the homepage you can find a background that includes an effect made with WebGL, the effect gives you the illusion of heat coming from a wok in which fresh vegetables are being cooked.

<a href="https://medium.com/media/a4ff04135b6623f222b4e1d6c8f77cee/href">https://medium.com/media/a4ff04135b6623f222b4e1d6c8f77cee/href</a><a href="https://medium.com/media/cca4a8343c60d8f999cdf967053bccf6/href">https://medium.com/media/cca4a8343c60d8f999cdf967053bccf6/href</a>

Mobile experience

All of this is also available and optimized for mobile of course as more and more people navigate the web from their smartphones.

For example videos have been replaced with static images to make the mobile version as fast as possible. All of this without losing any of the core functions you would get on a desktop.

<a href="https://medium.com/media/d34de9f153ce6b5515f7327a710db5b2/href">https://medium.com/media/d34de9f153ce6b5515f7327a710db5b2/href</a><a href="https://medium.com/media/75a97112e5c64196ca886ec28139d63d/href">https://medium.com/media/75a97112e5c64196ca886ec28139d63d/href</a>

Project lead

The next step was the actual development of the site. I had no experience doing this so I had to find a backend developer that could build a system for the client to add recipes and a frontend developer to turn the design into a working website.

As this was the first time working on such a project for me and the developers, there were bumps along the way in terms of deadlines being moved because the development wasn’t going as swiftly as planned.

Through great communication with the client we knew what problems we were facing. And we both agreed that it’s better to take your time than to wrap things up quickly and I learned a lot this situation. Eventually we had to cut some features from our launch version and leave in some small bugs in order to have the website online.

Current goals

The goals after delivery are the monetization of the website so that it can continue to run and expand, this will be done by occasionally showing ads from the same niche (food industry) in between recipes. Our main goal though is to get things going and increase the number of visitors to the website.

What I learned

I learned from this project that it is important to keep it simple. Due to the long term of the project and the new knowledge I have gained in the meantime, I have simplified and modified the design.

Not only did I sharpen my UX and design skills during this project, I also learned a lot in terms of running a project, communication and managing clients. And I found out to make sure everyone has the same target to aim for and to learn from my and other peoples mistakes.

Credits:

UX, Design, Project lead: Martijn van Meijel
Front-end & back-end development: Ivar Smits
Front-end development: Bayron van den Bomen

Martijn van Meijel is a Dutch digital designer focused on UX/UI.
Always looking to collaborate with ambitious people to build something great together. Are you ready to take this challenge?

Say hello! hello@martijnvanmeijel.nl or connect via Linkedin.

www.martijnvanmeijel.com

Random Recept — Case Study was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Random Recept — Case Study

Cool stuff, every week

More Articles