Flourish
PROJECT TYPE
Self-initiated
ROLE
UX design, UI design, research, illustration
DESIGN & RESERARCH TOOLS
Figma, Procreate, Maze
Designing an app from scratch to help self-learners grow in their new skills.
EXPLORE PROTOTYPE
When I first learned about UX design, it was love at the first description I read. Empathizing with users? Sounds interesting! Designing interfaces that are both visually appealing and useful? Wow, that sounds fun! Problem solving and creating products that bring joy to people? This is amazing, I want to learn more!
But then I soon hit a wall. I quickly learned there were so many different skills within UX design, from visual design to user research to information architecture… Where should I start and what was the best method to teach myself? It felt like there was a sea of endless knowledge to explore, but I still needed to learn to swim. Needless to say, I was overwhelmed.
Certainly, I was not the first person to self-learn a skill. I was curious…
“How did other people teach themselves new skills? Do they also struggle with this?”
Research
Secondary Research
First, I wanted to challenge my assumption that most people wanted to learn new skills.
of American adults are personal learners
According to a 2016 study with over 2700 participants, a majority of American adults consider themselves personal learners - they have participated in at least one activity in the past 12 months to advance their knowledge. (source)
For those who are personal learners, they reported several benefits to personal learning, including...
Feeling more capable or well-rounded
Seeing new perspectives about their life
Making new friends
Feeling more connected to their community
Getting more involved in volunteer opportunities
Even though a majority of us want to learn a new skill and there are benefits in doing so,
80%
of people
didn't try or failed
to learn their new skill
(source)
Almost all of us have a desire to learn new skills, but few of us accomplish our aspirations.
“What is causing this disconnect between our desire to learn and actually accomplishing it?”
Primary Research
I conducted my our research to dive deeper into what prevents people from self-learning new skills
Survey
  • 23 participants
  • Age Range: 23 - 54
  • Education: High School - Master's
  • Gender Identity: 13 male, 9 female, 1 agender
  • Large variety in skills participants were pursuing (including chess, pickleball, coding, guitar, cooking)

Participants were asked what their ideal amount of time to spend on their skill was vs the actual amount of time they spend

Ideal Time
Actual Time
People are unable to spend as much time as they would like on their skills. Although we cannot increase the hours in a day...
How can we make the time people do have to spend on their skills as rewarding as possible?

People's Learning Strategies

In order to enrich the time people do have to learn, we need to know what methods of learning are effective.
A majority of people teach themselves by watching videos and want to apply what they learned into hands on activities, such as practicing the fundaments and completing projects

What Helps...

What Hurts...

Having a plan to follow
(91% of participants)
Fear of being judged by others
(87% of participants)
Learning from people with a similar background
(87% of participants)
Only wanted to learn when motivated
(78% of participants)
Displaying their new skills to others
(78% of participants)
Struggle to determine which resources to use
(78% of participants)
How can we provide a motivating and judgement-free planning tool for self-learners that can streamline finding proper resources and activities in their skill?

Emotions in Learning

Participants were asked what emotions they felt at different stages of the learning process
Positive emotions towards the skill dip during intermediate learning. This is likely from self-learners plateauing in their skill level.
Feeling overwhelmed and intimidated decrease with improvement in skill level. Frustrations peak at intermediate learning; possible additional evidence of struggles in plateauing skill level.
How can we maintain positive emotions during intermediate learning, while reducing negative emotions when starting a skill?
To dive deeper into pain points and learning methods, I had in depth discussions with several self-learners.
User Interviews
  • 5 participants
  • Age Range: 24 - 35
  • Gender Identity: 3 male and 2 female
  • All are self-learning several skills in their spare time

What are the biggest challenges when self-learning a skill?

There are so many resources to choose from, it's overwhelming
Figuring out which path to take when starting a new skill
It can be hard to find drive and motivation, especially for skills I am forced to learn
Some skills feel inaccessible or have a lot of initial investment before being able to tell if I like the skill

