Dynamik Sports

Dynamik Sports is a sporting goods store located in Reading, MA. They specialize in hockey goods but also offer baseball, lacrosse and soccer products. They currently have a website but it lacks an e-commerce functionality. So I created this conceptual mockup which focuses on providing users with the info they care about most when purchasing sporting goods online. Making the information architecture intuitive was another a key factor to my process.

Discovery stage and a trip to the store.

In order to design a digital prototype to illustrate a successful online shopping experience, I needed to dig deep and grasp the needs of the business and its users. I started by making a trip to the store to gather information. I also collected an inventory of items the store carries and performed a competitor analysis.

Next, I conducted surveys and user interviews to see what people really want from shopping online for sporting goods.

Some interesting quotes I pulled:

“Enjoys the process of shopping online when time is limited, quick, it’s easy”

“Most important aspect to shopping online is the product info, product reviews, why reviews are presented because I get the sense that visiting national brands that the reviews are curated”

“Had a negative experience with Amazon, I don’t like how the buy now button is too close to other options. I hit it by accident, then I had to cancel the order.”

To organize my findings I using affinity mapping to find patterns and determine my user’s needs. I found that every participant I asked was very reluctant to buy sporting goods online because they couldn’t get an accurate feel for the equipment. To break down this barrier I asked users what would make the purchase of sporting goods online more practical and what would they feel comfortable purchasing.

Users felt more comfortable purchasing sporting goods online if:

They already purchased the equipment before and were getting a replacement.
Were getting something with exact dimensions like a hockey stick or net
If they saw a review and photo of someone who was their same body dimensions like height and weight using the product.
If there was a great return and refund policy.

Next I conducted evaluations to see how competitors use their own ecommerce sites and how the current Dynamik Sports website is set up. This gives me perspective on what to add to the redesign.

Competitive analysis

I compared competitors in the industry to see how they designed their sites and how closely their business model matched Dynamik Sports.

Heuristic evaluation

Using Jakob Neilson’s Article as a Heuristics Guideline, I analyzed Dynamik Sport’s current site to see how it fared for each Heuristic.

Next, I used card sorting techniques to optimize the information architecture.

I wanted to make it easy for users to find product on the site without using the search bar. Sometimes users don’t know exactly what they’re looking for so categorization is important. Let’s say a user wants to search for tools to help them train, they can find these products easier by going to the proper hierarchy of categories. To determine optimal organization, I went to the best resource available: the users themselves. I utilized two different card sorting methods for this process. My process is explained more below:

Open card sorts

To determine how to group the different store items, I started with an open card sort. After six different tests I found:

There were two different groups of like-minded people. Half of my users created 25 categories while the other half created seven categories
To reduce this polarization among users, I decided to conduct some closed card sorts with categories selected from both groups.

Closed card sorts

To create my categories for the closed card sort, I:

Reviewed my results from the original six sorts
Conducted the open card sort myself to better understand the process. Realized one group was very broad while the other group was very specific. I decided to use 16 categories as a middle-ground.
For closed card sorts, I had three participants. My categories made sense to my users based on strong correlations in my data.

Now that my products were categorized, I created a site map to better seen the organization of the entire site.

Next, I created a problem statement to focus on my primary objective for the site design.

People who are looking for sporting goods need a way to find and compare items quickly and easily in order to save time and stress searching for sports products online

My solution statement for this problem:

We believe that by creating a website with great navigation, comparison reviews and filters, we can save people who are looking for sporting goods time and stress.

We will know this to be true when we see 15% of the total store revenue come from online sales within the first six months.

Now that the research phase is complete, we’re in the design stage.

Feedback from usability testing and my iterations

Feedback: One user was not sure when a product was or wasn’t added to the shopping cart. There was a red circle that popped up over the shopping cart, however they did not notice this change.

Solution: A transparent box that says item was added to the shopping cart after she clicked on add to shopping cart. It gives instructions on how to get to cart as well. Can click out by pressing okay.

Feedback: Some users were not sure how to view different product reviews right away. They did eventually find the left and right buttons to view different reviews but they typically like seeing a few different reviews at a time.

Solution: I changed the product review page to show three different reviews at once. If a user wants to see detail about the review then they can click on specific reviews to see more.

Feedback: My users thought the checkout screen was confusing because everything on the page was packed in. Ultimately there was not enough white-space and users felt confined.

Solution: This was problem was solved by adding more white space between everything on the page.

Next steps

There are still some issues with the shopping cart like the layout of certain buttons and links. The navigation within the progress bar does not work perfectly and I need to add the ability to organize multiple items in the shopping cart list. Due to the scope of the project and two week time frame I had to move on. I plan come back and fix these issues and well as transition this site to high fidelity.

Prototype:

Home hockey landing page final UI

I have finally gotten back to poslishing up this work from my General Assembly days and this is my first screen I’ve finished the final UI for. More screens are coming…

See Flat Finder case study →