Project Overview
"SC" Skateboard Customs Responsive Website/ Mobile App
Custom skateboard website to buy skateboards.
The Project:
Skateboard Customs or better known as “SC” amongst the skateboarding community has tried to make a name for themselves by giving the option to all users abilities to purchase custom skateboards.
Duration: 4 Weeks
The Problem: Creating a website for everyday users in which they can buy new, custom, and unique skateboards.
The Goal: Design a website where users can create custom skateboards.
Project Overview
My Role: As the UX designer, I created a skateboarding website to order skateboards for a company called Skateboard Customs.
Responsibilities: My responsibilities were conducting interviews, doing paper and digital wireframes, low-fidelity, and high-fidelity prototypes, conducting usability research studies, accessibility, accountability, and iteration of my design.
The Research: During the process of creating this website, we conducted numerous interviews to understand what users wanted. After my research, I found that users wanted a website where they could purchase custom skateboards as well as buy unique ones.
The research also showed me that something needed to be done, for example, changing the Font type because it didn’t work well with the website from the original low-fidelity wireframe.
Understanding the user
User Research: Pain Points
1
Users are not able to get confirmation information after they make their purchase.
2
Users had no option to go backward from the previous page.
3
Users need to be able to select the skateboards for purchase. (have some type of indication that you selected the right product).
4
Not all users were family with the layout of the design of the website so changes need to be made so it is easier to use.
Personas
Sitemap
The sitemap shows the path of the information for the user's map.
Paper Wireframes
.png)
Here are some of my paper wireframe ideas for my website as well as the mobile version of the responsive website.
.png)
.png)
Low Fidelity Prototype
The low-fidelity prototype presented with a simple design with placeholders for the skateboard website where icons with text would be.
Design Wireframe
As the website was still in process I made changes based on the user group to give users the option to go backward in the website.
Screen size variation
Here is a screen of the digital wireframe screen size variation for a mobile version of the website.
Usability Study
I conducted two rounds of my usability study. The findings from the first round of study helped to create the wireframes for the skateboard website. The findings from the second round study helped to create the high-fidelity prototype design and showed what needed to be fixed skateboard website.
Mock Up
After looking at my study I realized that the homepage of the website was too crowded and did not have enough negative space. So I made some changes to the home page as shown in the slide to give the website.
Mockups: Original screen size
Mockups: Screen size variations
High Fidelity Prototype
Accessibility considerations
1
One particular accessibility consideration that was applied to this design was the choice of icons to be used like the home button.
2
Another accessibility consideration that was applied to this website was the motions of some of the images when pressed for example when you select the product there was a slight indication that showed your product was selected.
3
Lastly, for accessibility we tried to use icons that were universal in that the users would know.
Final Product