Scroll

Product Designer – Francesca Wilder

slide alt

NAPA's Prolink platform helps B2B auto shops find the tools they need for inventory fulfillment and management solutions.

Comprehensive B2B platforms are the leading standard for providing exceptional customer service, increased sales, and an overall customer centric experience. I was a part of an ambitious project to help revamp and redesign NAPA’s ProLink B2B platform for its existing and new customers.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of NAPA.

My Role

UI/UX Designer – Information Architecture, wireframes, research, visual design.

Team

Scott Mail, UX Director

Sean Madden, Senior UX Designer

Valerie M., Senior UX Designer

Jonmarc Stevens, Senior UX Designer

The Challenge

Revamping the NAPA Prolink platform 

Our goal for Prolink was to redesign an already existing platform, but was outdated in responsive behavior, visual design, and needed a more UX design lens perspective. The original site had not been updated for at least 10 years. The stakeholders were looking to instill UX guidelines to help create a strong foundation for a rapidly growing user base. 

Our high level goals were to:

  1. Create an up to date platform for Prolink’s large and diverse demographic.
  2. Responsive behavior for use on all digital platforms.  
  3. Design a platform for extensive user engagement and innovation.

My Role

I helped to establish existing and new information architecture for the platform as well as the IA for the platforms top competitors along with three other designers. 

In addition, I worked on the wireframes and UI for the cart and checkout flow, stock replenishment, saved shopping list, order history, and research and UI tasks for the B2C side of the NAPA.

I worked alongside three Senior UX/UI designers, UX researchers, product managers, engineers, and the UX Director.

Preliminary Kickoff

Early Industry Insights 

Before starting any design tasks, we wanted to map out our top 3 competitors sites. This way, we could ensure that our B2B platform adhered to not only our customers needs, but have a competitive edge as well. I, alongside Jonmarc Stevens, created the below information architecture layouts for our top 3 competitor sites.

Competitor One I.A. 

(condensed version)

Competitor Two I.A. 

(condensed version)

Competitor Three I.A. 

(condensed version)

ProLink Existing I.A.

(condensed version)

Further insights

Competitor findings, comparisons, and differences.

After collecting information about our competitors I.A., we found that all three sites offered more or less the same options for the user. Auto Zone offered the most comprehensive search feature, where users could change and manage vehicles that they have previously searched, sort by ascending and descending order, and search in one area by product, keyword, part number, etc. All of the sites were responsive or ready to be viewed from all mobile platforms.

Auto Zone and Advanced offered technical and business training solutions for shop employees, digital catalogs for past and future parts, and promotions for their users. These two sites were the most comprehensive of the three. After evaluation of the sites, we wanted to continue to flesh out some of the structure needed for the new ProLink I.A. from our competitor site research. 

Industry Analysis

Gaining insight from research

Before moving on to any designing, we wanted to gain a deeper perspective about the existing platform. The target audience for the platform were small to large auto repair shop owners to mom and pop tool stores. We wanted to make sure all were accurately accommodated. I, alongside my colleague, formulated a list of basic questions to conduct usability tests with our target user. 

Below are a few of the questions asked during the user interview.

  • Demographic: Consistent users with established accounts and new users.
  • Devices: Web Browser

Structuring a new path

Building a new ProLink I.A.

Moving forward, we wanted to start creating a new I.A. for ProLink. Keeping with our current navigational system, our focus was on structuring the most important features of the platform. We proceeded to map out pages such as the cart & checkout, order confirmation, and part category and sub category procedures. These were amongst the most important interactions and had the most user engagement of the entire site. 

Part Type Flow

Users can view a list of organized parts based on their previous selections on the category and sub category pages. Each part section is collapsible to show the next part type. The product results page shows a list of parts based on selections from the category and subcategory pages. This page also may show multiple results for each part.

Cart & Checkout Flow

The main flow will allow users to select a payment method: AR Charge (Bill account), cash on delivery, credit card, or PayPal. Additional actions include: Print order, Delete order, or Update Shipping Address. Once a payment method is selected, the user will be navigated to the confirm payment/details page to confirm their order.

Order Confirmation Flow

The order confirmation shows all pertinent information such as product details, order date, PO number, list & cost, part qty, and more. We wanted to keep the confirmation page as simple and easy to read.

Starting the design process

Structuring the site’s interface

