The Clean Table
TOOLS
Competitive analysis, Wireframes, Mood boards, Style guides, Hi-Fi prototyping, Squarespace, Figma
SYNOPSIS
Executed the design process to achieve ease of action for visitors. Provide comprehensive service information and blog pages for nutrition, wellness, and recipe posts that can be posted at ease by the owner
TIMELINE
2 week sprint
ROLE
Sole UX Researcher and UI Designer
Work passed over by graphic designer
THE CONTEXT
The Clean Table was started by Jordan, a passionate nutritionist that offers many services to her clients in the form of private cooking classes, 1-3 month wellness journeys, as well as meal prep grocery list help. She's grown her client base a bit and was looking to build a website to keep growing and give potential clients a way to both see her services, get some initial tips and reach out for a consultation.
I was tasked with first assessing The Clean Table's priorities in the website. I then went into competitive research to understand both what Jordan's aesthetic leaned toward as well as the best practices for blogs and recipes in the space. Afterwards, I began ideating and designing a website that both address the hierarchy of, and serve those priorities. I continued to iterate after 2 sessions of feedback and landed on our final design that went live!
THE TASK & APPROACH
Deliciously Ella, Love & Lemons, and Nourished Freedom have a focus on recipes, blog posts, and services. They follow a traditional "contact us" and "about us" page style and they each make it easy for users to either find what they're looking for or contact for a consultation. These pieces allowed Jordan and I to work to create a hierarchy for her website:
-
Services available
-
Blog post category & feature on home page
-
Consultation bookings
-
About us page
IDEATION & DESIGN
After creating our hierarchy list, I moved into low fidelity design. I worked on creating the framework for each page with annotations to communicate how the hierarchy was incorporated into the low-fidelity wireframes.
FEEDBACK
I shared the low fidelity work with Jordan and heard all great things! She felt like the hierarchy was clear throughout the experience and was excited to see how this transformed into high fidelity.
MOODBOARD & STYLE GUIDE
Before we could move into high fidelity, I put together a mood board and style guide based off of both Jordan's aesthetic description and design work passed over by a graphic designer that worked on The Clean Table logo and social media look & feel. The color palette and font styles pictured to the left needed a bit of adjustment for web readability.
Working from this, I created the below mood board, type ramp, and color palette. The mood board includes some of Jordan's own work as well as photos curated from Pinterest.
HIGH FIDELITY & FEEDBACK
I then started moving into Squarespace. I chose Squarespace for Jordan because she wanted to be able to manage a blog style website easily and Squarespace provides a very user friendly interface to post and add content for those not experienced with a site building platform. I knew Jordan wouldn't be hit with a huge learning curve with this website hosting platform.
Following the flow of the wireframes, I brought in components that match the low fidelity framework to build the site. I was also able to add some flare pieces that Squarespace offers.
After this initial build, I presented to Jordan. She had some initial feedback for me around photo content on the home screen and some updates in her service offerings. There were two photos she wanted to try on the home page, so I created both options and presented again!
We reviewed the options and went with the option on the left. And with that - we were almost done, the final touch, adding the official logo!
Take a look at the final product, or go browse yourself!
COMPETITIVE RESEARCH
When first chatting with Jordan about her website, she had one favorite: Brocc your body
There were a few notable parts of this website: the color palette, the fun, and the movement achieved with videos.
I then did some digging on other nutrition and wellness blogs.
FINAL THOUGHTS
Working with The Clean Table was such a pleasure! I had so much fun creating this website. I'm consistently providing assistance in getting acclimated with Squarespace if there's ever a need for content changes across the site.
Notes for the future:
-
The introductory plan didn't provide custom CSS & HTML adjustments, and Squarespace doesn't offer a pre-developed filter interaction. If upgraded, I would opt to add in filters for the blog pages. That way, the blog posts could be sorted through for easy searching by The Clean Table audience.
If you're still here - Thank you! I hope you had as much fun reading as I did working on this website! If you're interested in working with me - feel free to reach out at the email below.
