LITTLE STAR PRESCHOOL

Website

Little Start Preschool wanted a new website which allowed new and current clients view their website for news and information.

Project Specs

The client wanted:

A gallery showing photos of the preschool and children playing.
Logos from education...
A calendar showing opening dates, activities and important dates throughout the year.
A form allowing people to show interest in joining the preschool.
Contact form - email & phone.
Map of the location.
Links to social media sites.
Use the previous logo.
Information on the preschool's curriculum.
Testimonials from parents.

The User

Two main users:

1. New clients.

2. Parents with children in the preschool who want to view the yearly preschool calendar and contact information.

Problem

The client found that a lot of people wanted to see photographs of the preschool setting. I took into consideration the 'Child Protection and Privacy & Data Protection' policy. Parental/guardian consent will be needed if the child is in the images.

The website's main navigation has a sidebar with a lot of headings leading to different pages. These pages have a lot of information displayed which could make the user un-interested in the content. Some pages didn't have any content and were blank.

The client wanted a way to get more business, by using the website. The only way they were getting sign ups were through printed application forms (problem? yes. Parents would have to collect in person or send a pdf version) and a phone number.

What do we want to achieve with a redesign?

Who is our target user?

How can we improve their experience on the website?

Side navigation

Content in this area

About page

Contact Page

Curriculum Page

Contact Form

Key Drivers

As the density of the online content increases and consumers are overloaded with choices, the ability to find and access content across a myriad of services is crucial to the success of the app. I based my designs to deliver upon the following key areas.

One Page Scroll
Concentrates all the important information onto a single page. Content is easier to find and “scan” than when the same information is on several web pages.

Control the order in which a searcher consumes your content.

Strong Site Map
The site map needs to be strong to allow the user to know where exactly to go. At the moment there's too many page for what is needed.

Fun & Colourful
The preschool website needs to have a playful aspect to it using the colours of the logo. These strong colours (red, green, blue, orange, purple, yellow) will create a colourful and fun website.

Responsiveness
The majority of users will be using their phones. The smaller screen means the large amount of content will need to present in a way that the user will want to read it.

Navigation

Site Map

The original site map had many sections with no content at all. I then broke down all the areas and reorganised them into headings into the necessary areas. This then created a clearer look at all the content.

I used a dropdown menu at the beginning. I found from testing, it didn't work because there were too many pages for the user to scan through. Users felt that a lot of the information could be put on one page.

This then led to a one-page scroll design with two extra pages - Our Care & FAQs

Original Sitemap

Breakdown of Sitemap

Final Sitemap

Mid-fi Prototypes

Wireframes

Below are two main prototypes which show a static website and a one scroll website.

Graphical Elements

Design Aim

The design of the app had to cater for all ages which entailed providing a fun but a usable app for all age groups and abilities to navigate. The user experience and the user interface were an important factor when creating the app - the aim was to ensure that the user interface enhanced the user experience.

Final Design

Iteration

The client wanted to use their own logo. I made a few tweaks such as changing the colours to be less stark, which then led to the colour palette. I also made the name part stand out more to grab the attention of the user.

Logo

Illustrations

Homepage Icons

Since there was a lot of content, the use of illustrations was a good way to separate each content bit showing hierarchy on the page.

Illustrations used throughout the website

'Our Care' page icons

Aistear

Personal, Social and Emotional Development

Literacy

Communication & Language

Well-Being & Independence

Expressive Arts & Design

Mathematics

Physical Development

A Holistic Approach

Design Solutions

This section will further illustrate some of the design solutions that were mentioned in the iterations above in more detail.

Challenges

No project could be made without a few hiccups along the way.

Researching the content along with designing and programming the app was a big undertaking (especially as neither of us came from computer science-related backgrounds).

We had implemented a plugin to animate a section which did not work when we tested the app on the device. After much trial, error, and research, we discovered that there were restrictions and delays with how mobile devices (especially iOS) execute JavaScript scroll events. A pivot would was our best solution.

Universal design

Reflections

As we aquired more information and the project grew, it became clear to us that scope creep was rearing its ugly head. In hindsight, we realised that we should have confined the project to the sections we had outlined in our original design document. The lure of adding more interesting content and trying out different technologies may have gotten the better of us and we felt that some of the sections faltered as a result.