Year: 2021 | Role: UX/UI Designer | Tools: Figma, Photoshop, WordPress | Client: Maternal Cuclí Kindergarten
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.
A new responsive website oriented to foster meaningful interactions between potential clients and kindergarten members through delightful user experience.
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.
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.
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.
According to the following data, potential customers are highly interested in pages that convey academic information.
I examined the previous website’s conversion and usability to identify challenges and opportunities for improvement.
🔎Home page layout
🔎Most requested information
Additionally, I performed a heuristic evaluation of the site.
There was no “call to action” elements on the homepage nor any other page. Some broken links on the header.
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.
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
Match between system and the real world
Consistency and standards
Aesthetic and minimalist design
Help and documentation
To get a complete picture of the Information Architecture of the previous site, I organized a Sitemap and inspected each page.
Outdated relevant information, missing content, low readability, and need to implement calls to action according to business objectives.
To understand the competitors’ offer, good practices, and weaknesses, I made an inventory of the content and functionality of their websites.
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.
Users are highly interested in pages that convey academic information.
Users want to know soon about enrollment requirements and educational costs.
The visual design of the website is perceived as inconsistent by users.
Outdated information in the website can prevent potential clients to ask for further information.
Frequently, grandparents search for kindergarten information on the internet, therefore is critical to enhance content readability.
To inform the design phase, I prepared a checklist according to the research insights.
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.
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.
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.
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.
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:
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.
Big Title H1
Poppins, 56px, 600w
Small Title H2
Poppins, 36px, 600w
Poppins, 24px, 400w
Button Text Link
Poppins, 18px, 500w
Border radius 30px
After delivering the website to the client I suggested some next steps oriented to continuous improvement of the website.
This site is under construction 💙
You can explore and probably will find some sections that are being updated.