MES 400 Series

Product Experience

The Problem

Masterbuilt was launching a new smoker with ground-breaking technology. I was tasked with creating a simple web experience to educate consumers on the technology and help drive online conversions.

My Role

My role on this project was as deign lead responsible for planning the UX and delivering visual design. This web experience would pull together video and photography from the internal media team, and it was my job to bring it all together.

Understanding the Product

I knew that to accurately explain the new technology to consumers, I needed to understand it myself. I was able to meet with the lead designer behind the product who understood the ins-and-outs of its functionality. The product was not yet in production, but I had the opportunity to see and interact with a sample. I gained great insight on what functionality was key and the "why" behind the biggest design improvements.

MES 400 - Technical Drawing

Brainstorm

Armed with the insight from the product design team, I met with the Marketing team to learn their value prop and strategy for the product. In this meeting, we determined that an experience page was the right approach for telling the product's story. I was able to whiteboard a rough page flow and get a preliminary idea of how the content needed to be presented.

Whiteboards from brainstorm session

Challenges

Project Delay

Early on in the project cycle, we came upon some delays in the product's launch timeline. Our original deadline for the page launch had been set right before the end-of-year holidays, and with the changes we realized we would miss the dates. We needed to be able to work with the long break in the middle of the project without losing more time after returning in the new year.

Modified Timeline

I proposed an adjusted project timeline that included a break between lo-fi and hi-fi design. I pitched a schedule where I would hand off wireframes with detailed layout and functionality annotations to the development team. Using this they could begin laying out a rough version of the page without visual design elements.

Adjusted project timeline

Wireframes

I turned the whiteboard concepts from earlier brainstorm sessions into Sketch wireframes and added notations for layout and some interactions. I delivered the document to the development team along with a quick handoff meeting. We would normally do a handoff meeting for visual design, however since they were starting coding with the early layout, we wanted to make sure there was clarity at that stage.

Wireframes

Assets

We returned to the project in the new year and got to work on making the page as rich with educational assets as possible. I helped brainstorm and contributed on set during the creation of these assets. We created a 3D demo video, feature sizzle and recipe videos. I also coordinated with our engineers to produce a 3D product tour that would be embedded on the page.

Visual Design

After some research I settled on an artistic direction that fit the product's theme. I used the brand's burnt orange as a highlight color to call out the glow of the top broiling element. I integrated render stills from a product demo video as well as photography into my mockups.

Page Comps

Handoff

I delivered the design comps along with documentation on interactions and transitions to the development team. We kept an open channel of communication, continuously talking through the design as the page was coded. We even made compromises together as we ran into small issues e.g. one of the animations was too complex to implement without delaying the project and I made the call to table the idea in order to make sure we hit our deadline.

Learnings

The challenges faced on this project taught our entire team about staying focused on the end goal. Numerous times we had to change course, but in the end we succeeded in launching a small feature to help our users understand some of Masterbuilt's most exciting technology yet.