CharBroil Website Redesign
Designed at Launch Interactive LLC.
One of the projects I am most proud of is the redesign of the CharBroil website. I was put on this project to only do the Discovery phase, but I worked so diligently with the research and presentation that leadership decided they wanted to keep me as the UX Designer for the remainder of the project.
Process
We started out the Discovery phase by going through CharBroil’s existing internal employee interview notes as well as Google Analytics and Clicktale data of the existing website. We then continued with a UX audit of the existing website to find opportunity areas where we could really improve the user experience. One of our primary pain points that the client was dealing with at the time, was that majority of users did not know where to go to find parts for their grill. We performed competitive audits looking at 5 of CharBroil’s closest competitors' websites and then took it one step further with looking at retail partner websites like Lowes and HomeDepot to see how not just CharBroil was represented on their websites, but other brands as well.
A slide from the UX audit of the old website.
Updated sitemap
After going to CharBroil’s headquarters to present our findings we dove into the Create phase. First, creating a sitemap and then focusing on the navigation. The navigation is where we decided to really focus on making it clear where to find parts for your grill. I then created high fidelity wireframes using a mobile first approach in Sketch and collaborated with the visual designer to bring it all to life. I annotated the wireframes by working closely with the developers as well as supported the visual team on scroll animations to create an immersive yet simple experience for the user. Utilizing these animations helped control where the users attention was going as they scrolled down the page.
Desktop product detail page with annotations
Desktop recipe listing page with annotations
Mobile recipe listing page with annotations
Results
The redesigned CharBroil website has won 10 (and counting) awards including American Advertising Awards, Hermes Creative Awards, Muse Creative Awards & Dot Comm Awards (see specific awards below). The relationship we formed with the client was amazing and they were so excited about their new website. Users now know exactly where to go to find parts for their grill and find delicious recipes to try at home.
Mobile product detail page features
Mobile Grillfinder quiz
Mobile featured products on home page
Final redesign of the desktop product detail page.
Silver in User Experience
&
Bronze in Consumer Website Responsive Design Interface & Navigation
Platinum in Electronic Media / Social Media / Interactive Media | Website Overall | 96. Business to Consumer
Gold in E-commerce Website
&
Silver in Best UX
Gold in Website Design
&
Platinum in B2C Website