Dynojet Research, Inc. is the world leader in the development and manufacturing of performance enhancement products for the Powersports industry. To increase its presence in the e-commerce arena and create a unified customer experience, I worked with Dynojet to redesign and centralize all of its five diverse product website properties under one roof, driven by a robust, redesigned e-commerce system.
Product Manager / UX Designer
Over the years, the process for creating a website would be very reactionary, without following any specific process and product managers wanting each product line under a new domain. That eventually led to a disjointed approach, which produced, at one point, a total of 10 different websites with very little interconnectivity and, at times, little consistency. This approach not only created a website maintenance nightmare but kept accumulating user experience debt.
The goal of the new website redesign was to take a different approach, first, by establishing a UX process that we would follow, second, by making sure key stakeholders understood the importance and benefits of adhering to it.
Before the project kick-off, I put together a UX Design process so that everyone involved in the project could understand, in detail, all the steps involved in each phase. A high-level diagram of this process is shown below. Each step on each phase was further broken down and explained so that everyone involved in the project could reference it, throughout the duration of the project and afterward. Additionally, before this project, all departments kept track of documentation and project plans in silos, that made cross-department collaboration a hassle. To smooth collaboration between departments and keep better track of this and other projects, I set up Confluence and Jira, as a result, this improved the collaboration process between all departments dramatically.
Based on past market and sales user research data, internal collection of user data, user surveys, product registration information, and web analytics (CubeYou, Google Analytics, Similar Web), the following User Personas were put together based on real users (names and photos have been changed).
There were a total of three Personas. These customers ride anything from Harley-Davidsons, Sportbikes, Dirtbikes, to UTV / ATVs and can generally be placed under two segments Trail (Off-Road) vs. Road (Street). One other category is diagnostics equipment consumers. While these customers might also be Powersports enthusiasts, they’re usually more interested in getting the best return on investment from the Dynamometer products they buy so they can generate income. Across the product lines, they all expressed similar desires and frustrations as it relates to the website experience.
One of the first things on the list after defining the problem and conducting user research was to draft out a thorough content strategy with the goal of drafting out a solid content plan. Unsurprisingly, this led to several key findings: product, vehicle, and customer data lacked integrity. Also, branding wasn’t consistent across all of the website properties, product packaging, product software, and mobile apps. Moreover, because many departments worked in silos, we had a ton of critical data that needed to be consolidated. The solution was to embark on a massive data cleanup process.
The content strategy included the following:
The content audit and content inventory allowed me to draft the first version of the new site’s information architecture, shown below. This gave me a good idea of how the critical features/pages needed to be integrated with the wireframes.
I used Sketch to draft out the first wireframe iteration. I set up Invision to collaborate with stakeholders and gather any feedback. In addition, I set up the Invision Design System Manager to store design system assets. It was our very first time setting up a Design System so some stakeholders needed to be convinced and informed of the benefits of having one for the company.
Emphasize the vehicle selector, and show the latest product for each main category – Off-Road, Street and Dynamometers.
The menu structure closely reflects what was drafted on the IA and breaks down all products into respective categories which can be expanded as the product line grows. This also provides the customer with a clear idea of what the products are used for.
There is also a search option should the user want to quickly look for a specific product.
This product category page takes into account a core user need: the ability to filter Maps / Tunes quickly via the layered navigation to improve findability. Adding a Map / Tune search feature and testing its effectiveness would be the next feature.
The user can easily see their selected and even add their vehicles to their garage. Because the vehicle selector is omnipresent, making a new selection is rather a quick process.
The list layout proved much more effective than the grid layout.
On this product category page, a user can see all the products that fit his/her vehicle right away. Typically the number of products don’t exceed 15. For that reason, the grid layout is set to display 15 product by default. The user can then narrow down their search by product attribute using the layered navigation on the left.
Because some of these products offer customization options or the ability to select another product variant, there is no feature to add a product to the cart on this page. We need the user to continue reading about the product on the product details page and customize his/her product or bundle his/her product with other accessories.
This shows the layout for a simple variant product (one with no customizations or bundle options).
The goal with this product details page was to highlight some key features the users expressed a desire for – ability to confirm vehicle fitting to a product, ability see detail description of the product, as well as any related any downloads or warnings associated with each product.
To not distract the user from any purchasing intent, the “You Might Like” products are displayed at the bottom of the page after the Product Details.
Because of the sheer amount of UX and technological debt accumulated through the years, this project proved very challenging. This project allowed me to wear many hats, including that of a developer at times, so that made it a challenge to give certain aspects of the UX process the attention I felt was needed, especially user testing.
While I made good strides establishing a UX process for the organization and applying it to this project as well as gaining support from upper management, there is quite a bit of work that needs to be done to reap all the benefits from the proper practice of UX design. UXD to this organization is still very new; it’s not yet organizational it’s departmental. UXD needs to be holistic and applied across the product line, not just to certain digital goods. Ultimately, creating products that users truly enjoy and want bodes well for the bottom line.
Don Norman said it well:
“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences. Think through all of the stages of a product or service – from initial intentions through final reflections, from first usage to help, service, and maintenance. Make them all work together seamlessly.”