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

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.

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.

Establishing design principles: Color palette and visual aesthetic considerations

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

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

GoldieBlox: Intelligent, inspiring, feminine, and youthful

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

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.

More iterations

More color, content, and layout iterations

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:

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:

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.

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:

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