Masterbuilt is a 30-plus year industry leading manufacturer of Smokers, Grills and other cooking appliances. When I joined the development team as UI/UX designer in 2015, my first big project was to design a new website for the company. I got the opportunity to immerse myself in the company and culture with a product cycle that included user research, ideation sessions, personas, user flows, interactive wireframes, animation prototypes and visual design. We successfully launched the MVP website and I continued to iterate and build on the design in the months that followed.
2017: The Rebrand
In 2017, the company began a rebranding process, and my role was to revise the brand application on the website. The brand's new tagline was "Master It" and I believed that this mantra needed to be reflected in the ease of the user experience. The UI needed to be updated, but some flow and functionality needed to be improved as well.
Since this project was not a ground up rebuild, and our time frame was limited, I decided to lean on some of the great research and design assets from the 2015 project as a starting point.
My goal in this phase was to analyze new data to determine new pain points in the web flow.
To identify pain points, I sought help from our customer service team and compiled the most common complaints they received about our web experience. One of the resounding points was that consumers were constantly asking for tech specs, resources and information they were not able to find on our website.
I realized we needed to improve the site by designing a more robust, content-rich product detail page.
I started working on revising the site flow to accommodate the new features. The new product pages needed to have maximum visibility so I added new navigation paths to the product flow.
At this point, I needed to know what content the user was looking for. By researching sites like Amazon, and tapping in to the knowledge from our marketing and customer support teams, I came up with a map of the content that needed to be displayed to the user on each product page.
In discussing the content requirements with the marketing team (they would be creating most of it), we realized that not all products would fit the new content model. Either we wouldn't be able to create content for some products, or others, such as accessories, did not require as robust an offering. We decided on both a basic and enhanced version of the new product page.
For the portions of the site that were changing only slightly, I went into the interactive wireframes and made tweaks to navigation and pseudo content.
For the new features, I chose to create the wireframes separately in Sketch. I was just beginning to explore the tool at the time and used this as another opportunity to practice. I quickly fleshed out a couple of approaches to the new pages.
The new product page templates were finalized and presented to stakeholders. The new design was approved and I could move on to the user interface.
After digesting a near final version of the new style guide, I knew I needed to aim for a very simple visual style. The new art direction centered around authentic hero imagery, crisp iconography and bold typography. Using tools like Pinterest and physical bulletin boards, I made moodboards to pull together inspiration for the user interface. I found and studied reference sites such as maiyet.com and samsung.com which at the time shared a similar brand style. After approval on this direction, it was on to the visuals.
At this point the visual direction was established - simple layouts, bold and crisp type, authentic imagery - so I began by mocking up the homepage, a layout from the Recipes section and a utility sub-page. On the homepage, I chose a very straight forward layout, combining heroes and banners with big type to display clear calls-to-action and easily guide the user to their goals. For subpages, I went with typographic layouts with treated graphics, forms and calls-to-action interspersed. The recipe section, which was a very popular area for us, got a nice gridded layout flow.
I pitched the new look and after a couple rounds of revisions, I received approval.
Using Photoshop I designed comps for 10 art-directed pages and 16 subpages. The art-directed pages were completed in 4 device views from large desktop to phone, and the sub-pages in desktop and phone variations.
Since the layout was very clean and simple, I wanted to add a layer of depth in the UI with nice transitions and interactions. I prototyped animations using AfterEffects. The animations were choreographed to be smooth but responsive, to give the user the feeling of effortless transitions and interactions without any sluggishness.
After discussing with the internal engineers, I provided design spec in three ways: 1) I added notes on functionality, states and basic interactions in Notes panel inside the PSD and 2) I separated details on more complex interactions and animations into a separate document and 3) I provided code snippets and animation samples.
I prepared assets in 1x and 2x resolution depth to account for both normal and retina displays. Images were then run through an optimizer to minimize file size. SVG's were also optimized and prepped for inline and/or external use.
Results & Learnings
In early 2018, after a few rounds of internal QA and testing, our team rolled out the new, improved website concurrent with our brand reveal. The look and feel matched our new brand, but more importantly by monitoring analytics we saw that the redesigned features were making a positive impact.
We saw a significant improvement in the performance of our product pages. The data showed huge growth across many of our metrics including users +8%, pageviews +33%, bounce rate -35%.