In 2018, Masterbuilt Mfg. merged with Kamado Joe, and as the former's in-house UX Designer, I was tasked with redesigning Kamado Joe's website. The site, which was eCommerce focused, was not optimized for conversions and was riddled with usability issues. The brand was preparing for the launch of a new series of grills and I was given a quick timeline to complete the project.
I executed an accelerated research plan to uncover the underlying issues and learn about the users' needs. The research revealed that we were not accurately prioritizing the content that influenced the users' purchase decisions. With these insights I designed some key pages with strategically selected content and components which reflected the users' priorities.
I was unable to see the design through to full implementation, however my testing of the prototype revealed a vast improvement of the user experience. From my business stakeholders' perspective, the design successfully addressed the issues that resulted in a sub-par conversion rate.
Full Project Story
01Setting the Stage
An important part in every project is clear communication of expectations and outcomes. So at the beginning of this project I met with our 2 front-end developers, project manager and product owner to discuss timelines, deliverables, and how we could work together to make sure our team was optimizing the balance of the design and development process to successfully complete the project in the time allotted.
...Cut once. The old adage rings true when it comes to product design. This project needed a quick turnaround, but I understood how important research would be to making sure the problem was properly addressed. To get on the right track, I needed to perform some secondary research to understand the problem space and brand. I connected with some of my new counterparts in Marketing to gather market research, access analytics and start getting acclimated with the Kamado Joe brand book.
03Unearthing the Problem
I then began performing some generative research to clarify the problem we were seeking to solve. From my earlier exploration into the existing website's metrics, I started to see patterns of a product flow that was not properly guiding users to the point of purchase. Additionally, a usability audit showed the site's goal was unfocused (it had been split into a brand site and a shop module on separate domains) and that there were multiple points of friction or outright dead-ends in the navigation.
Once the flow issues started to crystallize, two things became more apparent. Firstly, that users were not finding the content they needed to help them make purchase decisions and secondly that the website was not organized in a way to lead them effortlessly through their research and education process. I performed stakeholder interviews and from these sessions tapped into stakeholders' knowledge on KJ consumers. I learned that users primarily shopped according to series of grills, a concept that was not well accounted for in the existing site's navigation.
Now that I was starting to better understand the audience in general terms, I needed to drill down on their needs and pain points. I performed user interviews and gained insight into their experience. Most confirmed the navigation issues on the site and felt that the product information provided was inadequate. While I conducted my research, my counterparts were busy at work getting up to speed on the new brand and digging deep to understand the space. As a part of that, they initiated some consumer research through an external vendor. Some initial findings came in and I was furnished with this data by one of my colleagues. This was a key development as we had just established that the user was not seeing the information they needed, but we had not been able to clearly define what it was that they were looking for in the first place. This incoming data was a comprehensive view into their priorities and what influenced their purchase decisions. The report was a thorough outline of what content the consumer cared about most. This gave me a clear reference on how the product education on the website needed to be prioritized and I took these insights into the next phase.
06Clearing a Path
Now that it was clear which content the user wanted to see and at which points in their journey, I looked at optimizing the navigation to better facilitate content discovery. After doing some research into some of the common navigation patterns in similar spaces, I landed on an approach to a new menu for both mobile and desktop platforms. On mobile, I wanted to focus the experience with a full screen menu panel that displayed the most utilized navigation options. There would also be a persistent search button that would expand to full screen when triggered. This would simplify the user's process of initiating tasks and reduce cognitive load. On desktop, I placed most of the focus around the four main product categories, using large dropdowns with products organized by series. I then placed links for tasks like finding support or locating dealers in a utility nav bar. This approach would place emphasis on the shopping experience and also allow the users to easily differentiate the grill series.
07Keeping it Crude
With less than a couple of weeks left for page design, I looked at methods of building out the rough page concepts that would be easily iterable but defined enough to present and receive feedback from stakeholders. At this point, even wireframes were too sophisticated to invest much time into. There were 12 main pages, and we did not have the time to to commit to wireframing all of them. I did some research and found that Content Mapping would be ideal for this application. I essentially would outline crude maps of each page containing the types of content that would be highlighted, the order of that content and the components that would be used to display the content. This worked like a charm and was very easy to present, get feedback and quickly iterate.
08Taking the Reigns
Now that the pages had been clearly outlined and we were certain of the content and components, I could now jump directly to mockups as my layout stage. To begin this, I took the brand's existing style elements and started exploring some new applications for the web. Then, using the new homepage as a template, I started mocking up a new visual style. I then presented this to our CMO and received great feedback on the direction. With the visual style approved, I started building out styles for some additional global components such as call-to-action heroes, banners, tooltips, modals and more. I then started detailing the states of the components such as buttons, form elements, tabbed containers etc. Having laid out a basic library of design elements, I built out the remaining pages.
09Weighing the Difference
I was not able to see the full implementation of this project, however, I received very positive feedback on the design prototype. Users responded well to the curated content, simplified navigation and optimized mobile layouts. Stakeholders were excited by the organization of products and updated web visuals. However, if I had the opportunity to see the project through to completion, I would be looking at the results of metrics and click tracking to gauge success. Are bounce rates decreased? Are users spending time on the right pages? And most importantly, have conversions increased? The answers to these questions would determine whether it was the right solution.