A design leader with an expertise in leading design and research teams while creating data-informed, human-centered experiences that businesses and brands leverage to connect, expand, and maintain valuable customer relationships.
pano@1x-2.jpg

Built to keep you and your vehicle up and running.

Total Power Parts: Art direction, Interaction, UI and Visual Design. (2017)

tpp_pano@1x.jpg

At a glance

With over four decades of global distribution in powersports electrical components Total Power Parts (TPP) re-launched with a fresh new look. Along with it came a new customer service guarantee and pioneering features and functionality of their ecommerce presence.


Audience

Many riders have been involved in powersports for decades. Trust is a key requirement (fitment, quality, shipping). They want to purchase from those who are passionate about powersports and are riders themselves. The three core users and their primary needs were categorized as Racer (expertise and performance), Working Man (value and durability) and Weekend Warrior (quality and knowledge.)


Challenge & opportunity

Some of the biggest design hurdles were going to be usability for all user-types, accessibility while on-the-go, a clear site architecture and crafting multiple paths to purchase.

While researching it was discovered that over half of these riders own multiple vehicles, but no one online has catered well to all of the primary vehicle types. There, the opportunity was established. Build an experience to support the multiple vehicle owner and the variety of rider and online user types.


My involvement

I was tasked primarily with the planning and execution of the user interface and visual design, but like many project teams I was able to support and contribute on many levels:

  • Competitive, design & customer research

  • UX/UI design

  • Customer journey prototyping

  • Art direction

  • Visual design

  • Digital style guide

 
tpp_pano-process.jpg
 

Inspiration for function and form.

Following an intense discovery, I started the elaboration process with a visual mood board. I have found this to be the best approach for brand distinction and identifying functionality, elements and interactions best suited for the users. After all, the product had to cater to a variety of demographics and riding applications. 

 
 
tpp-home-1.jpg
 

A toolbox and parts store all in one.

This homepage doesn't mess around. The only thing more frustrating than a "parked" machine is not finding the part you need to fix it. With several forms of navigation—search, menu, part finder, vehicle-specific compartments—it allows any user the ability to more easily "get in and get out," setting the tone for the rest of the customer journey.

 
 
tpp-mobile-screens-1.jpg
 

User-centric design.

Designing for the user instead of the device allowed for a smooth transition from desktop to mobile screens.

 
 
 
tpp-pf-search-results.jpg
 

Find the right part, and fast.

More than a few part finders we found had their fair share of issues: desktop-only, too many form fields, hidden steps or didn't exist at all. Placing this 4-step part finder globally at the top of the page meant users could expect to see and interact with it regardless of what page they may have landed on.

 
 
 
tpp-feature-2.jpg
 
 

One hard-working product page.

Paid media is a large part of their traffic, so understanding the multiple points of entry would go a long way in the design. Of course product content is important, but easily accessible site tools and highly visible purchase options were crucial features in building the experience of this page.

tpp-pdp-1.jpg
 
 
tpp-mygarage-1.jpg
 

Your garage is now online.

One of the most distinct features of the site is the ability to enter and save vehicle information as well as turning off products that do not apply to the vehicle you are shopping for. Enter your vehicle, find part, go.

 
vehicle icons@2x.png
uvp-icons.png
ecomm icons.png

Rounding out the experience.

I built a custom icon set and as a collaborative effort, helped define art direction and a messaging framework used in the execution of imagery and other visual assets. Hard-working, experiential, quick and honest.

 
 
 
1-UVP pre-footer images.jpg
 
2-UVP pre-footer images.jpg
 
3-UVP pre-footer images.jpg
 
 

Takeaways

Through rigorous planning and design we launched a product that strongly encourages the multiple vehicle owner. It supports several ways to navigate, purchase and includes one incredibly complex (on the back-end) part finder. All for the one-stop-shop maintenance of any riders vehicle.

This certainly did not come without it's challenges. Having a greater understanding of the technology, data and information that would live on the site could have potentially resulted in more MVP functionality. While some technical obstacles forced us to scale back for initial launch, Total Power Parts has still helped many riders stay up and running, increase performance and enjoy more time with the vehicles (toys) they love.