Case Study - August-September 2021
Custom Skateboard Online Ordering Responsive Website
The Sk8board is a skateboarding store that offers many options to purchase skateboards and their accessories, with a custom build option to fit their budgets and free assembly for those in need.
MY ROLE
UX designer leading “The Sk8board” website design.
RESPONSIBILITIES
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
Problem
When purchasing skateboards, it is important to have a variety of trusted brands with detailed information and sizes, as well as the option to build your own within a budget.
Goal
Design a website where users can purchase complete skateboards or easily build their own where they can see what it will look like and how much it will cost.
Understanding the User
User Research: Summary
I used online surveys to gather data, which I turned into empathy maps to better understand the target user and their needs. I discovered that many target users prefer to buy parts as opposed to complete since different parts break at different times, but for replacing the whole skateboard, they prefer to build to their specific needs. However, many websites do not include details and sizes on their products, which makes it difficult to choose the right items, which are very expensive.
User Research: Pain Points
Pricing
Buying online is tedious when having to shop around. Best to have more variety in one place.
Visualization
Not being able to see how the skateboard will look once assembled with all the custom parts.
Assembly
Ordering online does not allow for a complete skateboard ready to use once it arrives.
Details
Important information regarding the parts is missing, such as sizes.
Personas
Problem statement:
Elise is a mother and full-time worker
who needs a ready-to-ride skateboard because she does not have the time or knowledge to build the skateboard correctly.
User Journey Map
I created a user journey map of Elise’s experience using the site to help identify possible pain points and improve opportunities.
Starting the Design
Sitemap
My goal was to organize the website navigation in a way that was easy to follow and immediately be able to find the right flow. The structure I chose was designed to make things simple and easy.
Paper Wireframes
Next, I sketched out paper wireframes for the home screen of my website, keeping the user pain points in mind.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Digital Wireframes Screen Size Variation
For the responsive mobile versions, I kept the most important elements above the fold to still allow for quick and easy navigation.
Low-fidelity Prototypes
To create a low-fidelity prototype, I connected all the screens involved in the primary user flow of custom building their skateboard and placing an order.
Usability Study: Parameters
Study Type:
Unmoderated usability study
Location:
United States, remote
Participants
5 participants
Length:
10-15 minutes
Usability Study: Findings
Checkout
The checkout button was difficult to find. Confusion on how to proceed.
Navigation
Users kept trying to click in a list section where items were not clickable, and thus were confused about where to go.
Visibility
Some sections don’t appear to have more below and what they were looking for was below the fold.
Refining the Design
Mockups
Based on the insights from the usability study, I made changes to improve the visibility of items below the fold, and made the list on the right clickable, for easy access to these items.
To allow users to proceed to checkout easily, I repeated the checkout button at the top of the page to allow users to proceed, whether on the top or bottom of the page.
Mockups: Original screen size
Mockups: Screen Size Variation
I included considerations for an additional screen size in my mockups based on my earlier wireframes. Because users shop from a mobile phone as well, I felt it was important to optimize the browsing experience for mobile, so users have the smoothest experience possible.
High-fidelity Prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study.
View “The Sk8board” high-fidelity prototype.
Accessibility considerations
I used headings with different sized text for clear visual hierarchy.
I used landmarks to help users navigate the site, including users who rely on assistive technology.
I designed the site with alt text available on each page for smooth screen reader access.
Going forward
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the 3D builder, and demonstrated a clear visual hierarchy.
What I learned:
I learned that even a minor design change can have a tremendous impact on the user experience. The most important takeaway for me is to always focus on the actual needs of the user when coming up with design ideas and solutions.
Next steps
Conduct follow-up usability testing on the new website to improve upon our design.
Identify any additional areas of need and ideate on new features.
