My senior capstone project encourages skateboarders, especially those who may feel intimidated by skate culture or disconnected from the community, to track their skate trick progress through video form. This app allows users to not only have a centralized platform to store videos of their skate progress of each trick, but also motivates them to practice more often through stats, a community feature, and a video montage made available at the completion of each trick.
By employing beginner-friendly language and design, shifting the emphasis away from competitive aspects of skateboarding toward personal growth, users can enjoy an inclusive and enriching experience.
Tic Tac: Trick Tracking App
Duration
Feb—Apr 2024
Role
Solo product designer
Tools
Figma
After Effects
Procreate
Illustrator
overview
intro
core experiences
Browse a curated list of skate tricks
Browse a curated list of tricks and sort them by status tags to track your skateboarding progress.
Record your practice sessions for individual tricks
Record progress for each trick by taking clips of tricks. Once you master a trick, a video montage 'highlight reel' will be automatically created.
Connect with the community
Get motivated and involved with the skateboarding community by seeing other skaters' progress. Perhaps even post you own videos!
Research
research goals
Determining what to focus on
I began by immersing myself in the skateboarding community rather than starting with a predefined problem. By getting to know the community first, I aimed to uncover genuine insights and truly understand their needs and motivations. This way, I could better address and enhance their experience.
Investigate different learning styles
Identify skateboarder motivations and goals
Learn about beginner skateboarders’ attitudes
method 1: PARTICIPATION observation
Gaining firsthand insights through visits to skateparks
To gather insights directly from the community, I went to 3 skate parks and the Santa Cruz Boardroom to observe skateboarders' behaviors, interactions, and environment.
Key Takeaways:
📵 There was no phone use at parks; skateboarders stood on the side in line watching others
🤸 Skateboarders practiced a mix of tricks they already knew, having continuity during their run
🙍♂️ There were only men at the 3 skateparks
Method 2: Interviews
Having conversations with skaters
I conducted interviews at three skate park including ones in skate culture-rich San Jose. Interviewees ranged from pre-teens to adults, with experience levels from six months to over ten years, including an ex-competitive skateboarder.
"Skateboarding is like a mental battle...with yourself."
"Being comfortable with skating at parks also depends on your skill”
“I see someone do a trick, and think damn I really wanna do the trick.”
“If you leave a session with one cool clip, you feel good about yourself.”
Key Takeaways:
👀 Watching other skateboarders is a great motivating force in leveling up one’s skills.
📹 It's very common for skateboarders to record themselves doing tricks
🤝 Skateboarders often form friendships at skateparks, a key element of the community
method 3: user survey
Getting a broader range of perspectives
I conducted a user survey to provide diverse perspectives to complement the in-depth insights from the skate park interviews. The survey was distributed via a Reddit skateboarding forum and Skate Like a Girl, a nonprofit organization that seeks to empower skateboarders, especially young women.
I surveyed:
I surveyed:
23 skateboarders
1 mos—20 yrs experience
Beginner—Advanced
Key Takeaways:
Respondents learn new skate tricks through trial and error and tutorial videos
Respondents typically prioritize learning tricks by difficulty and by tricks seen online
Respondents vary in the comfortability of sharing videos
social media listening
I wanted to delve deeper into specific pain points that I observed through my primary research and better understand them. So, I gathered insights on opinions and discussions through social media platforms, forums, and other online communities.
competitive analysis
Examining the competitive landscape for market gaps
Besides primary research, I also conducted secondary research to identify opportunities for differentiation and how to best position my solution effectively in the market. I analyzed both direct and indirect competitors.
Strava
Braille Army
Skate Tricks
Strengths
Daily active user base of 1.4 million
Established brand presence in the fitness tracking market.
Sophisticated app design
Established brand presence in the fitness tracking market.
Sophisticated app design
Established through popular youtube channel
Specifically designed for skateboarders, providing relevant content.
In-app tutorials by in-house skateboarders
Specifically designed for skateboarders, providing relevant content.
In-app tutorials by in-house skateboarders
Emphasis is on trick tutorials and progress tracking
Extensive list of trick tutorials, categorized by difficulty and type.
Extensive list of trick tutorials, categorized by difficulty and type.
Weaknesses
No specificity when tracking a broader range of sports; app more targeted toward endurance sports
Design and usability less polished
Trick tracking feature crashes and is hidden
Lack of personalization
Trick tracking feature crashes and is hidden
Lack of personalization
Weak user interface
Users are unable to see "my tricks"in free version
Users are unable to see "my tricks"in free version
Opportunities
Tracking stats allow access to data and motivates users
Profesional video tutorials for each trick
Challenges and trophies encourage user engagement
Detailed competitive analysis insights
Managing Practical Limitations
As a solo researcher and designer, it's important to recognize the limitations
4 out of the 5 initial interviews were conducted with men
Skatepark interviews were all in the Bay Area
Smaller sample size in survey respondents restricts statistical validity
Budget constraints limited resources and tools for user research
Capturing insights from social media and community forums may include bias
4 out of 5 initial interviews were with skaters comfortable at skateparks
ideation
shifting the user group
Research showed the potential of designing for skaters not yet embedded in the community
The research identified a need for an app designed for novice skaters or those hesitant to join in-person skate communities. This group is more likely to utilize a digital platform for learning and tracking their skateboarding journey, a opposed to skateboarders whose community already lies in the skate park.
We can integrate beginner skaters and those who feel out of place at skateparks by building their skill set and confidence in tricks, empowering them to explore new challenges.
Skaters already in community
"Recording was definitely more helpful at the beginning than later"
"I discover new tricks from other people I see at skateparks"
"I like being at a skatepark because my friends are here"
"You’d achieve a lot more if you just focus on improving your skill rather than thinking about what others are thinking about you"
Skaters not yet in community
"Once I feel good, I'm going to hit the skateparks"
"It would’ve been cool if I got to the skill level where I could skate at skate parks"
"I’d be scared of being called a poser or something. I know it’s silly"
"My primary place and time that i'lI skate is a space specifically for woman and or trans people ... I think it would be a different case entirely if i only skated with cis het men in public skateparks or without the aspect of communities i already identify with"
*Quotes are taken from survey and interviews.
shifting the user group
Translating insights to ideas
With my cohort and mentors, I identified multiple areas of opportunities through a rapid HMW brainstorming session.
defining the users
While skateboarding is already a niche community, I decided to narrow down the primary user group to skateboarders who feel most comfortable skateboarding and recording tricks in their own space, whether it be because of their beginner status or discomfort with going to skateparks.
It is helpful from here on to keep the primary users and their journeys in mind in the design and testing process.
It is helpful from here on to keep the primary users and their journeys in mind in the design and testing process.
concept brainstorm
From insights to features
initial design
site architecture
Organizing the features into intuitive groups
I designed 3 versions of the site architecture and I decided on the following upon initial feedback by my capstone cohort:
lofi wireframes
I focused my initial wireframes on the tricks page and the recording process, as these are the main features users will interact with most.
midfi wireframes
testing
methodology
Users are given 2 tasks and are instructed to think out loud while they complete the tasks. The tasks are:
Record a video of you doing the Frontside 180
You have finally landed FS 180; what do you do now?
Record a video of you doing the Frontside 180
You have finally landed FS 180; what do you do now?
testing session one
Usabilty testing, peer feedback, and design exercises.
I went through the first usability testing with two users: one with who did not skateboard but expressed interest, and one who was a beginner. Both were assigned to compete the tasks, followed by a short discussion.
After the first round of testing, I spent two weeks iterating upon the designs from the feedback, along with the help of informal peer feedback and design exercises.
After the first round of testing, I spent two weeks iterating upon the designs from the feedback, along with the help of informal peer feedback and design exercises.
testing session two
Usability testing in-situ
A second round of testing was conducted on-site with two skateboarders who have practiced skate tricks. It was important to conduct this session in context for users to interact with the app in a skateboarding environment and provide relevant insights.
usability testing method results
(Where) can users upload existing videos?
Initially, I decided to allow users the option to upload videos instead of taking them. This was due to interview insights of skaters taking videos on their camera app. But, users expressed that the reason they would want to click on the record icon was to record, and deemed the upload button unnecessary.
From this, I realized that if users wanted to add an existing video, they would go into the trick page to do so, since theyaready have a trick in mind.
Solution: Remove 'upload video' option from "video" feature, instead adding it to videos under the trick main pages.
From this, I realized that if users wanted to add an existing video, they would go into the trick page to do so, since theyaready have a trick in mind.
Solution: Remove 'upload video' option from "video" feature, instead adding it to videos under the trick main pages.
Before
After
Mental model mismatch in the process of marking a trick as landed
"How do you mark a trick as complete?
"What's an archive?"
This section was a challenge in testing my assumptions. The original flow expected users to save to archive if they wanted to save the video they recorded. They would click 'trick landed' if they want to change the trick status to mastered. However, users didn't understand the difference between the two of the and what they meant.
Solution: I redesigned the information layout and copywriting to reduce confusion about user actions. The act of saving a video will always be the ultimate user action, but the user can also mark the video as having mastered the trick.
"What's an archive?"
This section was a challenge in testing my assumptions. The original flow expected users to save to archive if they wanted to save the video they recorded. They would click 'trick landed' if they want to change the trick status to mastered. However, users didn't understand the difference between the two of the and what they meant.
Solution: I redesigned the information layout and copywriting to reduce confusion about user actions. The act of saving a video will always be the ultimate user action, but the user can also mark the video as having mastered the trick.
version 1
version 2
version 3: final
Reprioritizing the community feature
"I overlooked the community portion; I think it would be cool to share videos"
"I'd want a dedicated community tab"
3 out of the 4 users mentioned the community feature despite the task for usability testing having nothing to do with it. The community feature was originally in the home page, only accessible if the user scrolled down past much of the personalized information.
Solution: Pulling out the community/friends tab to be a destination in the navigation bar.
"I'd want a dedicated community tab"
3 out of the 4 users mentioned the community feature despite the task for usability testing having nothing to do with it. The community feature was originally in the home page, only accessible if the user scrolled down past much of the personalized information.
Solution: Pulling out the community/friends tab to be a destination in the navigation bar.
version 1
User scrolls down in "feed' to see community posts
version 2.5
User switches tabs in "feed" to access both my tricks and community
version 3: final
User views personal details in "home" and can switch to see "friends" in the bottom nav.
Stats is combined with profile.
Stats is combined with profile.
visual system
visual research
I conducted visual research on skate culture, exploring its vibrant art history—from graffiti and stickers to the DIY ethos. This exploration is crucial to inform my design decisions.
design directions
Inspired by the rich art history of skate culture, I iterated upon designs using iconic skateboarding elements including spray paint, graffiti, action photography, and grip tape texture.
Based on user feedback and considerations of brand visibility, the version with a strong primary color of purple and character illustration stickers was selected as it offers a strong potential for brand recognition.
style guide
I illustrated and designed the stickers and part of the iconography, aiming for a welcoming and playful tone.
outcome
final screens
reflection
Balancing user needs with business considerations
During my capstone reviews with five industry designers, I was asked to propose monetization strategies. While I answered on the spot (in-app purchases, subscriptions, or increasing user engagement to potentially generate ad revenue, depending on the chosen monetization structure), I was unexpectedly tasked with defending my project's business model alongside my design decisions.
Reflecting on this and discussing with my professor, I realized that integrating business objectives into the UX design process is crucial, alongside user considerations. Aligning UX metrics with business metrics allows me to effectively demonstrate the impact of my work. I also recognized that certain business considerations have naturally influenced my design process, including competitive analyses, designing for brand recognition, and user research/testing.
During my capstone reviews with five industry designers, I was asked to propose monetization strategies. While I answered on the spot (in-app purchases, subscriptions, or increasing user engagement to potentially generate ad revenue, depending on the chosen monetization structure), I was unexpectedly tasked with defending my project's business model alongside my design decisions.
Reflecting on this and discussing with my professor, I realized that integrating business objectives into the UX design process is crucial, alongside user considerations. Aligning UX metrics with business metrics allows me to effectively demonstrate the impact of my work. I also recognized that certain business considerations have naturally influenced my design process, including competitive analyses, designing for brand recognition, and user research/testing.
As a designer, communication is crucial.
Effective communication played a massive role at every stage of my design process. Whether crafting follow-up questions for skateboarders who generously shared their time or articulating design decisions during numerous reviews, I recognized that fostering mutual understanding leads to the most productive conversations and insightful realizations.
Effective communication played a massive role at every stage of my design process. Whether crafting follow-up questions for skateboarders who generously shared their time or articulating design decisions during numerous reviews, I recognized that fostering mutual understanding leads to the most productive conversations and insightful realizations.
You've reached the end of this case study.
Thanks for reading!
Thanks for reading!