Happynest Website
(Desktop & Mobile)
A preschool website design created to communicate a joyful, warm, and trustworthy learning environment for young children. This project includes both desktop website and mobile web design, with a focus on presenting school information clearly, using child-friendly visuals, and creating a simple navigation flow for parents.
Years
2026
Role
Product Designer
Scope
Design Thinking, User Research, Wireframing, Prototyping, Usability Testing.
Project Overview
The main goal of this project was to design a landing page that works as both an informational and promotional platform for the school. The website allows parents to quickly understand the school profile, explore programs based on their child’s age, view school activities through the gallery, read parent testimonials, and take further action through Book Trial, Contact Us, or Get E-Brochure.
​
The page structure follows a natural user journey: starting with the school introduction, followed by program offerings, gallery highlights, parent testimonials, and finally a clear call-to-action to download the e-brochure. This structure helps parents absorb information gradually before deciding to take the next step.
Design Approach
For the desktop version, I designed a spacious and informative layout so that each section could be easily scanned and understood. The main navigation consists of About Us, Our Programs, Gallery, Testimoni, and Book Trial, representing the key information parents usually look for when exploring a preschool website. The program section is divided into four age-based categories: Toddler, Nursery, Kindergarten 1, and Kindergarten 2, allowing parents to quickly find the most relevant program for their child.
​
For the mobile version, the layout was adapted to fit smaller screens while maintaining the same content flow and visual identity. The information is arranged vertically to create a smooth scrolling experience. The Book Trial button remains prominent at the top, while the desktop navigation is simplified into a menu icon to keep the mobile interface clean and focused.
Key Sections
1. Hero Section
The hero section introduces Happynest as a joyful preschool and kindergarten. The combination of headline, supporting copy, children’s illustration, and the Learn More and Contact Us buttons creates a friendly yet functional first impression.
2. Our Programs
This section helps parents understand the available education levels. Each program is presented in a card format with an illustration, age range, and “Learn more” link, making the information easy to scan and understand.
3. Gallery
The gallery section showcases learning activities, creative moments, and the school environment. These visuals help build trust by allowing parents to imagine the learning experience their children may have at Happynest.
4. Testimonials
The testimonial section builds credibility through parent feedback. The quotes highlight children’s growth, caring teachers, and a fun learning environment, reinforcing the idea that Happynest is not only a school but also a supportive second home for children.
5. E-Brochure CTA
The call-to-action section, “Better Future for Your Kids,” encourages parents to submit their email and receive a free e-brochure. This section acts as the main conversion point for users who are interested in learning more about the school.
MY
ROLE
In this project, I was responsible for designing the website interface, visual direction, and responsive layout. My main focus was to create an experience that feels informative, friendly, and easy to use for the primary target audience: parents looking for an early childhood education center. I also ensured that each section had a clear purpose, whether to introduce the school, build trust, or encourage users to take action.
Outcome
The final result is a responsive landing page design with a strong visual character, clear information structure, and warm brand personality. The website helps Happynest present its school identity in a professional yet playful way. Through engaging visuals, clear content flow, and strategic call-to-action placement, the design supports the school’s promotional needs and encourages parents to explore Happynest further.