Since the majority of the functionality was already established, we wanted to begin on the wireframes for the main pages of the site. Wire-framing first started on the cart & checkout since it was one of the top three most important pages for the platform. Ensuring the cart and checkout process was streamlined and easy to understand was key in the design process. 

Early Iterations: High Fidelity Review Cart Flow

To the left is the first iteration of the shopping cart page. We wanted to transition from one page that shows all cart items to a three step system that shows the “review cart” page, the “checkout” page, and finally the “order confirmation” page. For this iteration, we first introduced the three step system and including the specific store the part is available at, the store info, and a save for later bottom slider and a recommended items list.

After further evaluation, we decided this iteration was too jam packed with information and didn’t flow that well with other pages of the platform.

 

 

Early Iterations: High Fidelity Review Checkout Flow

For the checkout flow, we included pertinent information like details about the item, the delivery type and store, and payment information for the user. We also wanted the option for the user to return to the cart review page to edit the items in their cart. The order summary was also an area we wanted to include with a way to expand a more detailed view of the summary with further cart total information.

 

 

A simpler flow: continuing the design process

After creating the above wireframes for the cart and checkout respectively, we wanted to simplify the design down to an interface that was more palatable or easier to consume after testing the wireframes with users. The team wanted to continue to use a simpler design interface for future wireframes and didn’t want to stray too far from the original UI. Moreover, we wanted to make sure our existing user base would understand the new UI for the platform.

Order Details

The order details page conveys a simplified view of the direction the team wanted to go when designing the layout for subsequent wireframes. Different from the current order details screens, we wanted to incorporate the fulfillment statuses and where the orders would go. This screen also shows important details like this particular orders schedule day and time, replenishment order status, submission date, etc. 

The modal to the right shows the tracking information information progress bar for orders outside of the NAPA network. One of the features the team wanted to incorporate was having the user be able to visit the outside tracking courier’s website for further details. The above wireframes were designed along with Valerie M.

Enhanced filtering system

In keeping with a simple user flow, we wanted to create an easy to use order history page that shows the order/PO number, submission date, number of items, phoned in or web order, and other pertinent information to the users order. The user can also view their replenishment orders as well as cancelled orders under a simple tabbing system.

This screen shows the new up to date filtering systems  that allows a user to search by different criteria including:

  • Order Status: order statuses include submitted, delivered, ETA, cancelled, void, etc.
  • Order time frame.
  • Store location
  • Vehicle type

Stock orders system

The stock order screen allows users to create recurring orders by creating their own stock order from templates

that includes popular parts or create a brand new stock order from scratch. 

Alert system

The team wanted to also include a color coded alert system for when users perform an important task within the system. For instance, after a user adds a new stock order template to their list, a success or error message will appear at the top of the screen.

Shopping lists page

A new implementation was the shopping cart page where users can save items that they would potentially like to buy at a

later date.

Dropdown annotations

The team wanted to include a way for users to be able to see each item in their shopping cart. The user could click on the dropdown caret to see an image of cart items as well as pertinent information like pricing and how many of that part is in the cart, a way to increase or decrease the amount of the part in the cart, and subtotal.

The Redesign

The final design was an amalgamation of the team including the product managers and stakeholders, goal to keep a simple yet incredibly effective platform for their users. We wanted to ensure the new platform was competitive and up to date with other sites in the industry, but more importantly, met all of the target users goals. Below are a few screens from the final redesign of ProLink.

New order history and filtering system

Above shows the new order history screen as well as the newly implemented filtering system so that users can search for orders with specific criteria. The delete button also is activated after a box is checked an adjacent to an order.

Stock orders system

The stock order screens kept the same functionality including the ability to add a new stock order to their existing order list, deleting stock orders, and choosing from a stock order template list to create a stock order from the most used parts. 

Part availability modal

The new availability modal shows where an item is available, when, and the items delivery date. A color coded system was created to help convey this information

Final Results & Takeaways

1.) Weekly meetings to build solidarity: During our time developing the platform, we held meetings at least 3 times to make sure the whole team especially the stakeholders were on one accord. These were important to help further push UX initiatives to stakeholders who weren’t quite sure what UX is and how it would help their user base and their product grow.

2.) User testing:  We held several user testing sessions throughout the process to ensure we were keeping their needs to the forefront and to keep us continuously checking our designs.

3.)Realistic time constraints: Since we were under a strict deadline, we wanted to focus on the top three usability issues and improve upon that for the user. The most utilized pages were the cart and checkout, stock order page, and creating new and improved modals for the platform.