What learning methods help you in learning a skill?

Gamifying the learning process or making learning the skill more fun
Setting milestones for me to achieve in that skill keeps me motivated
Making connections between the skills I already have to the ones I am currently learning
If a topic is too advance, I will set it aside and come back to it later
Applying the skill I learned into practice or a real world situation

What makes you want to continue learning a skill?

Seeing my progress and how far I have come makes me want to continue learning
Displaying and demonstrating my skills to others can help motivate me to continue
Seeing others succeed in that skill inspires me to advance in skill level
Coming back to the skill after having a new strategy or method can help me overcome plateauing in skill level
Applying the skill I learned into practice or a real world situation

What makes you stop learning a skill?

I am not improving to the skill level I want to be and feel I have hit a plateau
I stopped learning because of too much judgment from myself and others
I rather learn a different skill that I am more interested in

What has helped you advance in your current skill?

Others encouraging me in my skill has given me motivation to continue learning
Learning from experts helps me advance my skill to the next level
Seeing how someone with a similar background as me learn the skill has helped my understanding
To see the full analysis of the user interviews, view FigJam file for the affinity map here
From secondary research, survey, and user interviews, many valuable patterns into the self learning process formed.
These common patterns were largely dependent on at what point in the learning journey the person is on (beginner, intermediate, or mastering) and if the person is learning for fun or need
User Personas
To better empathize with these patterns self-learners experienced, 3 user personas were created:

The Problem

Self-learners tend to struggle the most when either...
  • Starting a new skill
  • Plateauing in skill level
  • Having to learn a skill out a necessity
For those starting a skill, how might we...
... provide them a learning plan early on to reduce initial frictions and guide them to useful resources without feeling overwhelmed?
For those plateauing in skill level, how might we...
... help them reflect on their accomplished milestones and provide them with new strategies/methods for their skill?
For those learning a skill out of necessity, how might we...
... help them stay motivated to continue learning while staying on track to meet their goals?
Was there already a tool that addressed these self-learners pain points?
After some competitive analysis (FigJam file link here), there was a clear gap in tools for self-learners.
There currently is not a tool for self-learners where they can organize their own plan for learning while viewing their progress in a motivating way.
Ideation
After hearing research participants mention the benefits of gamification in learning, I explored common gameplay features in video games for inspiration.

Skill Trees

  • Skills tree are often used in video games to display character progress, while giving the players options for customization in their playthrough.
  • Players can reflect on what they accomplished in the skill tree, while also seeing what the next steps in the tree are.
  • Using skill trees to represent real-life skills can gamify the self-learning process, providing a useful planning and organization tool.

To bring more joy and motivation to the user, I wanted to make the skill trees visually appealing.

I decided to make the skill trees resemble actual trees, where a…

  • Skill Tree = Skill the user is learning
  • Branch = Subtopic in that skill
  • Flower = Completed task in that skill
  • Bud = Incomplete task in that skill
I did not want to assume what users needed, so I based the different features of the app based on the primary research I conducted.

Research Finding

Product Feature

Having a learning plan and tracking progress greatly benefits self-learners.
Creating a Skill Tree
Beginning a new skill can be overwhelming and intimidating due to the uncertainty of where to start.
Learning from skill trees uploaded by others
People are more likely to continue a skill if they are encouraged by friends.
Platform to send encouragements to friends
Learning from experts and individuals with similar backgrounds can aid the learning process
Search for skill trees and resources recommended by experts and similar background individuals
Completing milestones boosts motivation to continue learning.
Milestone flowers on skill tree
To see all the product features and their research justifications, see the product feature roadmap (Figma file here)
Considerations & Viability
To determine if a skill tree app for self-learning was worth pursuing, I wanted to access the benefits and challenges it could have for users

Benefits

