Hopscotch Parenting Guide Design
.png)
Project Overview
Hopscotch's Editorial team recognized the need for a well-designed landing page to effectively promote and present their monthly parenting guides. The landing page would serve as a gateway for parents to access in-depth resources on child mental health topics, providing valuable information and support.
Role
Approach
Role: UX/UI Designer
Timeline: 1 week
Wireframing
High-fidelity UI
Competitive Analysis
Alignment and Grid
Prototyping
Tools
Figma
Company Overview
Hopscotch is a teletherapy platform that connects families to pediatric behavioral healthcare and provides free mental health resources for parents and kids.
User Interviews
To better understand our target audience, our company did structured user interviews with parents to gain insights into their needs, challenges, and preferences when seeking parenting guidance and resources.
Sample Questions:
1. Can you tell me about your experience with accessing parenting guides or resources related to child mental health?
2. What are the biggest challenges or frustrations you face when seeking information or support on child mental health topics?
3. How do you typically find parenting guides or resources? What sources do you rely on?
4. Can you describe a specific situation where you felt the need for more comprehensive or reliable parenting guides on child mental health topics?
5. What factors are important to you when evaluating the credibility and trustworthiness of a parenting guide or resource?
6. How do you prefer to consume parenting guides? Do you have any preferences for specific formats (e.g., articles, videos, interactive content)?
7. What features or elements would you expect to see on a landing page for parenting guides to make it engaging and relevant to your needs?
8. How do you currently manage your child's mental health and well-being? Are there any specific challenges you face in this area?
9. Can you share any experiences or frustrations you've encountered when trying to engage your child in virtual activities or therapy sessions?
10. How important is it for you to have resources that cater to specific child mental health topics? Can you provide examples of topics that you would find valuable?
11. What information or support do you believe is lacking in existing parenting guides or resources on child mental health?
12. How do you envision a well-designed landing page for parenting guides assisting you in accessing relevant resources and supporting your child's mental health?
Our insights were compiled during a brainstorming session to identify motivations, pain points, and other considerations.
I also analyzed existing data on user behavior, engagement, and content consumption to understand how parents interact with Hopscotch's resources and identify areas for improvement.
Persona
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.
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
Learning how to communicate and build trust with her children to identify underlying stressors
Pain Points:
-
Finding trustworthy information on social media and Google
-
Limited free time with her kids to address behavioral problems
-
Finding relevant content that she can listen to on the go
-
Finding activities to help her child with emotional regulation skills
Competitive Analysis
I conducted a competitive analysis of parenting guides to understand best practices, identify industry trends, and gain inspiration for the landing page design.
Opportunities for Hopscotch:
Visual Appeal
Utilize an engaging and visually appealing design with high-quality imagery, appropriate color schemes, and typography to create an inviting and trustworthy impression. Use Hopscotch's color brand and characters to differentiate from current guides.
Finding Resources
Ensure easy navigation, logical content organization, and clear headings to help parents quickly find and access the information they need.
Animations and Gifs
By selectively incorporating gifs and , Hopscoth's guide can be more engaging and feel more modern to users. This works well with the brand since Hospcotch also creates interactive and engaging activities for kids and aims to be the modern solution to pediatric mental healthcare.
Design Process
I collaborated with the Editorial team to determine the key content and structure of the landing page, ensuring it aligns with the goals of providing valuable resources and engaging parents.
Key Content:
-
Guide Name & Description
-
Informational Video
-
Audio Activity
-
PDF Activity
-
Blog Post
I developed wireframes and prototypes to visualize the layout, content hierarchy, and user flow of the landing page.
Paper Prototype
Wireframe
Hero Image
Design Improvements
Designing for Accessibility
The original button design had color combinations that were not accessible. Because of this, the text color changed from white to dark blue.
Before
After
Contributors Section
Our interviews with parents show that one of their pain points was finding information from professionals. In the final design, I added a contributors section so that parents can see the behavioral health professionals behind the content, become familiar with Hopscoth's contributors, and access all of their past content.
Adding CTA's
To help Hopscotch collect leads and increase consultation requests, I added CTA's at the bottom of the page.
Style Guide
Cards
Buttons
.png){kind=small}
Colors
Typography
Final UI Design
Large Screens
( >1400p)
Desktop
( 992-1400p)
Tablet
(576p)
Mobile
(<576p)
.png)
.png)
Figma Prototype
Company Impact
The implementation of the new landing page design for Hopscotch's parenting guides resulted in several positive outcomes:
Increased Engagement
The visually appealing and user-friendly design attracted more parents to explore the parenting guides. The landing page and associated content exceeded Hopscotch's goal for website traffic and content views.
Improved User Experience
Parents found it easier to access relevant resources and navigate the landing page, enhancing their overall experience and satisfaction.
Enhanced Trust and Credibility
The professional and visually appealing design instilled confidence in parents, establishing Hopscotch as a reliable source of information and support.
Greater Awareness and Reach: The well-designed landing page helped attract new visitors, expanding Hopscotch's audience and increasing the reach of their mission to support child mental health.
Next Steps
User Testing
One next step would be to test the page with a representative set of parents to see their ability to find information, understand their perceptions based on the landing page, evaluate their general experience, and collect suggestions for improvement.
Analyzing Data
I worked with the senior leadership to outline KPIs to determine the success of the landing page and areas for improvement. Using GA, I will analyze data such as average session time, clicks, conversions, and devices used to inform future design decisions and how content is featured.
Mental Health App
Hopscotch also has an app for parents with resources and the therapy portal. How can this experience be improved in a logged-in state? See my designs for the Hopscotch App here.
What I Learned
Responsive Design
This project required me to create designs for multiple screen sizes. I learned how to translate designs to smaller screens so that they would have the best experience, regardless of device.
Designing for Accessibility
For this project, I used a web accessibility checker and identified problems with the colors used for the buttons and button text. This will increase the readability of the page for more users.
Handing Off to Developers
This was the first page I designed for Hopscotch that needed development work from our software engineers. I marked up the page and added notes in Figma to help with the development process.
