maria-ramirez 

Kindergarten Website Redesign

Year: 2021  |  Role: UX/UI Designer  |  Tools: Figma, Photoshop, WordPress | Client: Maternal Cuclí Kindergarten 

🎯The Challenge

In 2010 the kindergarten Maternal Cucli launched its first website, in early 2021 the website still was a digital brochure lacking business and experience objectives.

🌐Solution

A new responsive website oriented to foster meaningful interactions between potential clients and kindergarten members through delightful user experience.

✌️Success Metrics

Greater impressions and clicks on Google Search and enhanced mobile usability.

Lead generation through on-site marketing tools: +52%. Implementation of marketing tools for the first time: 

🗓 Book a visit online

📘Online Pre-registration

📑Inquiry Form

Empathize

The first step is to understand the context of your project

Maternal Cucli is a kindergarten established in Ibagué-Colombia in 1994. They offer care and education services to young children from 3 months to 6 years. 

I started by analyzing the previous website

Previous website home

Previous website inner page

Previous website inner page

Definition of goals for a detail- and results-oriented design process

The Challenge

After gaining understanding about the context and current problems, I defined a set of goals to work on the website redesign according to the stakeholders needs and interests.

Redesign objectives

Research

Metrics analysis to understand the users needs and behavior

Analysis of the Google Analytics metrics of the previous site

With the approval of the kindergarten manager, I carried out an analysis of the Google Analytics metrics for November to December of the year 2020.

Specifically, I wanted to identify the most visited pages and the most and least relevant content for users.

November 2020

Pages with a bounce rate under 65%:

Academic (63%)

Homeschooling (42%)

About (60%)

Top 3 most visited pages:

PEI (68 visits)

Study plan (61 visits)

Pedagogical proposal (43 visits)

December 2020

Pages with a bounce rate under 65%:

Study plan (63%)

Academic (63%)

History (50%)

Top 3 most visited pages:

Study Plan (85 visits)

PEI (62 visits)

Pedagogical proposal (56 visits)

💬Relevant findings

According to the following data, potential customers are highly interested in pages that convey academic information.

The general analysis allowed me to learn about the improvement opportunities

I examined the previous website’s conversion and usability to identify challenges and opportunities for improvement. 

Analyzed factors:

🔎Home page layout 

🔎Most requested information 

Additionally, I performed a heuristic evaluation of the site.

Home page analysis: above the fold elements
  • Kindergarten logo
  • Three social media buttons
  • Contact information
  • Main menu
  • Institutional video

💬Relevant findings

There was no “call to action” elements on the homepage nor any other page. Some broken links on the header.

Analysis of the most requested information vía Facebook

With the approval of the kindergarten manager, I had access to the kindergarten fan page on Facebook and the direct messages that potential clients sent requesting information.

💬Relevant findings

Some of the most requested information was not available on the website, for example, schedule, enrollment requirements, and educational costs.
Some of the most requested information was difficult to access or incomplete: services, ages, and levels.

Heuristic evaluation

For the usability analysis, I conducted a heuristic evaluation of the previous website, for this aim I used a comprehensive checklist from an academic paper.

Thanks to the evaluation, some improvement opportunities regarding the following heuristics were identified:

Visibility of system status

  • Some links were missing or broken.
  • There were no defined actions to perform within the website.

Match between system and the real world

  • According to the analysis of the most requested information via facebook, it didn´t appear in a logical order for the users.

Consistency and standards

  • The information was not displayed consistently on every page.

Aesthetic and minimalist design

  • The writing style was heavy to readers and was not quick to interpret. In addition, the site lacked a visual system to ensure coherence and harmony across screens.

Help and documentation

  • There was not a section of frequently asked questions (FAQ) available.

Through the Content audit I was able to see the complete scheme of the website that I was going to redesign

Previous website Information Architecture

To get a complete picture of the Information Architecture of the previous site, I organized a Sitemap and inspected each page.

💬Relevant findings

Outdated relevant information, missing content, low readability, and need to implement calls to action according to business objectives.

The competitive audit is critical to really understanding the context of a project and learning about best practices

To understand the competitors’ offer, good practices, and weaknesses, I made an inventory of the content and functionality of their websites. 

💬Relevant findings

None of the three main competitors had set clear objectives or established clear actions to help users perform specific tasks on their websites.

Therefore, considering the users and commercial interests in the new kindergarten’s website could represent a competitive advantage.

Good practices identified from competitors: implementation of a WhatsApp button to offer a closer customer service.

After the context analysis and user research, I understood the following insights

01

Users are highly interested in pages that convey academic information.

02

Users want to know soon about enrollment requirements and educational costs.

03

The visual design of the website is perceived as inconsistent by users.

04

Outdated information in the website can prevent potential clients to ask for further information.

05

Frequently, grandparents search for kindergarten information on the internet, therefore is critical to enhance content readability.

Design

Defining Design implications according to the research insights

To inform the design phase, I prepared a checklist according to the research insights.

The Card sorting session enabled me to learn about the users' perspectives

I conducted an Open Card Sorting with two current clients of the kindergarten to understand their expectations regarding content organization. I had built an initial Sitemap before the session and wanted to understand the user’s point of view without showing them this initial model.

💬Relevant findings

I found that, I haven’t considered organizing all the prospective students’ and enrollment information in a dedicated section, which seemed to be logical to users. Additionally, FAQ section was requested to has an space in the home page.

📐Card sorting outcome

As a result of the card sorting, I prepared a new website Sitemap  considering the users expectations.

*Dotted boxes are new interaction points within the website.

Wireframing as an early evaluation design tool

When the Sitemap was approved, I prepared the new website wireframes in Figma. At this stage, I worked together with the kindergarten academic coordinator to gather all the necessary written content that was included in the wireframes.

📐Outcome

Overall Wireframe

Home Wireframe

📣Feedback Session on Wireframes

In a meeting with the kindergarten manager, I received feedback on the website wireframes that I had previously prepared.

Some of the main recommendations were:

  • Make some adjustments on the home section hierarchy layout.
  • Add a Google map next to the CTA button “Book a visit”on the home section.
  • Avoid asking for children’s data in marketing forms due to Data Law regulations.

A Design Kit coherent with the brand guidelines

After receiving feedback on the wireframes, I created the design kit for the website according to the brand guidelines of the Kindergarten, which included specific colors and typefaces.

Fonts

Big Title H1

Poppins, 56px, 600w

Small Title H2

Poppins, 36px, 600w

Body Text

Poppins, 24px, 400w

Button Text Link

Poppins, 18px, 500w

Images

Border radius 30px

Buttons

Text buttton

Outlined button

Contained button

Colors

Evaluate

↗️After a comprehensive design process, I delivered the redesigned website

Access the live site here.

Next steps to evaluate the website

After delivering the website to the client I suggested some next steps oriented to continuous improvement of the website.

  • Conduct usability testing with two types of users: current and potential customers of the kindergarten.
  • Conduct a website survey to get UX insights on user frustration and task failures and investigate what type of content users prefer.
  • Additionally, include more valuable content and tasks for current kindergarten customers. For example, a “Resources” section to offer curated lists of tools and content for parents. As well as setting an online payment button to make payments for educational services.

Main lessons learned

  • The importance of simplicity.
  • Learning to make design accessible is an ongoing and highly relevant process.
  • It is important to understand the context and background of existing products.

Hello,

This site is under construction 💙

You can explore and probably will find some sections that are being updated.

thanks for your visit!
Skip to content