Spoonful

Web Design

ROLE —

Concept Development

User Research

Website Design

UI/UX

Branding

DELIVERABLES —

Brand Identity

Responsive Website

Design System

TIMELINE —

Nov — Dec 2021

OVERVIEW —

Spoonful is a cooking platform that is unlike a lot of modern recipe websites. There are a ton of competitors that have quality content, but also serve up that content in a format that is less than appetizing. Most recipe sites are plagued with invasive ads and even worse are written in blog format. Most of the time users do not want to read a long-winded story about your grandmothers Crawfish Etouffee, they really just want to get to the meat and potatoes.

‍

PROBLEM —

Competiting platforms are slow, hard to navigate, long-winded, and full of ads. When the mood strikes and you are looking for a new recipe to try or maybe even want some inspiration in the kitchen, it can be hard to find an all-in-one resource for everything you need to make a great meal.

‍

GOAL —

Create an easy to use platform that hosts recipes, tutorial videos, buying guides, best practices, & more with minimal fluff so the user can quickly navigate the site and find featured recipes to cook and save for later.

No items found.

Discovery

— 01/04

I conducted several user interviews about their experience using competitors websites, and came away with users running into the same pain points no matter which site they were using. They all complained of the long form nature of a lot of these recipe sites and wished more of them were more straightforward. Some newer home cooks or users with less experience in the kitchen wanted access to more 'how-to' videos. A lot of these websites will gloss over basic cooking terms, and it's important to have an option for new cooks to be brought up to speed. Based on this feedback, I sketched out several rounds of wireframes until I pieced together what I felt users would find would be both visually appealing and the most helpful for their needs. After conducting a quick round of usability studies, I made tweaks and began development on my hi-fi prototype.

No items found.

Creation

— 02/04

For my color scheme, I tried a few options but choice orange and navy blue as my primary and secondary site colors, along with an off-white cream color. The orange color is warm and inviting, like a delicious curry sauce from your favorite Thai place. The dark navy and the off-white complement the orange nicely, making the whole site feel cohesive. I built the site interface top-down, choosing to start with the largest screen and optimizing for mobile later on. These websites tend to be very content heavy, so I wanted to make sure the largest screen size would be accounted for first. After completing some prototypes, I did another round of usability studies to check if anything needed adjustment. Users wanted an easier way to search, so I added a dropdown search bar in my final version of the site. After more polishing, the final design was ready to launch.

No items found.

Deliverables

— 03/04

Final assets included the website branding and style guides and the Adobe XD file for code handoff.

No items found.

Reflection

— 04/04

This was another fun project because I had to imagine how this website would scale over time. The original goal was just a way for people to look up new recipes in a quicker and easier to digest way, but after more and more user interviews it was clear the website could add a ton of features beyond this to make it even more of a one-stop-shop. Obviously, we did not want feature creep to impact deadlines so we paired down to only the most valuable features with the ability to easily add new features later on. This was also one of my first major projects to use Adobe XD. I've done some stuff here and there, but never a project at this scale. I'm a daily Figma user, so getting to get intimately familiar with all of differences between Figma and XD was a really valuable experience.

Up Next

Branding

Branding

Apparel Design

Back to portfolio