Chex Mix

A Wordpress website with product specific patterns and a simplified authoring experience.
View Chex Mix.

Task

  • Build a performant, appealing, and accessible website
  • Enable product unique patterns
  • Create a simplified authoring experience

Tech

  • Wordpress
  • PHP
  • HTML/CSS

The Chex Mix project started as a revamp to the previous version of the site. After seeing the existing code base from the previous external agency, I decided a fresh start was best. The next steps involved a fresh redesign of the website. The design focused on patterns created from Chex Mix pieces. Product packaging was used to introduce color throughout the site. I built the website using our team's custom Wordpress theme and then extended it to meet the criteria for the clients. A lot of the heavy lifting was done to give website authors a simplified experience when authoring the site. Advanced Custom Fields was used to build custom partials and product templates for the smooth authoring experience. The colored pattern was created using css backgrounds and color blending techniques. This allowed one pattern asset to be used, saving on page load times. Another unique piece of the Chex website was handling nutrition information for multi-pack products. I created a module where authors could select multiple authored products and the site would display them as a drop down. The selected product would display it’s nutritional information and color scheme. I’m happy with how these customizations turned out and think the completed website met all the goals for the project.

Homepage of Chex Mix website

Product detail page of Chex Mix website

Product listing page of Chex Mix website