TrackStar
TrackStar
a mobile-first platform that motivates and supports self-learning journeys
a mobile-first platform that motivates and supports self-learning journeys
Role
Role
Sole UX designer
Sole UX designer
Timeline
Timeline
6 weeks
6 weeks
Tools
Tools
Figma, Figjam
Figma, Figjam
Summary
Summary
The problem
The problem
People lack the structure and community needed when learning a new skill. This demotivates them from reaching their goals as there's nothing to keep them accountable.
People lack the structure and community needed when learning a new skill. This demotivates them from reaching their goals as there's nothing to keep them accountable.
The solution
The solution
A mobile-first platform that utilizes learning journeys, badges, kudos, and community to make learning engaging and fun.
A mobile-first platform that utilizes learning journeys, badges, kudos, and community to make learning engaging and fun.
Background
The pandemic sparked a wave of individuals exploring new hobbies to fill their time, but no decent way to track their progress.
The pandemic sparked a wave of individuals exploring new hobbies to fill their time, but no decent way to track their progress.
Traditional to-do lists fall short, while complex productivity tools, like Notion, overwhelm.
Traditional to-do lists fall short, while complex productivity tools, like Notion, overwhelm.
Furthermore, the pandemic also left them craving for connection and collaboration while learning.
Furthermore, the pandemic also left them craving for connection and collaboration while learning.
These individuals are still seeking for the perfect blend of structure and social engagement, as they desire to break free from the confines of solitary growth and embrace shared achievements with their community.
These individuals are still seeking for the perfect blend of structure and social engagement, as they desire to break free from the confines of solitary growth and embrace shared achievements with their community.
How might we foster community and structure to provide users with support and motivation while learning a new skill?
How might we foster community and structure to provide users with support and motivation while learning a new skill?
User research
Understanding the users & problem space
Understanding the users & problem space
I conducted preliminary research on the topic of learning a new skill through a survey. My survey had 26 respondents.
I conducted preliminary research on the topic of learning a new skill through a survey. My survey had 26 respondents.
62%
62%
struggled with learning a new skill in the past 6 months
struggled with learning a new skill in the past 6 months
85%
85%
had trouble with learning that skill and tracking progress
had trouble with learning that skill and tracking progress
62%
62%
use some external tool to help them track their progress
use some external tool to help them track their progress
These results helped guide me on what questions I needed to ask during user interviews so that I could really understand why learning is so difficult for these individuals.
I interviewed 5 individuals who are in their early 20s with occupations from student to full-time employees. I synthesized the findings in an affinity map, which helped me recognize common feelings and issues throughout all my users.
The key themes I found were:
These results helped guide me on what questions I needed to ask during user interviews so that I could really understand why learning is so difficult for these individuals.
I interviewed 5 individuals who are in their early 20s with occupations from student to full-time employees. I synthesized the findings in an affinity map, which helped me recognize common feelings and issues throughout all my users.
The key themes I found were:
Community adds a lot of value while learning something new
Community adds a lot of value while learning something new
“People who are very open-minded, inclusive, and welcoming helps create an encouraging environment.”
“People who are very open-minded, inclusive, and welcoming helps create an encouraging environment.”
Tangibility gives a sense of accomplishment
Tangibility gives a sense of accomplishment
“When I check something off when learning, something in my brain goes off and is like yay!”
“When I check something off when learning, something in my brain goes off and is like yay!”
Lack of structure can demotivate people
Lack of structure can demotivate people
“When I want to learning something new, I can have a spurt of interest and motivation, but without structure, that interest fades.”
“When I want to learning something new, I can have a spurt of interest and motivation, but without structure, that interest fades.”
What I learned from research was that users need structure and community in their learning. Both keep them accountable while also providing the support they need to stay motivated.
I then created this user persona to help narrow down my focus on my key demographic and be a better advocate for them in my design decisions.
Busy Bee user persona
Define
Identifying key features
Identifying key features
I then started ideating different solutions that could address the HMW question through various brainstorming techniques, such as playing with opposites and analogous inspiration.
In particular, I really wanted to explore how to further incentivize people to keep learning their skill beyond listing goals and consulting with others.
I then started ideating different solutions that could address the HMW question through various brainstorming techniques, such as playing with opposites and analogous inspiration.
In particular, I really wanted to explore how to further incentivize people to keep learning their skill beyond listing goals and consulting with others.
Ideas from the brainstorming session
Ideas from the brainstorming session
From this, I was able to determine what the 3 core features would be:
From this, I was able to determine what the 3 core features would be:
Learning journey
Learning journey
This will provide users with structure where they can visibly see their progress in a gamified way, making learning more fun and engaging.
This will provide users with structure where they can visibly see their progress in a gamified way, making learning more fun and engaging.
Feed
Feed
Inspired by Strava, this helps users see what their friends have accomplished and give kudos, adding accountability within the platform.
Inspired by Strava, this helps users see what their friends have accomplished and give kudos, adding accountability within the platform.
Community forum
Community forum
This allows users to ask for advice and share valuable resources so that the learning experience is centralized and supportive.
This allows users to ask for advice and share valuable resources so that the learning experience is centralized and supportive.
These features will aid users in staying organized during their learning in a more interactive way, while also fostering a sense of community so that they don’t feel isolated in their learning experiences. With the gamification and accountability aspect, users will hopefully feel continuously motivated to keep up with their goals.
These features will aid users in staying organized during their learning in a more interactive way, while also fostering a sense of community so that they don’t feel isolated in their learning experiences. With the gamification and accountability aspect, users will hopefully feel continuously motivated to keep up with their goals.
Ideation
Making my vision come to life
Making my vision come to life
I created a user flow and task flows to help me better visualize the journey and key screens my users would interact with to take the steps needed to complete the tasks. The 3 tasks I focused on were creating a new learning journey, completing a goal in a learning journey, and posting in the community forum.
I created a user flow and task flows to help me better visualize the journey and key screens my users would interact with to take the steps needed to complete the tasks. The 3 tasks I focused on were creating a new learning journey, completing a goal in a learning journey, and posting in the community forum.
Creating new learning journey task flow
Creating new learning journey task flow
Completing a new goal in learning journey task flow
Completing a new goal in learning journey task flow
Posting in community forum flow
Posting in community forum flow
I then utilized Crazy 8’s to explore different ways the screens could be displayed in low-fidelity sketches. After getting some feedback from other designers and my PM about the information hierarchies, I translated them to mid-fidelity wireframes.
Low-fidelity sketches of the homepage and feed/community forum
Mid-fidelity wireframes
Usability testing
Learning from our users
Learning from our users
After applying the branding to the wireframes, I created a prototype to test on users. The 4 tasks I tested were:
Creating a new learning journey from profile
Adding achievement to current learning journey
Giving a friends kudos from the feed
Consulting the community for resources
The task completion rate for all 5 participants was 100% and all tasks were completed within 2-3 minutes. One participant went off-task and had to be guided back to the original task.
I collected my insights into a feedback capture grid and any insight that was echoed by multiple users is indicated by a +1 sticker.
After applying the branding to the wireframes, I created a prototype to test on users. The 4 tasks I tested were:
Creating a new learning journey from profile
Adding achievement to current learning journey
Giving a friends kudos from the feed
Consulting the community for resources
The task completion rate for all 5 participants was 100% and all tasks were completed within 2-3 minutes. One participant went off-task and had to be guided back to the original task.
I collected my insights into a feedback capture grid and any insight that was echoed by multiple users is indicated by a +1 sticker.
Usability testing feedback capture grid
Usability testing feedback capture grid
Based on the +1 stickers, the priority revisions were:
Based on the +1 stickers, the priority revisions were:
New learning journey copy
New learning journey copy
Confusion over what steps in between milestones mean when creating a new journey.
Confusion over what steps in between milestones mean when creating a new journey.
Journey visual design
Journey visual design
Adding labels or numbers would help users orient where they are in their learning journeys.
Adding labels or numbers would help users orient where they are in their learning journeys.
Groups vs. tags
Groups vs. tags
There needs to be a greater distinction between groups and tags to highlight the groups feature.
There needs to be a greater distinction between groups and tags to highlight the groups feature.
Bookmarks prominence
Bookmarks prominence
Finding bookmarks needs to be made more accessible in the profile and forum screens.
Finding bookmarks needs to be made more accessible in the profile and forum screens.
Iteration
Addressing user feedback
Addressing user feedback
Here are some before and afters of the major priority revisions I made.
Here are some before and afters of the major priority revisions I made.
1. New learning journey copy
1. New learning journey copy
To clarify what steps in between means:
To clarify what steps in between means:
Changed the copy — “steps” changed to “checkpoints” as said by a user during testing
Changed the copy — “steps” changed to “checkpoints” as said by a user during testing
1
Allowed users to choose number of checkpoints for each milestone for more customization, as suggested by a user
Allowed users to choose number of checkpoints for each milestone for more customization, as suggested by a user
2
1
2
1
2
2. Journey visual design
2. Journey visual design
To improve the visual design of the learning journey:
To improve the visual design of the learning journey:
Increased the size of the thumbnails
Increased the size of the thumbnails
1
Numbered each achievement and labeled milestones
Numbered each achievement and labeled milestones
2
Journey starts from top -> bottom instead of bottom -> top as that's more intuitive to users
Journey starts from top -> bottom instead of bottom -> top as that's more intuitive to users
3
1
2
3
1
2
3
3. Groups vs. tags
3. Groups vs. tags
To make groups more distinct from tags:
To make groups more distinct from tags:
Created a landing page for groups so it doesn't look like just another filter
Created a landing page for groups so it doesn't look like just another filter
1
Tagged each post with which group it has been posted in
Tagged each post with which group it has been posted in
2
1
2
1
2
4. Bookmarks prominence
4. Bookmarks prominence
To help bookmarks be more accessible and prominent:
To help bookmarks be more accessible and prominent:
Added "View Bookmarks" button in the Community Forum page
Added "View Bookmarks" button in the Community Forum page
1
Made bookmarks more obvious in Profile by attaching icon to the profile stats
Made bookmarks more obvious in Profile by attaching icon to the profile stats
2
1
2
1
2
Final solution
Introducing TrackStar
Introducing TrackStar
Here's a video of the prototype or click here to interact with it yourself!
Learning Journey
Learning Journey
This feature allows users to visually see their progress and keep a photo diary of their achievements. Along with streaks and badges, this provides a playful structure that will motivate users to keep moving forward.
This feature allows users to visually see their progress and keep a photo diary of their achievements. Along with streaks and badges, this provides a playful structure that will motivate users to keep moving forward.
Feed + Community Forum
Feed + Community Forum
Your feed is where users can view, give kudos, and leave comments on their friends’ latest achievements, adding another layer of accountability and support. The community forum is where users can ask for feedback, discover resources, and join groups, making learning a collaborative and encouraging experience.
Your feed is where users can view, give kudos, and leave comments on their friends’ latest achievements, adding another layer of accountability and support. The community forum is where users can ask for feedback, discover resources, and join groups, making learning a collaborative and encouraging experience.
Profile
Profile
Users can find all their learning journeys and access their friends, badges, and bookmarks in their profile. Users can edit their profile and adjust their settings here too.
Users can find all their learning journeys and access their friends, badges, and bookmarks in their profile. Users can edit their profile and adjust their settings here too.
Relfection
My takeaways
What could’ve been improved?
What could’ve been improved?
I think the jargon for this project could’ve been A/B tested in a separate session from usability testing to see what is the most intuitive to users. I also would’ve liked to consult with an engineer to see how technically feasible some of my features were, specifically the learning journey.
What did I learn?
What did I learn?
From my challenges above, I learned how to independently scope a project’s core features and be able to defend my choices with user insights. I really evaluated the why at every step to ensure that I was always meeting user needs. This project also taught me how creating the branding of a new product yourself can ultimately influence your UI choices.
Overall, it was gratifying to work on this passion project in this space. Humans are constantly looking to learn new skills for hobbies or side hustles, so I hope a platform like this will help them reach their goals.