Reliable and Easily Accessible After-School Care Program For Children With Busy Parents
HappyHour, a mobile app that allows parents to enroll their children in after-school care programs and conveniently pay for the services. This platform ensures the safety, engagement, and well-being of children while providing busy parents peace of mind and better schedule management.
In this case study, I will showcase the design process of the app from concept to completion.
TIMELINE
03 Weeks
ROLE
Product Designer
TOOLS
Figma, FigJam
Many parents struggle to find reliable and convenient after-school care for their children
In this process, they face challenge in managing enrollment and payments. This creates stress and uncertainty, as they need a trustworthy solution that ensures their children’s safety and well-being while fitting seamlessly into their busy schedules
This project aims to create a mobile platform that enables parents to easily enroll their children in after-school care programs and handle payments securely, ensuring the safety, engagement, and well-being of children.
The Power Of Listening: Confirming Beliefs And Revealing Hidden Opportunities
Interviews with five parents (age 28-45) confirm my assumptions that parents face challenges with complex enrollment process and managing payments. But I also uncovered surprising insights that significantly impacted my future design decisions: parents want to be able to communicate with staff easily.
Here are the main insights I gathered after affinity mapping.
User Persona Development
Insights from user interviews revealed a lot of similarities among parents regarding theirs needs and challenges. However a particularly impactful finding was that single father often expressed fear to appear as doting dad if they frequently mention the need to be able to communicate with staff. To address this specific need and capture the experience of single father, I opted to create three personas.
User Journey Mapping
Even though I have experienced things from the users’ perspective, it was still crucial to ensure that stakeholders and team members shared a common understanding of the users’ needs, challenges, and emotions. I merged the personas’ perspectives to create a more concise tool that highlights needs and pain points.
By designing a user journey, I was able to offer a clear visual communication tool to illustrate the users’ goals and how we can achieve them.
An Overview Of The Information Architecture
The sitemap provided me with a clear view of the navigational hierarchy and core functionalities of the app, starting from the logged-out state and moving through potential user actions.
With a structured sitemap, I was able to firmly design the wireframes.
Wireframing And Prototyping
While I enjoy creating design systems and UI components as part of the design process, it’s still essential for me to step away from the computer and sketch out ideas.
The beauty of using pen and paper lies in the freedom to quickly brainstorm and iterate on concepts. Here are some sketches highlighting the “Must have” features:
Feedback & Revisions From Mid-Fi Frames
Using my sketches, I developed mid-fidelity wireframes by creating components and applying auto layout to optimize the design process. With the core functionality and layout established, the wireframes were well-suited for user testing.
In the user testing phase, I focused on the feature satisfaction, onboarding process and ease of navigation. I was able to find out that participants valued the app’s real-time updates but felt overwhelmed by the number of program options. There was also concern about the ability to add many children to one program.
Assessing the Functionality & Visual Design: Hi-Fi Prototype
To further refine the app’s design, I conducted high-fidelity user testing with 5 parents. Four of them had previously tested the mid-fidelity wireframes, providing valuable insights into the app’s evolution, while the final participant, a first-time user, offered a fresh perspective on overall usability.
Using unmoderated usability testing, I gathered detailed feedback on task completion, navigation ease, and how well the app met parents’ needs for managing after-school care and payments.
Building a Unified & Reliable Platform
To create a cohesive and trustworthy experience, I developed a design system to maintain visual consistency throughout the app. The style tile, embodying our core values, strengthened this sense of reliability. Additionally, user safety was prioritized with features such as reporting tools and warnings against sharing personal information, ensuring that parents could connect with staff and each other securely while safeguarding their children’s privacy.
Branding & Style Guide
The color palette was designed to reflect the app’s core values, emphasizing:
- Trust
- Reliability
- Community
A clean and legible typeface was selected to enhance text accessibility, especially with the implementation of a user-friendly dark theme for improved readability.
Design System
By using a consistent set of components, the design system helped:
• Ensure a cohesive visual language that aligns with the app’s core values.
• Streamline the design process by providing “pre-built” components and styles.
• Enable future scalability, laying a foundation to maintain consistency as new features are introduced.
Key Learnings and Future Improvements
Completing this project highlights the importance of a user-centered design approach. By focusing on user needs through interviews, personas, and journey mapping, I’ve seen how empathy and understanding create a product that genuinely serves its audience. The use of design systems ensured visual consistency, streamlined workflows, and reinforced brand identity, demonstrating how a structured approach simplifies complex projects. Additionally, iterative testing proved invaluable for refining features and validating decisions, showing the impact of user feedback on design clarity and usability.
Improvements For Future Projects
For future projects, I could focus on
- expanding testing to more diverse user groups, capturing a wider range of perspectives to enhance adaptability.
- simplifying user flows to make experiences even more intuitive and engaging.
- experimenting with microinteractions and animations to elevate interactivity, creating delightful user experiences.
- maintaining a feedback loop post-launch to ensure continuous improvement and keep the product aligned with evolving user needs.
This project has set a strong foundation for tackling even more ambitious designs.