Brooksrunning.com Help Center

Research | Usability Testing | UI

helpcenter_homepage.jp

*this project is not yet live

 

The Problem

Brooks Sports has never had one page on the site where users can access all the help tools and resources they may need. The result is that users call or email customer service to be directed to help. This results in an increased load on our customer service team and less time for them to work with each customer.

The Solution

My product manager and I created a single page that allows customers so self serve and find the solutions they need. This will result in decreased contacts to customer service and an increase in customer satisfaction and trust in the Brooks brand.

 

P R O C E S S

Research

With a plethora of links to help related topics strewn about brooksrunning.com, we decided to conduct a card sort to understand how users categorize our topics. This way we were able to create a hierarchy of topics that will make sense to the customer who will be using this page. We also used analytics to find out what links users are clicking on most.

 

Usability Testing

Once we decided on the direction of our content strategy and wireframes we moved on to testing. We wanted to make sure anyone who came to our site would be able to find what they need. I created a test plan making sure that each task would encompass the use cases we had discovered. I facilitated the testing of six users to gain qualitative feedback. 

Wireframes

From the card sort, we created the content architecture that would best fit the customer's needs. The wireframes were created from a combination of my triad, product manager, engineer and me. I know not only does a design have to be beautiful but it has to be feasible from a development standpoint. A few designs were created and tested. You can view those here.

 

The Solution

We found in the usability testing that we had to create more clearly defined links and consolidate our category explanations. We were validated that our card sort results and categorizations met the mental models of each user. As with most projects we are working under constraints and have to choose what would be customers most useful design. I created a page that quickly links out to all the links users would need and designed a Top Links area so that the most used links were front and center.

 

Desktop Mockups

cshub_home_desktop.jpg
cshub_defective.jpg
 

Mobile Mockups

cshub_home_mobile_whitedropdown.jpg
cshub_home_mobile_open_whitedropdown.jpg
cshub_defective_mobile_notes.jpg