Redesigning and coding PlayfulChef.com

Design process behind-the-scenes

Playful Chef is a cooking set that engages children with fun cooking adventures.

Summary

Challenge

Collaboration

Timeframe

Tools

The “before” shot

Playful Chef’s old home page from 2005 to 2016

Assessment for the old site

  • Lisa kept receiving feedback that her site looked outdated and needed a redesign: her old Wordpress template was from 2005 and was not responsive, flexible, or mobile-friendly.
  • The site, while originally designed for parents and grandparents who shop at Pottery Barn and Williams-Sonoma, did not effectively speak to Playful Chef’s target customers who appreciate teaching life skills and enjoying quality, stylish family time with children.
  • Content was wordy, the color palette was insane, and imagery invoked themes from clipart and clowns.
  • Taglines were confusing and were inconsistently used as links in some (but not all) cases.
  • Certain links and buttons were broken altogether, especially on the “Contact us” page.
  • The site’s search bar did not work properly.
Playful Chef’s broken search bar results
Playful Chef’s old video section

Process

Sample whiteboarding session

Establishing design principles: Color palette and visual aesthetic considerations

“Taste the rainbow:” the official Playful Chef color palette, established in 2005.

I was required to use the existing color palette, shown above, but was also tasked with giving the new site a clean, modern, and sophisticated look and feel. Lisa loved sites like Pottery Barn and Williams-Sonoma because they both target the same clientele as Playful Chef. But as Lisa pointed out, toy companies and eCommerce sites are typically busy and chaotic — the antithesis of a sophisticated, elegant site geared towards the wealthy yoga mom.

Pottery Barn: Aspirational, high-end, safe, and elegant

Pottery Barn’s aesthetic is the antithesis of a playful, rainbow-themed palette. Imagery is clean, elegant, and calm. Fresh flowers, subtle patterns (if any), and classy home environments are quickly apparent when viewing their Instagram account.

Williams-Sonoma: Aspirational, food-centric, and sophisticated

Williams-Sonoma’s aesthetic is highly relevant to Playful Chef since they similarly feature food, cooking, and baking front and center to their high-end customers.

GoldieBlox: Intelligent, inspiring, feminine, and youthful

GoldieBlox strikes a unique balance of youthful, yet inspirational and intelligent. The color palette and overall visual aesthetic are a lot closer to Playful Chef’s existing product line, as well.

Toys R Us: Chaotic and “what not to do”

Toy companies such as Toys R Us (shown here), on the other hand, typically feature a busy, chaotic tone that Lisa identified as “what not to do” for Playful Chef. A quick look on Instagram was all I needed to see to know exactly what to avoid.

To find the right solution for Lisa’s requests while balancing both the color palette constraints and existing product photo assets, I tried lots of color combinations paired with different font families, layouts, and content strategies.

After running lots of ideas past Lisa, I tried using more white space. Instead of using loud background colors with the existing color palette, I placed content and images on top of a white background and only used colors minimally to accent the site, thus satisfying color requirements. The product photos provided were also colorful and busy, which was difficult to effectively feature on any background color except for white with lots of padding.

Wireframes

I used Sketch to start exploring possible layouts.
I was required to use the existing color palette, so played with various color options and discussed with Lisa for her feedback.

More iterations

More color, content, and layout iterations

I used Sketch to explore various layouts and color schemes, to find the solution just right for Lisa’s product line. I shared progress early and often for feedback. The photo is best viewed on desktop, since this shows a plethora of iterations — Thanks!

Product spotlight considerations

On the old site, product photos were crammed into a busy grid that bumped into one another. Each product featured a CTA “Details” button.

Before:

Before — Playful Chef’s old product lineup

Instead of using a grid layout, I divided the products into three groups, gave them clear H1 headers, and lined the products up in one vertical, mobile-friendly column. Thanks to interviews, we knew what the most important product information was, so cut out the rest and only featured the product name, age range, cost, and a link to “lean more” on Mindware’s site, which provides a full product description. I coded the section such that both the images and content would click through to Mindware’s site to view specific product information, without cluttering the site with an individual CTA button per item.

After:

After — The resulting product section, which featured the products in a clean column for viewers to skim before clicking to learn more.

Results

Ideas came to life once we settled on final design plans, content strategy, and color palette.

We launched the new site just in time for the holiday shopping season. Lisa shared the new site with various friends and colleagues at Mindware for additional feedback, and we plan to revisit the site in 2017 to iterate on the first version.

The “after” shot

Ta-Da! Presenting the new responsive PlayfulChef.com, launched as of December 2016.

Please let us know if you have any feedback or questions. Thanks for checking out my work.

Product designer focused on UX/UI and user research (he/him) claytonhopkins.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store