Redesigning and coding PlayfulChef.com

Design process behind-the-scenes

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

Summary

I had the pleasure of working with Playful Chef founder, Lisa Ligon, to redesign and code her website, PlayfulChef.com. Here is a behind-the-scenes view of my design process.

Challenge

Lisa created a cooking set for children ages 3 to 6 in 2005 and licensed the intellectual property rights in 2013 to a subsidiary of Berkshire Hathaway called Mindware. After the acquisition, she still owned the URL “PlayfulChef.com” and had incentives to direct people to Mindware’s eCommerce site. Her old website was hosted on Wordpress and used an outdated and non-responsive template from 2005. She wanted to rejuvenate her site with something modern and motivating to help parents and grandparents shop for the cooking set for their children and grandchildren on Mindware.

Collaboration

I partnered directly with Lisa Ligon to assess her old site and redesign the new site. I was the solo designer and coder on the project. Lisa approved creative direction, made final visual design decisions, and reviewed content with Mindware’s legal team.

Timeframe

October to December 2016. I made minor iterations in early 2017.

Tools

I utilized whiteboarding and the Sketch App for ideating and wireframing. I then used vanilla HTML5 and CSS to code the site, which is hosted on Lisa’s existing GoDaddy account.

The “before” shot

Image for post
Image for post
Playful Chef’s old home page from 2005 to 2016

Assessment for the old site

The old site was busy, outdated, and non-responsive, among other issues:

  • 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.
Image for post
Image for post
Playful Chef’s broken search bar results
Image for post
Image for post
Playful Chef’s old video section

Process

We kicked off the redesign effort by discussing Lisa’s business goals, business constraints, key personas, tone, aspirations, and Lisa’s vision for her future site. We whiteboarded ideas together, talked about other sites that we liked (and did not like), and collaborated on Google Docs to work on site hierarchy and content.

Image for post
Image for post
Sample whiteboarding session

Establishing design principles: Color palette and visual aesthetic considerations

Image for post
Image for post
“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

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
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”

Image for post
Image for post
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

Once we made progress on content, personas, and business goals, I transitioned to the solution space by recommending various wireframes and ideas to review with Lisa. Providing higher fidelity mockups helped Lisa assess whether or not ideas were on track. I tried to share progress early and often for feedback to avoid burning time going down the wrong path.

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

More iterations

Image for post
Image for post

More color, content, and layout iterations

Image for post
Image for post
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

In addition to telling her story, Lisa wanted the site to do a better job featuring the products. We established “call to action” priorities and wanted to do a better job spotlighting the products themselves.

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:

Image for post
Image for post
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:

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

Results

In December 2016, Lisa and I received approvals from Mindware’s legal team to move forward with coding the site. We secured final image assets from Mindware, finished compiling all final content, and I coded the site using vanilla HTML5 and CSS.

Image for post
Image for post
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

Presenting the new and improved Playful Chef landing page:

Image for post
Image for post
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