Overview

Food Art with Kids was my first paid UX design project. The client runs a website with many fun, healthy recipes designed to help kids have fun with cooking. The client also teaches cooking classes at a local after-school program so she gets to try new recipes with the kids a couple times a month. The users of the website are mainly the parents of the kids at the after-school program.

The client has everything in WordPress, which is a design constraint, but I’m going to help implement the design with a programmer after I graduate my UX/UI design class. We had 2 weeks to complete this assignment, which was a tough constraint considering a full redesign, including a new logo. I was able to finish it in time with two extra days to relax!

The problem: The current design appears dated and is not as user-friendly as it could be. How do you design an easy-to-use recipe site that is implementable and allows for the user to post new content on their own after implementation?

Specifications

  • Project duration: 2 weeks
  • Tools used:
    • Figma
    • Adobe Illustrator
    • Adobe Photoshop
    • Miro
    • Whimsical

Roles

  • UX Researcher
  • UX Designer
  • UI Designer
  • Visual Designer
  • Graphic Designer

Deliverables

  • Project timeline
  • Competitive research, user interviews
  • Persona, user flows
  • Feature roadmap
  • Logo, style tile
  • Low- and high-fidelity wireframes, prototype
  • Usability testing and findings
  • Final mockup/prototype revision

Goals

  1. Conduct competitive research to see what other recipe sites do well and what could be improved
  2. Conduct user research to see how users like to use recipe sites, including what they like and don’t like
  3. Design a website that’s easy to use, visually pleasing, checks all the boxes functionally, and is implementable with a limited budget

Competitive Research

I started by researching other cooking/recipe websites, including some recommended by the client. This provided a necessary baseline for the structure of the website and got me thinking about what I like and don’t like about each site.

User Research: Planning

When determining what I wanted to learn from users to inform my design, I realized that I would need to ask questions about the homepage and also the individual recipe page, as these are the two main experiences on a recipe site.

Research Objectives

  • Understand what users want out of a recipe website
  • Understand how users use recipe websites
  • Understand pain points that users face when finding and using recipes

Research method

  • Individual interviews, conducted remotely
  • I scheduled interviews with 4 participants between the ages of 26 and 63 who enjoy using recipe websites frequently

A few example interview questions:

  • “What do you look for in a recipe site? Do you have any favorites?”
  • “When looking at a recipe site, what do you like/dislike?”
  • “When looking at a recipe page specifically, what do you like/dislike?”
  • “Do you leave ratings/any other feedback on recipes?”

User Research: Results

Key findings, finding a recipe:

  • 3/4 participants already know what they want to make and the ingredients they have, and search those things to find a recipe
  • 2/4 participants follow newsletters and Instagram accounts for recipe ideas

Key findings, on the homepage:

  • All participants said they do not like ads/upselling
  • All participants like good photos – visuals are important
  • All participants mentioned that a clean, uncluttered layout is what they want

Key findings, on the recipe page:

  • All participants prefer a short snippet of recipe background but “not the author’s life story”
  • 3/4 participants mentioned that they want the recipes to be clear and easy to read with not too many ingredients
  • 2/4 participants like that some sites provide similar recipes at the end of the article
  • 2/4 participants mentioned that a neutral/pastel background color is appealing and less sterile than pure white

Based on this research and what I learned from looking at competitors, I took a linear approach to define a persona and user flows. Taxonomy was pretty straightforward without anything special because there were a limited number of pages and all the websites I looked at had similar site structures.

Persona

To develop the persona, I took traits from each participant and inferred some similar ideas. I may have developed more personas if the project turnaround time was longer, but I felt that this one mostly covers many scenarios.

User Flow: Main and Additional Tasks

I made a task flow based on how my research participants use recipe sites. For this project it wasn’t too complicated of a user flow, which was fortunate given the quick timeframe.

Logo Design Process

The client didn’t have a logo ready, so we worked together to make one that was fun and shows art mixed with cooking. This took a significant portion of the project time. After several iterations, we were happy with a logo that shows 4 dishes that involve food arranged in an artful way:

Low-Fidelity Wireframes

I started by designing a clear and easy-to-use interface inspired by design elements used by current design trends and competitors. I designed sizes for desktop and mobile as these are the sizes that research participants mentioned that they use.

Style Tile

After making the logo and getting some work done on the wireframes I made a simple style tile with the logo and UI elements. I chose a color palette based on the logo and previous background color of the website (light blue).

High-Fidelity Wireframes

I made high-fidelity wireframes based on my low-fidelity ones, incorporating UI elements and imagery. I developed them over several iterations with recommendations from my mentor and the client. My favorite part of this process was seeing everything come together and start to feel like a real website, and also mitigating potential issues with good design practices. This was good for getting the basic structure ironed out, but it needed work to be usable and look more presentable.

User Testing

I made a prototype with the high-fidelity desktop wireframes in Figma. Four participants aged 26-63 tested the clickable prototype in remote usability tests via Zoom. I had each participant share their screen and perform 2 task flows: finding the “glow-in-the-dark drinks” recipe page, and subscribing to the newsletter. I took notes on their behaviors and asked them questions about why they did things in certain ways, e.g. “why did you go through the ‘Recipes’ link rather than click it on the homepage?”

Results:

  • All users were able to complete the task flows with ease
  • All users appreciated the design and layout
  • Users provided helpful feedback regarding design choices, interface improvements, and ideas for new features (shown below)

Affinity Map

With the notes of my observations from user testing I created an affinity map in Miro to easily visualize suggestions and feedback. Interestingly, there were no major or moderate issues and it was mostly just suggestions for improvements. Some users tried to click parts of the prototype that weren’t functional, which I imagine happens frequently in user testing. Click here to view the Miro board larger.

Final Result

After incorporating some suggestions and an iteration of final polishing, the client and I were happy with what we ended up with. Click here for the Figma prototype (desktop).

Click here to see the live website.

Potential Next Steps

  • Design a tablet size if needed
  • Perform another usability test with a larger group of participants and device sizes

Conclusion

This was an interesting project to push my boundaries — I have only worked on tech-oriented projects until this. It was great to have a paying client as one of my first UX projects. I learned a lot about setting my own deadlines within the 2-week period and was able to stick to them.

The photos of the recipes are alright, but I’m working with the client to get more professional-looking food photos to align with the users’ desire for beautiful imagery. This will be an ongoing process but the results should look great.

It was very interesting getting the design implemented. I hired a programmer from Fiverr to turn the Figma files into a WordPress theme and provided them with annotations and several rounds of revisions. I think the result turned out pretty great, and the client is getting rave reviews from friends and family. The new site includes features for a newsletter and social media connections, which I am also helping the client to develop. Overall, this was a rewarding project that taught me a lot about all phases of the UX process.