EdTech App: FlashHoops
FlashHoops is an EdTech company on a mission to empower the next generation through Sport and STEM. FlashHoops's B2C product is a mobile app designed to combine physical activity–particularly basketball–with learning to help children improve their math proficiency while staying active. The app leverages gamification to make learning math engaging and fun, aiming to address the declining math scores and rising childhood obesity rates in the U.S. The goal was to create a user-centered product that meets the needs of both children and their parents, driving higher adoption and sustained use.
Stack
Scope
Brand Design, Product Design, Project Management, Design Strategy
Problem Statement
The Challenge:
The average math proficiency among U.S. students has seen a significant decline, exacerbated by the COVID-19 pandemic. According to the National Assessment of Educational Progress (NAEP), in 2022, only 26% of 8th grade students performed at or above the NAEP Proficient level on the mathematics assessment, which was 7 percentage points lower compared to 2019. At the same time, childhood obesity rates have tripled since the 1970s, with only 20% of children meeting basic activity level recommendations. Traditional educational apps often fail to engage students effectively, leading to low adoption and retention rates. FlashHoops aims to address these issues by creating an app that is both educational and physically engaging.
Stakeholder Input:
Stakeholders emphasized the need for a platform that combines education with physical activity in a way that is engaging and motivating for children. The app needed to incorporate gamification, be secure, and capable of catering to different skill levels in both math and basketball.
User Needs:
Users needed an app that provided personalized learning experiences, adapted to their skill levels, and kept them engaged through gamification elements like rewards, badges, and social challenges. Additionally, parents required assurances around the privacy and security of their children's data.
MVP
The original MVP was developed within a very tight timeframe of two months at the end of 2023 with no user research conducted to inform the design process. I was onboarded in September 2023 and jumped right into the design process following stakeholder requests. The original design was created for investor and grant presentations, but was ultimately unsuccessful and needed a redesign. This case study highlights my process for the second version of the app after conducting more thorough user and market research to support the design process and address both user needs and stakeholder requirements.
Research
FlashHoops market size potential and industry analysis.
The global EdTech market is expected to grow at a compound annual growth rate of 13.6% from 2023 to 2030 to reach $348.41 billion by 2030.
The company has a broad target audience that needs to be considered, particularly for the mobile app.
FlashHoops' primary user base for the mobile app are kids ages 8-13 years old and their parents. Additionally, athletes and coaches are considered as a secondary audience for the app, considering their role as ambassadors and content providers.
However, the primary goal of this research is focused on our primary user base of elementary school-aged children and their parents. I conducted five in-depth interviews with parents and children to understand their behaviors, challenges, and motivations related to learning and maintaining physical activity.
Based on the research gathered, I created two primary personas to better empathize with our target audiences, and understand the factors that could lead to their decision-making and preferences when it comes to approaching learning and physical activity.
FlashHoop's direct competitors include big brands such as the NBA and Duolingo Math.
Additionally, I conducted a SWOT analysis on top educational and fitness apps, such as Duolingo Math, HomeCourt.ai, and NBA MathHoops, and analyzed their main features. Although FlashHoops' direct competitors have goals just as ambitious, they aren't quite solving the problem of declining test scores across the country, and that may be because their platforms are not engaging enough for a younger audience nor personalized for their unique needs. This analysis highlighted the importance of adaptive learning, gamification, and social features in engaging users and maintaining long-term interest.
Process
Based on our user base, both kids and parents simply want an engaging and effective way to learn and stay active.
Users shared many of their pain points and preferences around learning and physical activity. I conducted an affinity mapping exercise to synthesize common trends amongst our user-base's feedback, and I found that most users are visual and kinesthetic learners – validating our other competitive and secondary research and approach to merging learning with physical activity.
We also asked users what learning tools they've utilized to help them learn and retain new concepts and half mentioned tutors and flashcards.
Additionally, some of the most commonly mentioned priorities and features during our research include: Personalization, progress reports, challenges, achievements/rewards, security and privacy, price and accessibility.
Using a "Value vs. Effort" framework to prioritize issues that are directly aligned with both both business and user goals.
Considering our limited resources and timeframe, and based on the research findings, our solutions for the MVP needed to focus on the development of several key features for FlashHoops in the form of:
Adaptive learning paths for personalized education
A robust gamification framework to ensure engagement, and
Peer-led challenges to encourage community building.
Mapping out and validating our key features.
User and task flows were meticulously created to ensure that the app's structure was logical and user-friendly. These flows focused on critical tasks such as starting workout sessions, participating in challenges, and completing the math assessment, aligning with the primary goals of the app.
From concept to creation: user flows to wireframes.
After thoroughly mapping out and validating the main user paths, I began developing mid-fidelity wireframes to test the app’s layout and structure. These were followed by high-fidelity wireframes that incorporated the visual design elements and detailed interactions.
Adaptive learning for a personalized experience
The first key feature required understanding each user's current proficiency level in math and adapting the app's algorithm to meet their skill level. Therefore, an assessment was required at the beginning to test their knowledge.
Challenges and social engagement
Users expressed that they are motivated by social engagement and competition with peers, especially when engaging in activities that they find more challenging. By adding a challenge feature, users can engage with the curated content based on each challenge goal with the option to invite their friends to a match. Users can also win special badges when they win.
Rewards and achievements
As an extension, users also mentioned winning and gaining rewards as being another motivating factor to keep them engaged and encouraged while learning and engaging in physical activity. Therefore, adding an achievements feature where users can track their progress and view their earned rewards or badges, can continue to keep them motivated as they improve their skills!
Playful, encouraging, inclusive: developing the FlashHoops brand.
As the Founding Designer at FlashHoops, I needed to develop the company's brand presence from scratch. As a starting point, I conducted a brand workshop with the founder and the marketing team to develop FlashHoops' brand voice and visual identity.
The FlashHoops brand voice is playful, encouraging, and inclusive. We blend the excitement of sports with the intellectual challenge of STEM, creating a unique and engaging experience that appeals to our diverse audience. Our voice reflects our commitment to making learning fun, promoting physical activity, and fostering a sense of achievement and community. Our values are Creativity: we live outside of the box; community: collaboration is our superpower; confidence: we take pride in doing our homework so we know what we know; consistency: we have to show up, or it won’t happen.
The FlashHoops color palette consists of two primary colors: purple and blue, both supporting and visually representing company values. Purple represents balance, mental activity, creativity and imagination. Blue represents productivity, trust and confidence.
Our secondary and tertiary colors include a warm red and yellow. Red represents physical impact, and energy while yellow represents youthfulness, happiness and mental sharpness.
Codec Pro is a geometric sans-serif font that includes a wide range of weights, characters and sets, making it a versatile choice as FlashHoop's brand font. It is the newest incarnation of the Codec family, developed in 2017 by Francesco Canovaro, Cosimo Lorenzo Pancini and Andrea Tartarelli as a research on the subtleties and the variations on the theme of the geometric sans-serif design.
Codec Pro's geometric and balanced shape resembles math characters and makes it accessible on different screen sizes and for various use-cases.
Designing and testing the high-fidelity prototype.
After releasing the redesign and applying the changes, we've seen an increase in user engagement an retention over the past 5 months (May – Sept 2024). Below is the latest iteration of the FlashHoops app.
fEATURE 1
Math Assessment
The math assessment is the first feature that users encounter after setting up their account with FlashHoops. The goal with the feature is to assess the user's current math proficiency level and adapt their learning experience and difficulty level to suit their needs. This helps set the baseline by customizing and personalizing each user's experience to fit their unique needs, and challenge them to advance their skills further.
Feature 2
D1, Pro and ex-Pro Coaches
The FlashCrew coaches are the our FlashHoops Ambassadors; they are the main attraction of our platform. Our coaches comprise of current D1 basketball players, current pros and retired pros. Users can select the coach they would like to work with according to their preferences. The goal is to continue expanding and including high-level professionals to encourage and motivate younger kids to stay engaged and motivated.
Feature 3
Interactive Workout Sessions
Users can select individual sessions by any of the coaches, which will also be adapted to their math proficiency level. Users can, however, also customize each session's settings. The settings include math type, math problem length/timer (how long each math problem is visible on the screen), and difficulty level.
The interactive sessions are the core feature where users engage with the learning material. The sessions require users to practice their ball-handling skills by following the coaches, while also staying focused on the math problems on the screen to ensure they are answering them in time. The sessions utilize voice recognition and math literacy tracking so that uses can say the answers out loud without needing to use their hands, and to track their performance!
Feature 4
Badges & Achievements
According to user research, users feel motivated when incentivized by rewards or achievements. The achievements feature allows users to collect a series of special badges based on the number of sessions they complete, their proficiency in each math type, and challenges they win against peers. Users can view their collection of badges in the Achievements tab and can see progress toward their other badges.
Feature 5
Peer Challenges
Users also mentioned that competition and that positive social emotional associations encourage them to stay motivated when engaging in activities that are more challenging or unpleasant, such as physical activity or learning math!
The Challenges feature allows users to invite their peers to compete in skill-based math challenges, and are rewarded with special challenge-specific badges.
Testing & Iteration
Putting it to the test.
Usability tests were conducted with four participants, focusing on core tasks such as starting a session, joining challenges, and completing the math assessment. The testing phase provided valuable insights into user behavior and areas that required improvement. Below are highlights from the usability test results, and improved iterations of the UI.
Home screen
Reorganized homepage content and increased user portal visibility
During usability testing, when asked to start a session, participants were unsure of where to go to do that. The original home screen prioritized the Coaches and Featured sections based on stakeholder needs, and had the sessions carousel further down on the page.
None of the participants explored the other menu options to look for the sessions, and instead browsed the homepage to find where they can start the task. In order to make it easier for new users to find a starting point, I moved the "Start a Session" section higher up on the home screen.
Additionally, when asked to navigate to their user portal, 2/4 users had difficulty finding it in the heading. For the second iteration, I increased the contrast of the user icon against the purple pill to help it stand out.
User Portal
Enhanced User Portal
In addition to having difficulty finding the user portal, users also found difficulty accessing their challenges page, which includes challenge history, pending invitations, active challenges and other available challenges. In the initial design, the user portal included a preview of the user's achievements and active challenges. In order to access their challenges, users would need to click on "view all".
The first iteration of the interaction allowed the user to view all of their active challenges on a new page, but later was expanded to include pending invitations and challenge history. Since the feature expanded to include additional content, the feature needed a redesign to incorporate a better pathway to access the new additions.
The second iteration included adding a tab navigation component to allow users to switch between their Challenges and Progress directly within the user portal, without needing to navigate to another page, while still keeping the content contained and organized.
Increased user engagement and adoption
After releasing the redesign and applying the changes, we've seen an increase in user engagement an retention over the past 5 months (May – Sept 2024). Below is the latest iteration of the FlashHoops app.
Interact with Prototype
Takeaways and learnings
When I first began work with FlashHoops, the direction for the mobile app was set by the founder and CEO with little to no user research. Once we had some resources and time to conduct both qualitative and quantitative user research, we completely shifted the direction of the app, which is the core product.
The FlashHoops app represents a pioneering approach in the EdTech industry, combining the benefits of physical activity with academic learning in a way that is engaging, motivating, and effective. This project highlights the impact that thoughtful, user-centered design can have on creating products that not only meet business goals but also make a meaningful difference in users' lives.
This process reinforced how crucial user research is in creating impactful and thoughtful products. Even with considering the challenges that come with creating a new product and establishing a startup, it is highly important to center user needs at all fronts to ensure that we're solving user problems successfully, and for the longevity and success of the business.
