SWOT analysis chart for the app Skate Tricks
Matty Wilson
UX Researcher
Sk8r
Leading research for the creation of a mobile app to help people of all levels learn to skateboard.
Overview
In short, Sk8r is a digital encyclopedia for skateboard tricks. For this project, I used data from a survey and competitive analysis to conceptualize the type of resource skaters would most benefit from. After this, I created several design deliverables such as Personas and User Flows, then brought the design to life in Figma.
What Was the Problem?
Skating is hard.
From my own experience, learning to skateboard is very hard. So when I had the opportunity to do a passion project, I wanted to create a resource for skaters, but was undecided on what kind of resource. To solidify the vision for Sk8r, I surveyed people who have experience learning to skateboard and did a competitive analysis of pre-existing resources in the market today. This helped build understanding of the kind of person who might be using Sk8r.
Research
I kicked off the research for this project by doing a SWOT analysis of an app called "Skate Tricks" on the Apple App Store. Below you'll see a couple screenshots of the app.
The SWOT Analysis
This practice in competitive analysis is done through critical observation. I identified the strengths and weaknesses in Skate Tricks which, in turn, highlighted potential opportunities and threats I was able to use as insights when designing Sk8r.
Surveys
After the competitive analysis, I ran a survey to collect additional data to help better understand how others experience learning to skateboard.
"How difficult did you find the process of learning to skateboard?"
The small slice in this graph represents the 9.1% of survey participants that describe learning to skateboard as "somewhat easy." The other 90.9% of participants described it as either "very difficult," "somewhat difficult," or "neutral." This shows me that people overwhelmingly find picking up this activity difficult, and gives validity to the idea of creating a resource for this population.
Pie graph showing data from survey question. Full survey data here
"How do you feel about learning new skateboard tricks?"
When faced with this question, 55% of survey participants respond "excited." Paired with the insights from the previous question, it seems that even though people find learning to skateboard difficult, the excitement for learning new skateboard tricks persists.
Deciding Design Priorities
The insights gained from the research phase helped illuminate what design priorities would push Sk8r in the right direction. Those priorities were:
Focus on skateboard tricks
Ensure information is digestible
Be dependable
Include video
Represent the modern youth
Personas
These two personas represent the primary and secondary users for Sk8r. Creating these personas was useful so I could have a visual representation of the users to refer to throughout the design process.
User Story & User Flow
The Importance of a Backbone
The User Flow and User Story are crucial deliverables in my design process. Before getting to the visuals, the story and the flow become the backbone of the way a product feels. The User Story highlights the importance of the interactions required for users to achieve their goals, while The User Flow shows how Sk8r accommodates for that interaction in a way that is user-centric and will be testable.
Low-Fidelity Wireframes
Sketches of my first wireframes for Sk8r
Start in the Sketchbook
When beginning to conceptualize the visual skeleton, I started in my sketchbook, and it helped me get down my initial ideas quickly, while also being a space to make rapid iterations to the design.
The hallmarks of the sketching phase were splitting the trick pages into 3 categories - Overview, Breakdown, and Drills. For the home screen, the design prioritizes Featured Guides and Your Saved Guides.
Now that I had ideas coming together for the User Interface, I went into Figma to create low-fidelity wireframes for Sk8r.
A style tile of some things and colors that were inspiring in the design process
Creating the High-Fidelity Wireframes
I was inspired by the modern youth for this app. The people who maybe picked up skateboarding during the pandemic, or who have been skating their whole lives. The people who truly love to skate and are excited by other people loving it too. I wanted the colors to be muted and relaxed without being boring. I wanted the content to feel naturally inclusive, as well as motivating. Sk8r is a resource that wants the best for every skater, and the user interface should reflect that.
Usability Tests
Testing with Users
Now that I had my high-fidelity wireframes, I stitched them together to create the first prototype of Sk8r. Keeping in mind that I, as a designer, am not the user, I knew I needed to conduct some usability tests, to highlight opportunities to improve the design as well as any glaring accessibility concerns.
For the usability test, I encouraged participants to explore through the design, click around, and talk aloud through any and all of their thoughts so I could take note on both what they're feeling in real time and also what I am observing. The feedback from the usability tests can generally be grouped into two categories, Likes and Criticisms.
Likes
Easy to find the guides
Information is broken down well
Good amount of videos
“Simple to use”
Participants reacted well to the color scheme
Criticisms
Small search bars
Confusing hierarchy
Inconsistent formatting
“Go Sk8.” banner does not look like a button
Non traditional icons were confusing at first
Iterate, Iterate, Iterate
Prototype 2.0
Improved hierarchy by introducing a new font to the design
Increased search bar size
Corrected instances of too low contrast
Introduced traditional icon for Save feature
Changed layout and appearance of elements on the home screen to be more intuitive for users
Last Thoughts & Next Steps
The entire process of designing Sk8r was not only enjoyable, but also a valuable practice in making design decisions based on research. As it is, Sk8r is a design that is ready and capable to be of use to be old and new skaters. It's an inclusive design that prioritizes legibility when it delivers information, without sacrificing functionality or aesthetics.
For the future of Sk8r, I think the design has room to incorporate a few more features without crossing the line into being too much and overwhelming for users. From the survey I conducted during the design process, I also learned that over 63% of participants enjoy talking to others about skateboarding, and even more have friends that they actively skate with. This suggests that the inclusion of some sort of social features could be successful in Sk8r.
All in all, it was a wonderful experience bringing this idea to life. Thank you for reading!