Challenges

  • Easy to see skill progress and upcoming steps
  • Gives a sense of accomplishment and joy as the tree blooms (visually appealing gamification)
  • Skill trees offer linear progression for focused learning, while allowing flexibility in branches to explore subtopics as new aspects of the skill are discovered
  • Not an established organizational tool outside of the gaming community
  • Viewpoints and navigation of the skill tree need to understandable and easy to use on mobile
  • New terminology (branch, bud, flower) can be confusing for first time users

Many of these challenges can be overcome with clear communication with the users and a well designed UI. The benefits had out weighed the challenges, so I decided to pursue the idea. However, I kept these challenges in mind as I continued to design the app.

After determining the benefits outweighed the challenges for users, I also wanted to assess the business viability of this app idea

Methods of Income

Freemium business model
  • Users have access to many of the app features for free (creating skill trees, discovering existing skill trees/resources, encouraging friends)
  • Premium plans would allow users to use skill trees/resources from experts and have further customization of theming in their skill trees, encouragements, etc.
Sponsorships with companies
  • Companies can sponsor their products to be shown when a specific skill is searched
  • Still provides value to users by having these sponsorship be special discounts for app users
Will NOT use ads
  • Ads will distract users from completing their skills, which is the purpose of the app
Upon confirming the app's viability for users and as a business, I began to design the structure of the app.
Information Architecture
Site Map
Main sections of the app include:
Discovery
Users can find new resources and skill trees to learn from
Dashboard
Quick views of progress in skills, encouragements from friends, and schedule
My Skills
Skill trees and skills users are learning
Friends
Can find profiles of friends and send them encouragements
To view the site map in more detail, see the site map Figma file here
User Flows
To test the app concept, the first user flows involved creating a skill tree and discovering a skill tree.
If users struggle or don’t find value in these tasks, then the app would not be successful and would be reconsidered
To see closer details, see User Flow Figjam link here.
Task Flows
The happy path task flows are derived from the "Creating a Skill Tree" and "Discovering an Existing Skill Tree" user flows.
Low Fidelity Wireframes

I incorporated quick navigation buttons to enhance user navigation within the skill tree. These buttons allow users to move to the next flower/bud or jump to another branch.

To ensure users have access to the information in each flower/bud while retaining their understanding of their position in the skill tree, an expandable bottom sheet was integrated into the design.

When designing the skill tree, it was crucial to ensure that users can easily comprehend the order of the buds and the overall branch structure.

To achieve this, I adopted a linear flow chart structure as the user interface for skill tree creation, as it offers simplicity in editing and enhances clarity

In Discovery, users can either discover new skill to learn or find resources for skills they are currently learning.

To encourage the conversion of free accounts to premium accounts, I integrated an option to learn from experts on this screen, as access to experts is exclusively available to premium accounts.

To manage potentially content-heavy search results in Discovery, I utilized cards in the user interface to make the content easily scannable.

Branding & Visuals

Logos

I wanted to play into the analogy between seeing one's skill tree grow in tandem with their personal growth. I selected the name "Flourish" for the app, which embodies the idea of both the tree and the user thriving and flourishing as they progress in their skills.

Taking inspiration from the flower and tree theme, I designed the logo as a flower with its outlines forming the shape of a tree.

Desktop Logo
Tablet Logo
Mobile Logo

Colors

To create an earthy and soothing UI, I opted for a color scheme that includes beiges for neutrals, greens for the primary, and muted pinks for the secondary.

The primary research indicated that learning a new skill can be overwhelming or intimidating, so I chose colors that evoke a calming and approachable atmosphere.

Neutrals
Primary
Secondary

Typography

As this is an app primarily viewed on mobile devices, I opted for sans serif fonts to enhance readability. The selected fonts have a subtle curve to provide an organic feel, aligning with the tree-inspired theme.

Illustrations

To make the flowers and buds on the skill tree more noticeable and clickable, bold dark lines were used for their outlines.

Additionally, the tree branches were given slight texturing to add depth without drawing excessive attention away from the flowers.

Components

