Butler Sporting Goods

Competitive + Comparative Analysis

• By comparing  Butler Sporting Goods to industry competitors – Marathon Sports, Dick’s Sporting Goods and Eastern Mountain Sports (EMS) – and analogous small businesses – KANDY KORNER – I was able to see a clear difference in the approaches taken by large and small businesses. For example, while Butler Sporting Goods and KANDY KORNER do not offer “chat” or “Account” features, both small businesses do offer customizable / personalizable products. Sometimes, small businesses are able to succeed not by competing with the big name brands, but rather, by changing the game and leaning into their own strengths.

Heuristic Evaluation

• By conducting a heuristic evaluation of the Butler Sporting Goods website, I was able to determine the specific strengths and shortcomings with regards to Learnability, Efficiency, Memorability, Errors and Satisfaction. I learned that the fundamental navigation was an issue, as were incomplete item descriptions and delayed “out of stock” notifications, among other things.

User Interviews

• I conducted 4 interviews. In order to ensure that I was collecting information from the most relevant users, I made sure to focus my efforts on individuals with an interest in athletics and/or fitness on some level. Once I knew each interviewee fell within the target user base, I asked them questions about their online and in-person shopping habits. Specifically, I wanted to know their process for finding and purchasing sports apparel and equipment, as well as what information and features on websites made for the best user experience.

  • Key Takeaways:

    • Users prefer shopping locally, when possible.

    • Users take time to find the right item.

    • Users value tactile understanding of products - e.g. weight, size, texture.

    • Users do not prioritize product personalization.

    • Users value reviews and descriptions, but are repelled by too much information. 

Card Sort

• To reorganize the navigation schema, I engaged 4 users in a card sorting exercise, asking each to redistribute and relabel existing Butler Sporting Goods menu items in a way that they thought made sense. This step was invaluable.

Site Map

• From the results of the card sorting exercise, I was able to develop a cleaner site map. By reformatting the header and footer, I made room for sports-specific menu headers, which improved the navigation’s learnability.

User Flow

• As the site had few steps from start to finish – homepage to checkout confirmation – the user flow needed little editing. Nonetheless, I made some minor changes, like ensuring that “Keep Shopping” navigated to the "Shop" page, not home, and presenting the option to “Keep Shopping” after checkout confirmation.

Sketches

• Sketching allowed me to represent my initial layout ideas for the site redesign, before developing grayscale wireframes.

Wireframes

• From the initial design previously sketched, I created grayscale wireframes in Figma. These digital screens helped me improve the precision with which I placed elements on the page, especially using 5-column gridding. 

Mid / hi-fidelity Prototype

• From the foundation of wireframes, I moved on to adding color to the screens, initially choosing blue and green for page section backgrounds and yellow for CTA buttons. With color added, I began usability testing.

Usability Tests

• With the mid / hi-fidelity prototype for my redesign of Butler Sporting Goods’ website, I conducted usability tests with 2 users  - both of whom were not familiar with Butler and neither of whom had been interviewed for the project before. Instructed to perform several tasks on the prototype – like navigating from the homepage through to checkout completion and adding an item to their cart from the “Shop” page – both users provided valuable feedback.

Redesign

• Based on feedback from initial usability tests, I altered the color scheme of the interface, incorporating the brand colors of Butler Sporting Goods (maroon and black) instead of the blue and green. In addition, some of the CTA buttons were not easily noticed, so I improved their visibility.