Overview

Food Art with Kids was my first paid UX design project. The assignment was to design an experience for web and mobile. The client runs a website with about one hundred fun, healthy recipes designed to help parents cook with their kids and have fun doing it. 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 was a design constraint, but I helped implement the design with an engineer after the design phase. We had 2 weeks to complete this assignment, which was a tough constraint considering a full redesign and logo/branding. I was able to finish in time with two extra days to relax!

The problem: The design appeared dated and was not as user-friendly as it could be. Users need an easy, elegant way to navigate the website in order to find recipes they want to make.

Specifications

  • Project duration: 2 weeks
  • Team or individual project: Individual for all design, then worked with an engineer for implementation
  • Platform: Mobile and desktop
  • Tools used:
    • Figma
    • Adobe Illustrator
    • Adobe Photoshop
    • Miro
    • Whimsical (flowchart program)
    • Google Docs

My Roles

  • UX Researcher
  • UX Designer
  • UI 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
  • Functioning website

Project Roadmap

  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
  4. Implement the design with an engineer

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.

Overall, the websites had different strengths and weaknesses. Common themes were colorful visuals, relatively clean interfaces, and long-winded introductions on recipe pages.

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 methods

  • Individual interviews, conducted remotely
  • I scheduled interviews with four 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:

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

Key findings, on the homepage:

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

Key findings, on the recipe page:

  • All four participants prefer a short snippet of recipe background but “not the author’s life story”
  • Three participants mentioned that they want the recipes to be clear and easy to read with not too many ingredients
  • Two participants like that some sites provide similar recipes at the end of the article
  • Two 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.

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.

The Busy Recipe-Seeker

Goals/Needs:

  • Simple, clean interface to easily find information
  • Affordable, fun recipes that can be made alone or with the family
  • Enjoys some background on the recipe page, but not too much

Frustrations/Fears:

  • Prefers quick recipes with not too many ingredients to minimize cost and trips to the store
  • Not looking for gratuitous ads or product placements, especially averse to pop-ups

User Flow

I made a user flow based on how my research participants use recipe sites. My goal was to keep this simple while showing the main ways that people could find recipes on the website.

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.

Logo Design

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 four dishes that involve food arranged in an artful way:

Style Tile

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 more usable and 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 two 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, it was mostly just suggestions for improvements. Some users tried to click parts of the prototype that weren’t functional, which was good to note for future prototyping.

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 to see the live website.

Potential Next Steps

  • Analyze and monitor metrics (I implemented Google Analytics, but the client has additional work to perform on their end before this would be useful — more on that below)
  • Perform another usability test with a larger group of participants and device sizes
  • Design a tablet size if needed

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 recipe photos 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. The client will also need to add recipe cooking time estimates and serving sizes to each recipe which will take some time.

It was very interesting getting the design implemented. I hired an engineer from Fiverr to turn the Figma files into a WordPress theme. I provided them with annotations and we did 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, including implementation.