Throughout the UI, cards were employed to present information in a digestible manner. These cards were designed using a 4-point grid and auto layout to ensure consistency and reusability across the interface.

All components in the UI can be viewed in the UI kit (Figma link for UI kit here)
Initial Prototype
Prototype & High Fidelity Wireframes

Skill Tree for Chess

I wanted it to feel like an accomplishment whenever a task was completed, so I designed the buds to bloom into flowers upon task completion.

Users can quickly find their notes and saved resources with the "Resources" and "Entries" tabs without having to navigate through the skill tree.

Creating a Skill Tree Flow

To make the process undemanding on the user, each screen presents only a single decision to make (such as skill title or tree creation method) before progressing to the skill tree flow chart.

The skill tree flow chart allows users to easily visualize the structure of the skill tree they are creating.

Discovering an Existing Skill Tree

The Discovery page has sections for both suggested skills and resources for enhancing their current skills. User can search for skills, resources, people, etc.

By using cards for Discovery search results, users can scan through the different resources easily. To aid users in finding the correct resources for their learning, users can filter by skill level and further advance filters.

Testing
Moderated Usability Test
  • 5 participants
  • Age Range: 23 - 28
  • Gender Identity: 3 male, 2 female
  • Participants were asked to compete the 2 task flows (Creating a Skill Tree and Discovering an Existing Skill Tree) and bloom a flower on a skill tree

Goals of Usability Test

  1. Determine if users find value in the product and/or meets their learning needs
  2. Identity any obstacles users encounter when Creating a Skill Tree
  3. Uncover any challenges users face when Discovering an Existing Skill Tree
  4. Learn if design of skill tree is easy to navigate through and use

Usability Test Results

What worked well...

Overall concept of the app, users felt it was useful and unique
(5/5 participants)
Skill trees displayed personal progress well
(4/5 participants)
Artwork of the skill trees and color scheme was visually appealing
(4/5 participants)

What could improve...

Skill tree navigation
(4/5 participants struggled with)
Content switcher on filter screen in Discovery is confusing
(4/5 participants struggled with)
Differentiation of skill trees you download from Discovery vs skill tree you actively learn from
(2/5 participants struggled with)
For full analysis of usability test results, see Figjam link for Feedback Grid here.
Iteration
Iterations

Improvements to the My Skills screen and skill trees include...

Before

After

Revision:
Added "My Skill Tree" label active skills and "Refence Tree" label for downloaded skill trees from Discovery
‍
Reasoning:
Users were confused by the difference between their personal skill trees and the ones they downloaded
Revision:
Cheer (encouragements) icon on upper left changed form a heart to a celebration icon
Reasoning:
Users thought that the heart icon was for liked resources, not cheers
Revision:
Navigation in skill tree was changed to have flower, branch, and whole tree view point
Reasoning:
Upcoming and previous step buttons in original design was unclear for users
Revision:
Added a background glow behind selected flower and the flower title to top bar with arrows to move to next flower
Reasoning:
Users were unsure which flower was selected and needed easier navigation
Revision:
Implemented a back arrow for easy navigation back to '"My Skills" from individual skill pages, and highlighted the icon of the currently active page in the bottom navigation bar
Reasoning:
It was unclear to users where they were in the app, especially when in an individual skill's page

Improvements to the Creating a Skill Tree flow include...

Before

After

Revision:
Added a the 6 dot draggable icon to the steps of skill tree flow diagram
Reasoning:
Users did not know that the steps would be draggable

Improvements to the Discovering an Existing Skill Tree flow include...

Before

After

Revision:
In filters screen, search results has reference trees and resources together. Filters specific to reference trees or resources has its own section lower in the filters screen
Reasoning:
It was not intuitive for users to the content switcher at the top to filter search results for resources
Revision:
Skill trees found from Discovery were renamed to "Reference Trees"

