.png)
Hopscotch Family App Redesign
.png)
.png)
Company Overview
Hopscotch is a teletherapy platform that connects families to pediatric behavioral healthcare.
Role
Approach
Role: UX/UI Designer
Timeline: 3 Weeks
Platform: Website, App
Usability Testing
Feature Prioritization
Heuristic Evaluation
Wireframing
Comparative Analysis
Prototyping
Tools
Figma, Adobe XD
Project Overview
Hopscotch was in need of a redesign of their resource hub that would improve on the current usability and interface design, allow them to include more media types like blogs videos, and, ebooks (guides), and collections, and increase user retention.
Heuristic Evaluation of Previous Design
Using Nielsen's Usability Heuristics, I identified the following problems with Hopscotch's current platform design:
.png)
Usability Problem Severity Scale
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released
Aesthetic and Minimalist Design
1. The dark blue background and large shapes distract users from the primary platform goals
2. Overuse of text makes the interface overwhelming to navigate
Consistency and Standards
4. Unclear where to access "hearted" resources
2. Exercises and activities don't open by clicking on the card or image, users have to click the button below
Flexibility & Efficiency of Use
3. Inability to see the full content offering
3. Inability to search for specific exercises by name
2. When browsing, users can only see 3 worksheets at a time
User Interviews
User Interview Goals:
-
Test the user's ability to complete platform tasks and identify problem areas
-
Understand the user's initial impressions of the platform. Understand how parents prioritize which content to engage with
-
Understand current solutions for finding mental health resources for kids
-
Understand what features the user feels are lacking or missing in the current design that would add value
Interview Insights
After completing user interviews and using affinity mapping to find common themes, I discovered several other trends that also needed to be addressed in the next design.
1. Parents want to be able to filter content by the child's age. This helps them feel the content is relevant for their child.
2. Parents need instructions on how/why to use the different exercises. They are very busy and don't want to have to take the time to figure out the exercises on their own.
3. There currently isn't enough content available to keep them coming back to the platform.
4. Parents are more likely to engage with content relating to what their child is currently struggling with, being able to search by topic is very important to them.
5. Parents like seeing the experts behind the content because there is so much noise in the parenting space online and on social media.
Personas
About
Erin is a 37-year-old mother of 3 children (boy-3, boy-5, girl-7) and works full-time as an accountant at a local marketing firm. She is married and lives in a house in Upstate, NY where her children attend the local private Catholic school. She has started noticing behavioral problems in her two boys, such as anger, hitting, and tantrums. She has considered therapy for her children in the past but is hesitant because of guilt, stigma, and not knowing if the behavior is severe enough for additional treatment.
Goals
Learn more about anger management and behavioral problems in kids
Help her children manage anger
Learn emotional regulation techniques to try with her child
Assess if her child's behavior is normal for their age
Motivations
Improving her childrens' anger management skills
Pain Points:
-
Finding trustworthy information on social media and Google
-
Limited free time with her kids to address the problems
-
Finding relevant content that she can listen to on the go
About
Jasmine is a 35-year-old mother with a 7-year-old daughter. She works part-time as an executive assistant in NYC, is in a relationship, and lives in an apartment in New York City. Her daughter is seeing a Hopscotch therapist for anxiety and accesses Hopscotch's resources through the therapy portal. She works part-time to spend more time with her daughter and picks her up from school every day.
Goals
Learn more about anxiety for kids 6-8
Help her child practice skills between therapy sessions to improve her progress
Motivations
Help her child manage her anxiety and feel confident around her peers
Pain Points:
-
Difficulty navigating the current Hopscotch platform
-
Not enough anxiety resources on the platform for parents
No instructions on how to use the worksheets and what the worksheets will teach her child
About
Abbey is a single mother of a 7-year-old boy in Connecticut. Her son is getting picked on at school and is showing signs of depression. Jasmine knows her child would benefit from therapy but doesn't have the money to afford sessions. She is looking for free resources that can show her how to support her child.
Goals
Find free mental health resources and activities for depression and self-esteem
Motivations
Help her son improve his depression symptoms
Teach her son resilience
Pain Points:
-
Difficulty finding free resources that engage young kids
-
Difficulty finding free tips from mental health professionals; most professionals and parent coaches she finds have paid classes and courses
-
Guilt that she is failing her child
Competitor Analysis
Child Mind Institute
Little Otter Health
I researched Hopscotch's competitors Little Otter Health and Child Mind Institute to better understand how other mental health resource hubs organize different types of media and some of their strengths and weaknesses.
Both competitors allow for users to search content at the top. They offer a preview of their content with a button to explore more. Content is categorized by concern/disorder, with Little Otter also tagging by age and allowing users to sort alphabetically. They have an overall minimalist design and use little color.
Opportunities
To give Hopscotch a competitive advantage, I want to explore improving the search functionality to allow parents to find relevant information quickly and improving on the content prioritization so that the hub doesn't feel so overwhelming to the user. I also want to highlight Hopscoth's contributors so that parents can see the professionals behind the content.
Hopscotch also has resources that kids can use and is accessible to parents that don't have a background in mental health.
.png)
Initial Sketches
I used sketches to explore potential design solutions for the new portal and to define the core functionalities. The sketches started as paper prototypes and were recreated with Adobe XD.
Resource Center/Home
Activities
Videos
Wireframes
After reviewing the sketches, I created medium-fidelity wireframes of the platform using Figma. Using these wireframes, I was able to conduct usability testing and gather crucial feedback to help us decide what to include in the final experience.
The final design needed changes to the search functionality to allow users to search for content by name, age, topic, and/or content type. I added a section to the top of the screen where Hopscotch can promote upcoming events and new content. It was important for parents to see the experts behind the content, so an expert contributors section was added as well.
Design Improvements
Card Style
One improvement I made to my design was standardizing the card style so that the design would be easier to develop. To indicate to the user the type of media, each card could be labeled with a designated text color.
Hero Carousel
A second improvement was incorporating a carousel at the top of the design so that the company could share important information or upcoming events with users.
Search Functionality
My first search functionality concept used all buttons, which was overwhelming the design and didn't allow users to search for specific content. In the new version, I added a combination of a search bar, dropdowns, and buttons.
Style Guide
Cards
.png)
Buttons
Icons
Typography
.png){kind=small}
.png){kind=small}
.png){kind=small}
.png){kind=small}
Colors
.png)
The Solution: Hopscotch Family App Redesign
.png)
.png)
.png)
Improved Navigation Experience
In the previous design, users could only search for content by anger, anxiety, family, social relationships, self-esteem, and sadness. In this redesign, users can search for content by name, content type, topic, and age. This allows users to spend less time searching for the content they need, as limited time was a concern for most of the parents I interviewed. This also gives parents more confidence that we have what they are looking for, which increases engagement and retention. Parents shared that knowing the content was for their child's age was very important to them when looking for content.
A Behavioral Health Lense
Hopscotch's goal is to become an authority in the pediatric behavioral healthcare space. Because of this, the different behavioral challenges and disorders appear at the top of the page for parents to use as filters. Parents can select one or multiple behavioral challenges or disorders and be shown related content. This shows the user that behavioral health is the focus of Hopscotch's content. The concerns can also be used to generate therapist recommendations based on the specialties of our providers. The phrase "Common Childhood Concerns" is used to decrease the stigma around having a child that is struggling and reassure parents that millions of kids go through the same challenges.
Incorporating New Media
The new resource hub needed to be able to incorporate different types of media, such as videos, articles, and worksheets. Parents can easily navigate to different content types on their home page.
Prioritizing Content
Collections are groups of media relating to a particular topic that the Editorial team releases monthly. They are shown first because they allow parents to access groups of media that can be used together to address a certain challenge they may be facing with their child. Parents shared feedback in the interview that they don't have much time, so these content collections allow them to find relevant resources quickly. The larger size of the collection card communicates to users that they hold more information. The rest of the sections are prioritized by the type of media parents have been engaging with the most. Parents can also access all of the videos in one place so that they can listen on the go.
Child-Facing Content
Hopscotch's new audio content and activities are designed for kids to use. I gave this content its own card style and incorporated some of Hopscotch's new characters and bright colors. In the future, this content will be in a "kid's corner", where kids can play with all of this content in one place and learn more about their emotions. They are currently in the "Activities" section.
Showcasing Expertise
When bringing the Ask an Expert series to the hub, it was important to use the clinicians' faces in the card so that parents could start familiarizing themselves with Hopscotch's experts or easily find the videos of clinicians they enjoy.
There is also a Hopscotch Contributors section. Users can click on a Hopscotch expert and see all of their content or follow them and get notified when they upload new content. This helps to build Hopscotch's credibility among parents as evidence-based tips.
Improved Information Architecture
Most of Hopscotch's users are not currently seeing a therapist, but the app was designed for users in therapy. This created a confusing experience for most users, as many of the menu items weren't relevant to them. The redesign is content-focused, with all of the therapy-related functions within the therapy portal of the app.
Not Seeing a Hopscotch Therapist
Seeing a Hopscotch Therapist
Goals and Tracking
With goals, parents can see daily affirmations, track their child's behavior, add to their journal, and see a breakdown of the skills their child worked on that week. This keeps parents engaged in the app and allows them to see the progress their child is making. They can also share their journal with their child's therapist or primary care doctor.
Next Steps
-
User Testing and Feedback: Conduct user testing sessions with a diverse group of parents to gather feedback on the app's design, usability, and overall user experience. Incorporate the insights and recommendations from the testing phase to refine and improve the app's interface and functionality.
-
Development of Prototype: Collaborate with developers to bring the prototype to life. Implement the necessary features, including the ability to save journal entries, track the child's progress, and access the resources. Conduct thorough testing to ensure the app works smoothly across different devices and platforms.
-
Content Creation and Refinement: Continue to develop and refine the content within the app, such as blogs, parenting guides, and activities for kids. Collaborate with mental health professionals and experts to provide valuable and evidence-based resources for parents. Regularly update the content to ensure it remains relevant and reflects the latest research and insights.
-
Integration of Behavioral Tracking: Integrate a comprehensive behavioral tracking system within the app to enable parents to monitor and record their child's behaviors and emotional states. This feature should provide insights and trends that help parents identify patterns, triggers, and progress over time.
-
Data Privacy and Security: Prioritize data privacy and security measures to ensure that user information, including journal entries and child progress, is protected and stored securely. Implement secure authentication protocols, data encryption, and compliance with relevant privacy regulations.
-
Continuous Improvement and User Feedback: Establish channels for user feedback within the app, such as in-app surveys, feedback forms, or a community forum. Regularly review user feedback and iterate on the app based on user needs and suggestions. Continuously improve the app's features, content, and overall user experience.
-
Collaboration with Mental Health Professionals: Foster collaborations with mental health professionals to incorporate their expertise and insights into the app. This can involve seeking partnerships with therapists, psychologists, or counselors who can provide input, guidance, and endorsement of the app's effectiveness.
-
Expansion of Features and Offerings: Explore opportunities to expand the app's features and offerings, such as incorporating interactive activities for children to practice emotional regulation skills or adding additional topics and resources based on user feedback and emerging trends in mental health.
What I Learned
Don't make assumptions
During the parent interviews, I received valuable feedback on the pain points of parents and how they decide what content to engage with that informed my design. Before interviewing parents, I hadn't considered the child's age being such an important part of how parents search for content. Adding a dropdown for age and tagging our content by age helped parents feel they were receiving content that was relevant for their child. Although a small change, it has a big impact on the usability for parents.