Case study

Kindergarten’s Website Redesign

Kindergarten websites redesign mockup with pink background

Project Overview


Product Designer


July – September 2021


Kindergarten Tanvald



Client & Challenge

Who is the client

My client is a public kindergarten, located in a small city and spread across three separate buildings. Each building has a manager who run their own activity plans, lunch menus, and other schedules. The kindergarten overall serves over 180 children and has over 20 employees.


Before being redesigned, each building had its own website, where they communicated information with parents and presented themselves. I identified a couple of issues that I wanted to resolve while merging the websites and delivering the product:

Inconsistent User interface

No cohesiveness and consistency

Speed issues

Contrast issues

Not responsive view for tablets and mobile devices

Two screens of original websites

Example screenshots of the original websites for two buildings

Another challenge ahead…

As I started to create designs for the new unified website, another issue arose, the managers of each building felt extremely intimidated by having to work in a new CMS. As teachers focusing on educating small kids, they had little time to alocate to learning a new system. They claimed they were used to the old system and were not so confident they would manage to learn how to work in WordPress. Is it even possible to sort something like this? Yep, a piece of cake!

Considering the users

Who are the users

Users of the website are parents who visit the kindergarten on a regular basis. They usually look for information and updates, such as planned events, required payments, the weekly menu, and they really like to see photos of their kids having fun during activities organised by the kindergarten. I divided the information users are looking for into two categories; urgent search and casual browsing. An urgent search could be looking for a phone number to report an absence or looking at that day’s lunch menu. I also created a couple of scenarios that had an impact on the structure and content of the website. For privacy reasons, I will not share more information about this research. 

Types of scenarios

Urgent situations

– Easy access to contacts to report absence or resolve urgent situations.
– Checking opening hours for unusual situations, for example public holidays.

Casual situations

– Looking for general information or to learn more about the kindergarten when deciding on their kid’s schooling.
– Looking for information to be ready for upcoming events.
– Looking to view the photo gallery or read about past events where their kid was involved.
– Looking to check the lunch menu to ensure their kid’s have a balanced diet.

Tasks to sort & Solution

Main task

Unify the design of 3 different websites and bring information straight to the parents.

Other tasks

Create a playful visual design with bright colors

Create a consistent visual style

Make the website easy to use so that parents find information they are looking for

Include sections for quick contact, and sharing updates, events, menus, and photo galleries

Increase traffic of the website

Resolve speed and main accessibility issues

Find a way for teachers to easily create and administer 500+ posts a year


I created a website that brings together the content from the others, based on the simple site map I created. Together with a developer I also found a way for very easy uploading new posts without having to log in to WordPress and create posts in the Gutenberg editor, assigning the correct categories and other technical settings that make the posts appear in the relevant pages and sections. The teachers can upload posts, documents, and even photos via email, just simply by sending an email to the system with the right tags in the subject. I also managed to resolve the main accessibility issues and after review with each buildings’ manager, we launched the website. We decided that in two years’ time we would review the design and operation, with the view towards further revision.

Starting the design


Since this is a small-scale site, creating a site hierarchy was straightforward. The website would contain a home page with information about the kindergarten, including its vision and other information parents are often looking for. Next would be pages for each building, including sections for opening hours, reporting an absence, sharing updates, events, current lunch menu and photo gallery. Another page would be for legal and policy documents, divided by the type of document either for parents or the kindergarten. The last page would be for contacts, where parents or other users could easily find details on bulding managers and for each class with the kindergarten.

Hierarchy of kidergarten redesign website

Page hierarchy draft for kindergarten website redesign


The header with navigation includes all buildings, documents, and contacts. The item for Home was added after it became apart that most users did not know that clicking on the logo would return them to the homepage. 

Menu draft for the kindergarten redesign

Basic navigation draft for kindergarten website redesign

Low-fidelity wireframe

I created a simple visualization of the website with information on what would be included on each page. Then a single buildings’ page was created. I wanted to have the most important information at the top on mobile view, so I created a two-column layout with updated information on the left and the rest of the information on the right on desktop/tablet devices, with the left column at the top for mobile devices.  

Kindergarten lo-fi draft

Low-fidelity wireframe with information included on each page

Visual design

Typography and colors

For typography and colors, I chose playful font faces and bright colors, that represented the ideas and nature of the kindergarten. For fonts, I needed to ensure that both the fonts for the header and body text have special signs that are used in the Czech language (ěščřžýáíé).

Barrio for headings


Atma for body text







Mood and imagery

The visual design on the website needed to fit both the purpose and the feeling of the kindergarten. I wanted a playful, maybe a little bit childish, mood while using authentic pictures as much as possible. Where I could not use realistic pictures I chose photos from Pixabay that match this mood. 

Final design

Picking the template

As part of the contract, I was going to create a template-based website due to a limited budget. Based on the wireframe shown above, I started to look for a template that would be the best match for what I wanted to create a communicate. Even though there are thousands of website templates, I did not expect to find a perfect template that would need no changes. I picked the one that was the closest and made changes according to my wireframes, implemented visual design, and made sure the website was responsive.

Kindergarten final design mockup

Mockup of the final design of kindergartens website redesign

Kindergarten project pages for 3 schools

Pages for each school

Kindergarten responsive website mockup 4 devices

Responsivity visualization for each page (mobile, table, laptop, desktop)

Technical health

Core Web Vitals

For both desktop and mobile view Core Web Vitals show good results. 

Core web vitals kindergarten desktop

Results from Page Speed for desktop for Kindergarten website

Kindergarten core web vitals desktop

Results from Page Speed for mobile devices for kindergarten website

Graphic design

Logo & Logotype

As part of the deal, I created a logo and logotype for this project. The idea of ​​the logo is based on the kindergarten’s location, which is in the mountains. Another element, which is the kids and the sun, comes from the idea of the school’s education program, which is called “Walking together in the sun”.

As an extra for this project, I created business cards that match the website’s visual design and go well with the idea of kindergarten, playfulness and happiness.

Kindergarten logo mockup

Logo visualization 

Kindergarten Logo application mockup

Logo (logotype) on a pen visualization

Kindergarten business card

Playful business cards for the principal of the kindergarten

What does the client say

“Our first collaboration with Mrs. Kennedy in the summer of 2020 turned out to be absolutely excellent. Despite the fact that we only met a few times and relied on phone or e-mail communication throughout the solution to the implementation of our website, mutual communication worked perfectly. We especially appreciate her promptness, care, patience, willingness and also a high dose of creativity, which brought a completely new dimension to our website. Together with my colleagues, we can warmly recommend her work, Mrs. Kennedy is a professional in every inch, and any non-standard wishes will not put her off. Our cooperation will certainly continue in the future.”

Blanka Bryscejnová, principal

What did I learn

Content analysis

This was the first time I redesigned multiple websites and unified their design into one, representing one organization. I analysed the content on all the previous websites and based on my findings offered a solution that works well. 


As my client is a government organization, they are subject to accessibility regulations. Thanks to this project, I learned a lot of not just user-focused, but also formal rules that will help me when working on other projects.

Next steps

What I recommend to do in the future

Usability study

Conduct usability study in a few month’s time to validate whether the pain points users experienced have been effectively addressed.

User research

Conducts more user research with the parents on a regular basis to determine any new areas of need. Recommended on a yearly basis.

Continuous improvement

Continuously improve the website in accordance with usability study and research.

Watch Regulations

Track the rules and regulations that apply to the websites of government organizations and compare whether these websites meet the current requirements