Steo Designs
Steo Designs
  • Home
  • About
  • UX/UI Design
  • Graphic Design
  • More
    • Home
    • About
    • UX/UI Design
    • Graphic Design
  • Home
  • About
  • UX/UI Design
  • Graphic Design

Project Overview

The Product

Steez Skate Co is a company focused on sharing the love of  skateboarding with the world through fully custom skateboards and parts. Their goal is to help customers design and purchase a skateboard that is unique to them. 

Product Duration

Product Duration

Product Duration

July 2022- August 2022

The Problem

Product Duration

Product Duration

Custom skateboard brick and mortar shops are few and far between. Steez has discovered that skate enthusiast have a hard time finding where they can create an entire custom skateboard, not just the deck. 

The Goal

Product Duration

The Goal

Design a Steez Skate Co. website to be user friendly by providing a clear user flow through the process of ordering a custom skateboard. 

My Role

Responsibilities

The Goal

UX designer leading the Steez Skate Co website design from conception to delivery.

Responsibilities

Responsibilities

Responsibilities

User research, paper and digital wireframing, low and high-fidelity prototyping, and iterating on designs.

User Research

Summary

I conducted user interviews, which then turned into empathy maps to better understand the target user and their needs. I discovered that many target users want to be able to fully customize a product from start to finish. However, many customizable product shopping websites are overwhelming and confusing due to their complexity, which in turn led to frustrating experiences for many target users. 

Pain Points

Navigation

Information

Navigation

Customizable product websites are confusing to navigate

Experience

Information

Navigation

Online shopping experiences don’t provide an engaging browsing experience

Options

Information

Information

Customizable product websites limit customizable options 

Information

Information

Information

Many customizable product sites don’t offer helpful tips to allow users to make decisions best suited for them

Persona

Problem Statement

Tony is an avid skateboarder who needs access to fully customizable skateboards online because there are no specialty skateboard shops nearby. 

User Story

As a full time worker and avid skateboarder, I want to be able to fully customize new skateboards online so that I don't have to compromise on features I want.

Design

Sitemap

sitemap words

Paper Wireframes

I drafted four iterations of the home page to figure out what was most important.

Digital Wireframes

Prioritizing an efficient design to simplify and guide users through the user flow was a key part of my strategy.

Digital wireframe screen size variations.

Low-Fidelity Prototype

I connected all of the screens of the user both of the main user flow (skateboard design and checkout) and subsequent flows (login, shop, about, and contact).

Low-Fidelity Prototype

Usability Study Findings

I conducted an unmoderated usability study of a new website to determine if users can complete core tasks within the prototype and determine if the Steez website is difficult to navigate.

Design

Account

Account

There was too much attention on the “save for later” button. Users were unintentionally clicking it. 

Account

Account

Account

During the checkout process, there isn’t a way for users to login if they already have an account in order to use saved account information.

Checkout

Checkout

Checkout

During the checkout, there wasn’t a way for users to add a billing address that differed from their shipping address. 

Build

Checkout

Checkout

During the custom building process, users want to be able to see the total price of items in the cart.

Refining the Design

Mock-ups

Based on insights from the usability study, I made changes to improve the custom skateboard build process. I added a cumulative shopping cart total so users could see an itemized list. I also took away attention from the “save for later” button and renamed it “login to save for later” to avoid errant clicks. 

Hi-Fidelity Prototype

My hi-fi followed the same user flow as the lo-fi prototype but focused only on the main user flow.

Hi-Fidelity Prototype

Mobile screen mock-up

I included additional screen sizes in my mock-ups based on my wireframes. Due to the need for mobility of our users, I felt it important to optimize the experience for mobile devices.  

Accessibility Considerations

1

1

1

I established visual hierarchy by using headings of various sizes and weights.

2

1

1

Initial focus of the homepage on suggested  user flow to define the primary action of the user. 

3

1

3

I designed the site while referencing WebAIM contrast and color requirements to ensure my designs meet accessibility standards. 

Next Steps

1

1

1

Conduct another usability study to ensure that previous pain points were adequately addressed. 

2

1

1

Add more products and additional filters to the custom build process.

3

1

3

Finish additional pages necessary for subsequent user flows.

Takeaways

Impact

What I learned:

What I learned:

Our target users shared that our design was easy and fun to use while giving them the freedom to make decisions. 

One quote from peer feedback: “The user flow is easy to understand. I love the skateboarder that shows my progress.”

What I learned:

What I learned:

What I learned:

While designing the Steez Skate Co. website, I learned that complex customization options need to be presented in a simple way for the user. If the user is confused throughout the process, they won't have any confidence in the company they are purchasing from. Cutting out unnecessary designs or pages from the user flow and simplifying as much as possible are the most user friendly types of designs. 

Copyright © 2024 Steo Designs - All Rights Reserved.