PRESCHOOL WEBSITE
Empowering one of the best preschools in Pleasanton with a cutting-edge website that accurately reflects their services and attracts parents.
My Role
Website Designer
The Team
An Individual Project
Duration
5 weeks
Tools
Figma
Illustrator
Photoshop
Elementor
Wordpress
Challenges
-
Improve Information Architecture for Easy Navigation
-
Content Enrichment
-
Improve UI Appearance
-
Branding
Design Process
Problem Statement
The current design and style of the website do not effectively capture the essence of a Montessori preschool, causing a disconnect between PBMP's digital presence and its actual professional offerings.
How can we craft a renewed digital voice that will instill confidence in prospective parents and inspire visitors to explore the preschool further?
Heuristic Evaluation
To initiate a transformative solution, I delved into the world of young children. I sought to understand their educational and care needs at school, aiming to grasp the style that would best resonate with their culture. I also discussed with the school director the features and design elements that would align with their business goals while meeting the users' needs.
Insight #1
Navigation Confusion
-
Poor button clarity
-
Confused information displayed upon button clicks.
Insight #2
Content Issues
Unstructured information.
-
In About Us page. Information with 8 categories randomly displayed with no hierarchy.
-
In program page, images displayed near each class description were not correctly presented.
Insufficient content
-
Information about the school programs were not presented well-round, as its the most important information that attracts potential parents.
-
Besides program, the overall content shown were thin and sparse.
Duplicated information
-
The description of the business was displayed multiple times at the homepage and subpages.
Insight #3
Inconsistency
Upon reviewing the website, consistency, or rather the lack of it, emerges as a glaring issue that needs rectification.
-
The website lacks consistency in page layout, as the presentation for each subpage varies in terms of design, formatting, and overall structure.
-
The website displays a variety of colors, fonts, and image sizes, which distract readers from the primary message the school aims to communicate.
Logo
Font
Colors
Buttons
Home About Us Programs Contact Us
*All elements were found in one page of the website
Competitive Analysis
I searched through a couple of websites of well-known preschools around SF bay area to get a sense of consistent industry themes.
Insight #1
Content
During research, most of the competitor websites show a variety of content that shows different aspects of the school.
Resolution:
I designed a short online questionnaire to find the contents that matters the most to users. A 10-user interview were conducted about how and what they will use for the website.
After gathering the information, a further discussion with clients to determine what contents need to be added to the current website.
Insight #2
Imagery Representation
The images most of the competitors' websites used show a group of students focused on interactions between students theirselves or students and teachers, which create a more real school atmosphere. However, the current design contained images only showing single student or empty classroom.
Resolution:
Although Montessori methods focus on individual growth of each child, a combination of individual development and group pictures would better creating a vivid school environment.
Insight #3
Color Palette
Most of the competitors have a light and bright color palette, especially for preschool programs. Plus, most websites have a while background color which makes the content image more vivid.
Resolution:
A new more bright color palette need to be created and align with the business brand and goals.
Design Revolution
Content Enrichment
During research, the 4 main information that potential users care the most is tuition (90%), programs (70%), school events (50%) and staff Info (40%). Besides, 70% of the users used other social media for school reviews before enrolling.
I presented the results to the client and they are so ready to show more on the new website except tuition, since they want to keep it away from their competitors.
Content added to the new website:
1. Program details and curriculum focus
2. School events
3. Core Staff Info
4. Parent reviews
5. Contact form and external link for sister schools
Improved Information Architecture
Main Changes:
The home page is presented with most important information. Excessive information removed.
Informational content were categorized and reorganized within each page.
Programs at each class level were separated in different pages for easy navigation.
Before
After
New added
New Prototype Test
Then I started Mid-fi prototype some of the main pages in Figma to re-structure the website pages and layouts. 3 users tested the prototype and here are some main changes.
Change #1
Program Section Location
All users were hopping to see program information at first sight, since that's what they care the most.
Result:
Moving program section up
Change #2
Program Section Imagery and Links
The current pictures displayed above class links made users hard to associate the image with their programs.
Result:
Instead of showing the image alone, embedded image with their program links.
Change #3
Trust on Testimonial
There is a trust issue of presenting testimonial on website as the users would doubt about the truth of the review.
Result:
Add a link to a more public trusted social media helps. (such as yelp)
Change #4
Program Detail Page Menus
The submenus in prototype makes no clue on what page the user are currently at under program. Besides, duplicated age information seems tedious.
Result:
Adding clues on submenus together with simplified information in buttons.
The Design
Bring them together
By applying the new style guide with new logo, color palette, icons, font and typography. New website was built in Wordpress with the Elementor Plugin.
First Impression
Welcome message together with a joyful kids-playing video background at first sight.
Building Trust
Sharing what other PBMP parents thought about the school together with options to explore more on social media.
.png)
Encourage to contact
Promote call to action button up front to encourage a click behavior.
Core Service
Introducing programs PBMP offers.
Providing Value
Introducing Montessori philosophy as all PBMP curriculum use it as their teaching guide.
Home Page
Page Titles
Giving clues on where the users are at with showing classroom images conditions as background.
New Content
Sharing what's the main curriculum of the current program in relation with Montessori method.
Intro
Program brief with images showing interactions between classmates and teachers.
Program detail page
Other Pages
About Us Page
School Life Page
Bring Screens to Life
Motion Effect #1
Scrolling Behavior
Applying scrolling motion effect draws user's attention to the content that sit in the middle of the screen. Especially for the ones related to program links which also gives a feedback of where the users mouse at.
Home Page
Program Detail Page
Motion Effect #2
Entering Motion
Subtle entering motion and hover effects helps drawing users' attention and encourage a contact behavior.
Contact Page
Lastly...
My clients are highly satisfied with the new design, and she mentioned there is an increase inquiry about the school from the website. She also hired me to help maintain and update their website regularly.
