Legends Boardshop was founded and operated in Southern California since 1995. They have one of the largest hard goods and footwear selection currently available. Thousands of people have relied on them to get them the most exclusive goods from brands like Lakai, Adidas, Nike, etc. They offer skateboards, shoes, clothing, and more. Their commitment is to provide all of this to the community. They always want to support the skateboarding community and local skate shop.

Concept Project - Website Redesign

Duration - 2 weeks

Tools - Figma, Google Suite, Photoshop, Optimal Workshop

Role - Independent, UX/UI Designer, Copywriting, Prototyping, Art Direction

The Challenge

The goal of this case study was to redesign a local business’ website while maintaining their brand image: “small shop” appeal and great customer service. I was able to accomplish this by improving their site's information architecture allowing their customers to search and find products easier and also improve their current checkout process to further improve the customer experience.

Problem

Legends Boardshop prides itself on sharing its passion of skateboarding culture to the local community. Unfortunately, their website required users to have a specific set of knowledge to be able to locate products. I learned that many users struggle finding products because they are not organized in a way that is intuitive for consumers.

Solution

• A consistent shopping experience

• Improved information architecture

• Smooth Checkout process

RESEARCH

User Interviews

I conducted a total of 5 interviews. I learned that users want to learn more skateboarding and feel confident while making the purchase. Once I collected all of my notes, I synthesized the information from affinity mapping and created the following “I” statements:

• I want to know more about a product.

• I enjoy variety.

• I want to learn how to skate.

Goal

Users will be able to select a product and check out in less than 5 minutes.

Logistics

• Remote testing

• Unmoderated

Participants

Beginner & experienced skateboarders

Tasks

1. Buy a pair of shoes and a skateboard deck for less than $100.

2. You are interested in buying a skateboard. See if the site offers anything that might suit your needs.

Key Takeaways:

The product pages do not have a system of organization. Some products are in the wrong category.

Results:

5/5 users were not able to find a filter or sorting option on the product page.

Heuristic Evaluation

1. Visibility of System Status

• User is required to click on the hamburger menu to further navigate to different shop categories. It does not provide a dropdown menu.
  
  

I want to focus on 3 major heuristic violations with a severity rating of 4 (usability catastrophe: fix this before product is released). The website design should always keep users informed about what is going on and follow real-world conventions allowing easy learnability. Moreover, there are many inconsistencies with the overall design contents such as different sized images, product descriptions, and information architecture. These violations became my focus and foundations for my redesign.

DEFINE

Persona

I defined a persona to keep the persona in the center of my design process. I believe that a persona is an important aspect of the design process because it helps keep our ideal users in mind. 

Jake is my primary persona and represents the beginner, experienced skateboarder who Legends Boardshop is aiming to reach and provide a positive shopping experience.

Jake - “Skate or die”

Background

Jake is a software engineer based in Los Angeles, California. For the past couple years, he has been very interested in skateboarding. He currently uses a preowned skateboard, but Jake wants to make his first purchase online but requires more information on which skateboard best suits him.

Needs & Goals

• Would like to purchase skateboard accessories to fit his style

• Want to know the most recommended skateboard for beginner

User Flow

This is Jake’s user flow for viewing and selecting different skateboard products then checking out with confidence. I added a "view all” feature that would allow users to browse more products throughout the store.

DESIGN

Sketches

I revamped the homepage by adding branding, a cover photo, and a featured products list. I also added a global navigation bar on every page. With the navigation bar and the filter option, users are able to find products with ease.

During wireframes, I decided to add additional estimated shipping and tax information so that it matches between the system and the real world.

MID-FIDELITY PROTOTYPE

Usability Testing

Goal

Users will add items to cart and check out with less than 2 errors in under 1 minutes.

Logistics

• Remote testing

• Unmoderated

  • Users are given a prompt and complete the task independently.

Participants

• Non-interested skateboarders

• Beginner skateboarders

• Experienced skaters

Tasks

1. Please visit the website and purchase a skateboard.

2. Please visit the website and read or write a review

Results:

Initially, 0/3 users were not able to find the product review.

Key Takeaways:

Product page does not have any indication for reviews, nor to write a review. Product description length caused users to scroll and then discover the review section. Users expressed their concerns of product credibility with the website’s lack of product description and information. To address this, I added a reviews feature that would allow users to read other customers’ experiences with the product, which allows users to feel more confident when purchasing.

DELIVER

HIGH-FIDELITY PROTOTYPE

Iterations

Review Discoverability

• Added star ratings under product name for increased visibility

• Added total number of reviews

• Added hyperlink to write a review

• Included star ratings in review boxes

• Added a “add a review” with different color to differentiate from “add to cart” button

Color

Changed background page color to #EEEEEE for contrast against white product boxes. Users will be able to see products easier.

Initial color #BFADA8 was too dark. Changed navigation bar color to #D0CBC8 for better contrast with branding logo.

#EEEEEE

NEXT STEPS

Future Iterations

• Additional usability testing required

• Wish list feature

  • Add a “add to wish list” button for future iteration

  • Will allow users to favorite/heart products that will save them for later to purchase

• Order Confirmation Page

  • Include “order status” progress bar.

Conclusion

In order to satisfy Jake’s frustrations, I implemented an improved information architecture, consistent product images and descriptions, and review feature. My website redesign allows Jake to filter through different products and read product reviews from customers to checkout confidently. Jake has gone from disappointed, confused, and hesitant to confident and happy. Overall, Legends Boardshop have seen an increase in sales and customer satisfactory. They can continue being the local skate shop and sharing their passion to the community.