pendragon.online

Nellie's Nursery

Year 1 Final Piece | Nursery website prototype | HTML, CSS, JavaScript | Client brief

Define

The brief was to create fully responsive website for a client of our choice. I had to find a client, being interested in education and designing a site with children in mind I got in touch with a local nursery and built them a website prototype that could replace their existing Wix-made website.

The project specification called for a prototype to be submitted, not a completed website. This meant that my prototype website never replaced their existing site.

The existing website shown on a laptop and a phone - it features a small slideshow at the top of a green page and beneath this is text in a central container.

The existing website, which my prototype aimed to replace.

Discover

A mix of formative user research and client requirements were used to create prototypes of this website.

  • The site is for parents (not children) and needs to inform parents about the nursery and host policy documents.
  • There is currently a ‘staff area’ that they want to develop so staff can access policy documents that are applicable to them.
  • The website should work in all modern browsers and must be responsive since it is believed that a lot of traffic comes from mobile devices.
  • Although parents are the target audience, the site needs to look attractive and show that the nursery is a fun place to send their children. It shouldn’t look ‘corporate’.
  • No payments must be placed through the website.

Formative user research

Formative user research was completed by means of an electronic survey sent to parents living close to the nursery.

90% of of users said that they had visited their child’s nursery website.

11 in 15 users use nursery websites to find out more about the nursery. Contacting the nursery was also a common use of such a website.

13 in 15 users felt that nursery fees were the most important information to have on the website.

52% of users would visit the website using a smartphone. 29% said they'd use desktops or laptops and 19% said they'd use a tablet.

90% of users felt that the website should be a communication link between the nursery and parents.

8 in 15 users felt that the book 'The Very Hungry Catterpillar' could provide good inspiration for the website's design.

A group of people graphic.

Develop

Wireframes were drawn in Axure RP and showed improvement from the current website by having a more appealing design and a better information hierarchy.

Desktop wireframes

This wireframe diagram shows the home page of the website.

Nellie's Nursery website home page featuring a large hero image and a container with rounded edges on top of some of this image.

This wireframe diagram shows the 'day-to-day' page which describes a typical day for children at the nursery.

Proposed design of the 'Day-To-Day' page. This page explains a typial day at the nursery and the kind of things that the children will learn shown in individual boxes.

This wireframe diagram shows how information about the different nursery groups is displayed.

Wireframe design for the 'Nursery Groups' page. This page informs about the different groups, their session times, lunch times and so on. In these wireframes, content is generally displayed in boxes.

This wireframe diagram shows the staff who work at the nursery - pictures and a short bio are provided.

The nursery were keen for the new website to feature more information about the staff at the nursery, therefore this page has been designed to feature images and a short bio of each staff member.

This is wireframe diagram shows the parent's area, where parents can log in to retrieve policy documents.

The parent's area would be an area of the site that parents could access with a unique username and password to retrieve policy documents from the nursery and find information about their child.

This wireframe diagram shows the contact page and lists the different ways of travelling to the nursery.

The contact page would feature instructions on how to visit the nursery from a variety of transport modes such as cars, buses and trains.

Mobile wireframes

The first mobile wireframe design (shown in the first two screenshots) was fairly 'traditional' in that it featured a button in the upper right corner of the website that opens a hamburger menu for navigation. The menu expands from the top of the screen.

The mobile prototype that eventully went into the final design has the design shown in the second wireframe (shown in the second two screenshots) where the button to open the hamburger menu is positioned at the bottom of the screen with a button to take the user to the home and contact pages. The menu opens from the bottom of the screen. The idea was this would make using the site easier on larger phones as you wouldn't need to stretch your thumb to reach the menu buttons. It also increased page space because the header area could be hidden.

Both designs were tested with users and both designs feature a large hero image on all pages (other than the home page) and content in a centred, rounded container. Content on the page shrinks down into one column, common on most mobile websites. There is no difference in the content heirarchy, information architecture or content presentation - only the hamburger menu and its location.

The home page of the first mobile prototype wireframe.

Mobile home page (first prototype).

Wireframe showing the hamburger menu open on the first mobile prototype.

Mobile 'day-to-day' page with the menu open (first prototype).

Wireframe showing the log in screen on the final mobile wireframe.

Parent's area page (final prototype).

Hamburger menu open at the bottom of the screen on the final mobile prototype design.

Bottom of the contact page, showing the menu buttons and the menu open (final prototype).

All wireframes were turned into a working HTML, CSS and JavaScript prototype website which was tested in a UX lab.

Try the wireframes!

You can try the wireframes in your browser - they act just like a website!

Test

Three rounds of usability testing concluded that the desktop site was the preferred overall prototype and that the best design for the mobile prototype was to have a hamburger menu containing links to the pages with the menu button positioned at the bottom of the website so that the user could easily press the button whilst holding the phone.

86% preferred the prototype with the buttons at the bottom of the screen from an ergonomic perspective.

72% preferred the desktop site to the two mobile site prototypes.

83% felt that the menu buttons were relevant to the page content.

92% felt that the prototype displayed correctly on the browser and device they tested it on.

85% is the average score for usability that testers gave the final prototypes.

82% is the average score for design and aesthetic that testers gave the final prototypes.

Spinning pie chart graphic.

Testers felt that the design suited the application perfectly and the prototype was received favourably. However, most users were surprised by the noise that the animal animations made. Using clickable circles underneath the images in the slideshows was also suggested to skip to certain frames and show how many pictures are in the slideshow.

What users said

Comments from those who tested the final version of this project.

'Very easy to navigate and find what you need. Headings and menus were clear and accessible.'

'It's very straight forward, everything is clearly labeled and easy to navigate.'

'The color scheme works very well for readability. Everything is well titled and easy to navigate.'

'Relates well to the fact it is for children and looks playful and welcoming.'

'Looks very neat and modern, fits the nursery theme.'

A group of people graphic.

Outcome

The final design features a bold header with animated animals (the animals are the names of classes at the nursery) and animated clouds as well as other assets that help to give the ‘fun’ identity. The prototype is responsive and has been built using user research and usability testing. Nellie's Nursery loved the design.

The Nellie's Nursery prototype website running on a smartphone outside of the nursery.

The prototype was presented to Nellie's Nursery in April 2018 (the nursery is pictured behind the phone).

The prototype website running on a smartphone in a green field.

Home page protoype showing the mobile menu and the unique position of the menu, contact and home buttons.

The final prototype, complete with animated animals to show the fun and friendly side of the nursery.

Evolve

One final prototype was created which added a mute button to the animations. The next steps would have been to use this website in place of the current Nellie’s Nursery website.

Related

Enjoyed this case study? Have a look at some similar work!

Redgate Database UI Project

As part of my application process for an internship, Redgate tasked me with designing a new interface for a database This is what I came up with.

Broads Authority Web App

How can you encourage families to visit The Broads using technology? Much of my time in Year 2 at university was spent on this live client brief that rendered interesting results.

Fosters Solicitors LLP Web Presentation

Fosters Solicitors LLP needed an exciting, engaging and interactive web-based presentation about celebrating and improving company culture to present to the board of the firm.