UX/UI Research & Design
Figma, FigJam, Miro, Lookback, ChatGPT
BrainSprout
Designing an easy-to-navigate online learning app
BrainSprout is a comprehensive learning web app designed to create an engaging and inclusive learning experience for career professionals.
This is the first part of a larger project. See part 2 here.
My role
Tools
Problem
Learners struggle to achieve their goals effectively with current online tools
Online learning has the potential to help close widening educational and economical gaps, but current solutions don’t provide consistent features to keep learners engaged, particularly for long courses. Learners struggle to stay focused and have difficulty managing course load and time expectations, resulting in burnout and quitting.
Solution
Prioritize features that help lower barriers for people to achieve their goals
BrainSprout offers a comprehensive online learning system with a minimal interface that helps Learners stay focused and engaged. It provides features for people of various learning types, and strives to address challenges effectively.
Discovery
Diving deep into research
To dig past my surface-level knowledge around the topic of online learning, I dove into research and competitor analysis
Education is the most powerful weapon which you can use to change the world
In my American Dilemmas college course, we studied societal issues such as education. It was clear that education can significantly lower barriers for people, close income gaps, and help build a better society.
Widening inequality in education extends into adulthood
Image source: NYT
Research highlights increasing gaps in education inequality in K-12 students, a widening disparity that’s reflected in the participation of adult learning between low and high-skilled adults. Disadvantaged students are also more likely to lack reliable internet and digital skills, continuously leaving them further behind.
Digging deeper, I discovered online students are older than I had expected
I was surprised to find nearly half of students in U.S. higher education are over 25 and the average online student is 32 years old.
Top challenges of online learners
Motivation
Time
Technical challenges
- Reliable internet at home
- Computer and digital tools at home
- Digital skills
Note: Financial obstacles are outside of the scope of this project.
Additionally, as an avid online learner since 2014, it was only fitting that I choose online learning to pursue my UX career. However, during this time, I faced challenges and frustrations myself.
Bootcamp frustrations:
- Bootcamp course had many long lessons
- No time estimates in overview
- Difficult to track assignments and feedback
Coursera frustrations:
- Only 3 enrolled courses viewable at a time
- Forced to click through twenty-five pages to go through all my enrolled courses!
- No clear indication that saving is a paid plan only feature
Scouting the competitors revealed inconsistent and lacking solutions
I researched competitors to learn:
- What current solutions are already out there?
- Where do they not match the needs of online Learners?
- What sets one apart from another?
Competitor analysis shows that current solutions vary widely across devices and applications, even within a single company. I wanted to ensure that features stay consistent for my solution. However, due to a lack of mobile participants, I’ve focused on having comprehensive web app features for this project.
Ideation
To retain information, we need to stay engaged
I reached out to various social media groups, chat groups, and my personal network to recruit people and spoke with 9 participants to help me understand real challenges.
Interviews highlighted 3 user needs
1. Staying focused
- Participants want to stay engaged with their lessons, in order to retain information better
- Participants dread lengthy lectures and readings, preferring shorter formats.
- Participants shared tools that helped them stay focused, such as text-to-speech players.
2. Tracking progress and feedback
- Learners wanted to see they progress and feedback as they worked, to keep them motivated and organized
- Learners wanted accurate time estimates for lessons and courses, in order to manage expectations and plan their schedules
3. Searching with uncertainty
- Learners wanted to find content even when they couldn’t remember exact terminology
design
Refining 5 ideas with testing
I conducted concept and usability tests to evaluate my designs with 7 participants. The data from the user testing uncovered 5 major areas for improvement.
1. A floating audio player and simplified reading indicator helped reduce clutter
Initially, the inspiration from my original design didn’t translate well.
Concept testing the original idea
Idea 1: Audio player
Idea 2: Reading progress indicator with clicking to bookmark
Feedback:
- The audio and progress indicator took up a lot of screen real estate, distracting users from the lesson
- Participants were confused and thought the progress indicator correlated with the audio player. They were also unable to discover how to use it to bookmark
Iteration 1:
- Moved audio player to use empty white space on side
- Reduced reading indicator to a progress line
Feedback:
- Users still found the progress reading indicator confusing, the bookmarks were hard to see and the triangle marker was confusing
2. Using proximity established a closer relationship between the reading and progress indicator
Usability testing my design
Before:
- Rotated reading indicator vertically to take advantage of white space in margin
- Used pins instead of bookmarks so they could stack more easily. Took a small risk, since I wasn’t sure if users would pick up on what this would be
Continued struggles with executing the progress indicator and bookmarking feature
Feedback:
- “I saw it, but I didn’t know what it was, so I ignored it”
After:
- Moving indicator closer to text eliminated confusion
- Hovering over the indicator prompts helpful tooltip and pin to bookmark
After much thinking and pacing, I had a lightbulb 💡moment and finally found an effective solution that users liked!
Feedback:
- Users said that they thought they’d quickly understand and get used to pins for the bookmarking feature
3. Comprehensive search displays related content in the side pane
I wanted to digitally mimic the idea of dog-earing, so if a user were reading a lesson and wanted to quickly review a related concept they remembered, they could quickly search and view both the concept and the original page (like holding your place in a book while you flip through other pages for a term or reference)
Concept testing “dog-earing” idea
Before:
- Search results would open on left
- Original page users were on would continue to display on right
Feedback:
- Idea did not translate well digitally and users were confused
- Users expected right pane to display information correlating with selected search result on left
After:
- Updated the flow to display content in the right pane that correlates with the selected result in the left pane
4. Used an internal discussion feature, rather than third-party chat apps
I wasn’t sure if it would be worth the time and investment of developing an internal discussion tool when there are so many robust apps like Discord and Slack. I wanted to see if users would enjoy using an advanced third-party app.
Concept testing discussion feature options
Feedback:
- Users valued being able to ask questions directly from the lesson page without having to navigate elsewhere or download other tools
After:
- Discussion feature is internal, based on previous user feedback
5. Separated assignments page into 2 sections
Before:
- One section with all submitted and upcoming assignments
Feedback:
- Users liked the concept of having a single source to see assignments and feedback
My pilot run of usability testing sparked the idea to create an “upcoming work” section
After:
- Divided assignments page into 2 sections - one for submitted work and another for upcoming
Feedback:
- Users found the division useful
Final designs
Putting it all together in high fidelity
Subtle yet impactful interactions let users access many features without distracting screen clutter
- The main navigation disappears and lesson options bar compresses and “sticks” to the top as a user scrolls down
- Users are able to access more features under the “more options” button, such as downloading lessons
Features to help users retain information
- Audio option help users stay engaged with content, especially valuable for neurodivergent learners
- Reading progress indicator and bookmarking allow users to see how long they have left, mark important sections, and return to a lesson with ease
Time estimates and progress indicators help learners with time management and motivation
- Course overview page with detailed time estimates, including a learner’s progress
- Collapsible side navigation with time estimates so learners can easily navigate through a lesson
Assignment tracking help learners track feedback easily and stay motivated
- Single page source for assignments and feedback
Comprehensive search helps users find information with uncertainty
- Searching displays matching results from the entire course, including lesson titles, transcripts, etc.
Accessibility and Inclusivity
In addition to these solutions, I worked on including inclusive features for lessons (bionic text, audio only options, etc). Check out this case study to learn more.
Conclusion
Final thoughts and future visions
Key takeaways
- I really enjoyed working on a project that has the potential to positively impact people
- I learned the importance of adapting to new findings based on ongoing research and feedback, recognizing potential flaws in original success metrics
- For example, online completion rates of online courses are not a good measure of success, since not everyone’s goal is to complete a course, but to learn something specific
- Interactions and user flows are much more complex than I had imagined and I definitely gained an appreciation for competing products already out there!
Caveats
- Limited resources skewed my interview participants to higher-income individuals with post-secondary degrees or white-collar jobs
- Studies with more diverse socioeconomic backgrounds might alter findings on common user challenges
- Limited interview pool did not use mobile devices despite millions of users leaving reviews for various learning apps
Going forward
There are SO many potential areas to explore going forward! Including…
- How AI can help learners with scheduling and answering questions in discussion forums
- Talk to a more diverse group of people, including socioeconomically disadvantaged, to understand their unique challenges
- Mobile solutions are a must - consider inclusivity and the Next Billion Users
- How can we provide more accurate time estimates for lessons? Perhaps a feedback and rating strategy?
- Implement a nudging and scheduling feature. Nudging can help improve engagement by 30%!