‍
Reasoning:
Users were confused at the difference between skill trees they were actively learning from and ones they could get from Discovery
Designing Remaining Screens
After testing of the initial prototype testing, it was confirmed that the Flourish app concept effectively addressed user needs and delivered significant value. Therefore, the remaining screens were designed to fulfill the end-to-end vision of the app.
Prototype & High Fidelity Wireframes

Sign Up and Onboarding Flow

Since Flourish uses an unfamiliar learning tool (skill trees) and new terminology (flower, bud, etc.), it is important that the app has a thorough onboarding process.

To give an early introduction to the process of blooming a bud, the onboarding procedure culminates with the blossoming of the onboarding bud itself. Users can further enrich their understanding of the app through the "Flourish app" skill tree, which is provided within their "My Skills" page.

Offers from Companies

One method Flourish generates revenue is through sponsorships from external companies. Maintaining Flourish's commitment to delivering value to users, these sponsorships take the form of special offers, where users can save money skill-related products.

Dashboard

Upon launching the app, users are presented with the Dashboard. It provides a comprehensive view of skill progress, offers quick access to saved resources, and displays cheers sent by friends.

Cards are used throughout the Dashboard to reduce cognitive load on users.

Profile

The user's profile interface closely resembles that of a friend's profile, which displays their garden, cheers, and progress. A premium membership offers an added advantage of the ability to design and customize their garden.

Unmoderated Usability Test
  • 5 participants
  • Age Range: 22 - 29
  • Gender Identity: 3 male, 2 female
  • Unmoderated test (Maze) to replicate the user's initial onboarding experience upon launching the app
Goals of Usability Test
  1. Determine if users understand the concept of “Flourish” and skill trees just from the onboarding process alone
  2. Identify areas to clarify the explanation of app in onboarding process
  3. Learn if the friends and cheer features aids users' learning, or if it is too distracting for users

Usability Test Results

Onboarding was Rated Well
Onboarding process was rated 9.2 average out of 10
After completing the onboarding process, all participants (100%) found the onboarding process an appropriate length and comprehended the concepts of a skill tree, branch, and flower

Positive Responses for Friend Features and Overall App

Would you use the "My Friends" features?

Absolutely. It really brings to life what my coach once told me -- every day you're not practicing, someone else in your field is. Seeing your friends works hard will be added motivation
Yes; provides a more rewarding and encouraging experience for the users at both ends
I believe I would, as it would encourage me to either cheer on my friends on their skill development journey, or use it to encourage myself to keep working to improve

Thoughts about the overall app?

I thought this app was very cute. To track process of learning new skills/hobbies, I think this app is perfect for that. Pretty easy to use, very visually pleasing, and useful. 10/10
Overall though this is a really organized and well-thought out experience that would definitely help with motivation for learning and developing skills
I like the app interface — it is a BIG app, but it still maintains simplicity
Overall, the app is fairly well organized and allows for a number of ways for one to improve their skills. I personally liked the material offered to help one learn, as well as the feature to look at your friend's progress.
Honestly would be incredible for me as a coach and it could be a fun way to track people's practice
Since the feedback from this usability test was positive, no iterations were made afterwards.
Final Prototype

To explore the click through interactive prototype, see Figma link here

Reflection & Next Steps
Reflecting on this project, there are some parts I would have made different choices. One key change would be maintaining a more consistent type system. While working on the current UI, I ended up altering the font as I progressed through designing the various components and screens. This led to a lack of consistency in the fonts used throughout the UI elements. Had I adhered to a consistent type system, the UI's overall coherence would have improved and the app's future development would be notably smoother.
Another aspect in this project I'd pay closer attention to is the accessibility. For instance, the color palette uses pink and green which could pose challenges for users with red-green color blindness. Additionally, certain minor elements, like the skill level indicator on Discovery resource cards, could be better designed for readability. Exploring an alternative typeface for body text could also help readability, since the current one can pose readability challenges at smaller sizes.
Next steps for this project are designing the flow for uploading a skill tree to Discovery and starting app development.
Google Maps: Midpoint
Sareta Designs
emily.g.sukenik@gmail.com