Complex User Flows Enabling Customization
MPM Skateboards is a fully customizable skateboard responsive website design
This project was created as a part of the Google UX Design Professional certificate. The goal of this project was to create a responsive website in AdobeXD that would allow users to fully customize high-quality skateboards regardless of their knowledge of the skateboarding industry. Summary
As someone with an avid skateboarder in my life, I've always struggled to find the perfect gift that combines my passion for design and his passion for skateboarding. MyProModel (MPM) Skateboards solves this issue by allowing users to customize high quality skateboards from the graphics to the exact wheels and bearings that meet the unique preferences of any skateboarders.
Tools: Miro, AdobeXD My Role: UX Generalist
Benefits
Users can create a truly unique skateboard that reflects their personal style and preferences.
MPM Skateboards offers a wide variety of high quality components to choose from, so users can create a skateboard that is perfect for their needs.The custom skateboard building process is fun and easy, and users can track their order progress online.
Primary Research
Understanding the Problem
My husband has been skateboarding since he could walk, it’s a huge part of his life, what he likes, and his friends. I’ve taken a liking to skateboarding in the 7 years we’ve been together but when it comes to creating a personalized gift or any gift surrounding skateboarding it’s always been difficult to find what to give without having to ask him directly. I know I am not alone, there are tons of parents, partners and friends who would love to give a special gift to the skateboarder in their life and do not know where to start. This is why I created MPM, so that no matter your level of skateboarding knowledge, you can create an amazing gift that will blow away the skateboarder in your life. How I Conducted the Research
Most of my research was conducted through industry and market analysis mixed with user interviews. The main questions I asked myself were : Does this exist in the market today?Do people want this to exist?Who is my target audience?What does my target audience need?
Pain Points
-
Users who have a skateboarder in their life have struggled to find the right gift for their skateboarder
-
Once they decide to buy something skateboard related, it is difficult for them to have enough knowledge about skateboarding to chose what
-
Even if they decide they want to buy a skateboard many do not know what specs they need, what size to ride, what brand their skateboarder might prefer
-
Many of the other companies in this market do not give enough customization or are not good enough quality to actually use as a skateboard and just end up as wall hangers
User Personas
User Journey Map
Industry & Market Analysis
The following is a summary of a more extensive competitive audit that was preformed during this project. The chart incorporates the main points and insights gathered from that research.
The Anatomy of a Skateboard
For those curious or who may not know the anatomy of a skateboard, I created this illustration as a reference point as this information will become relevant later in the case study.
Low-Fidelity Wireframes & Prototype
The wireframes presented below represent the skeletal structure of the product, serving as a blueprint for its layout, content placement, and functionality. These low-fidelity representations allowed me to focus on the overall structure and flow, without getting caught up in specific design details.
The wireframes went through two iterations, one pre and one post-usability testing. The main insight that came from the usability tests was that users needed more information to make their customized board complete. To solve for this, I added a walkthrough that would guide the user through the process of building a skateboard, complete with articles and recommendations to design the best board possible.
The gallery below provides a comprehensive view of these wireframes, highlighting how the design translates across different devices and screen sizes. You can also click on the button below to view the fully interactive lo-fi prototype on AdobeXD.
High-Fidelity Wireframes & Prototype
I have compiled a gallery showcasing my high-fidelity design process, starting from the design system and culminating in the final prototype. It has been an absolute pleasure to bring this vision to life, and I sincerely hope you enjoy the end result. Your comments and feedback are highly appreciated, and I encourage you to reach out to me directly to share your thoughts. Don't hesitate to get in touch—I'm eager to hear from you!
Wouldn’t it be nice?
Just like any designer in the beginner of their journey, there are things I would change in the functionality of this product. This was my second project during my bootcamp and since I have been getting a lot of on the job experience. I have learned so much during the last 8 months of my journey and although there are things that I would change, I also find it important to show my progress by sticking true to my original designs. Below I have listed a every small portion of what I would do differently if I were starting the project today.
-
Although I am grateful for having experience on AdobeXD and thanks to this project I feel very comfortable on XD, I would have felt a bit freer to explore the high-fidelity designs and micro-interactions in Figma. I would also be interested in transferring this file to Framer to see what I could do within that tool.
-
I would have liked the opportunity to do more usability tests with specifically users that have zero knowledge about skateboarding or the skate industry to ensure that the walkthrough and navigation is helpful and accessible to all user groups.
-
Although the designs do incorporate a mobile layout, I would want to redesign the mobile interface to resemble a web app. I would want to reduce the page length and create a more interactive layout that would have more breadth and be easier to digest on mobile and tablet.
