'Cherry Childcare' Website

University of Winchester Y2S1, Y2S2 and Summer 2018 Project

Brief


"Produce a new look for Cherry Childcare's website which is modern, appealing to their demographic and reflects their culture."

Overview


This project entailed creating a redesigned website, first of all collaborating with three other designers. As I was the only developer within the group, my main task was to code the website based on designs created by others. However, I did contribute as well to some of the design aspects.

After semester one, it was agreed that I would then collaborate with another developer in another group, combining both previous outcomes for the brief.

This project then continued into the summer of 2018. However, unfortunately, the client informed myself that myself and the developer I was collaborating with were not further required to complete the website and that this was the end of the project for the current time. Despite this, I was able to enhance my skillset throughout this project as I obtained knowledge of working with 'WordPress' as well as other technologies.

This page demonstrates the different processes undertaken, demonstrating various skills.

For a more detailed process, I have included documents where appropriate.

Y2S1 PROCESSES

Competitor Research


Overview

To start the project, I analysed the competitor websites which were provided by the client. Each piece of this analysis can be viewed below. Some of the websites may have changed since the analysis was undertaken.

'Busy Bees' Website

Overview

This website wasn't too overpopulated with information and visuals, it used clear headings, the images were easy to see, horizontal scrolling text was used and there were links to social media websites.

The Actual Website

'Childbase Partnership' Website

Overview

The 'Childbase Partnership' website was visually attractive, there was a friendly tone, it was simplistic and it was modern with an effective layout.

The Actual Website

'Bright Horizons' Website

Overview

The final competitor, 'Bright Horizons', had a professional appearance, there were some animations, big images were used and there was a combination of a one page scrolling website and several pages.

The Actual Website

Sketches and Ideas


Desktop Website Wireframes

Overview

Following on from analysing the competitor websites, I then produced some wireframes to demonstrate how the website for 'Cherry Childcare' could have appeared on a desktop computer. I made wireframe ideas for the home page, find nursery page, how some of the generic pages could have appeared and for the contact page.

The Created Wireframes

The Home Page Desktop Wireframe Idea

The Home Page Desktop Wireframe Idea

The Find Nursery Page Desktop Wireframe Idea

The Find Nursery Page Desktop Wireframe Idea

The Generic Page Desktop Wireframe Idea 1

The Generic Page Desktop Wireframe Idea 1

The Generic Page Desktop Wireframe Idea 2

The Generic Page Desktop Wireframe Idea 2

The Contact Page Desktop Wireframe Idea

The Contact Page Desktop Wireframe Idea

Font Ideas and Content Management Systems Research

Overview

As well as the wireframes displayed previously, I also contributed some font ideas for the new website.

Futhermore, I also undertook some research on which content management systems could have been used for the website, analysing the prices and advantages and disadvantages. This can be viewed in my portfolio document situated at the bottom of this section, however the font ideas can be seen below.

The Contributed Font Ideas

My Fonts Ideas

Contributing Font Ideas

Mobile Wireframes

Overview

As well as contributing the previous ideas to the project, I thought it would have also benefitted the designers if I were to create some mobile wireframe ideas.

The designers produced some desktop wireframes which were to be shown to the client and taking inspiration from these, I created some wireframes to display how the website would have appeared on a mobile device, implementing features such as a responsive navigation menu.

The Created Wireframes

Mobile Wireframe Ideas

Mobile Wireframe Ideas

Mobile Wireframe Ideas Continued

Mobile Wireframe Ideas Continued

The Result of the Semester


Overview

The final website at this stage of the project can be viewed below along with detailed description of the coding process. Furthermore, a more detailed process of the aspects shown previously can be viewed through another supplied document below.

Unfortunately, due to the timescale and the fact that I was the only developer with some help from one of the designers, the website wasn't able to be fully finished at this stage. This was also because I was a beginner with integrating the website into 'WordPress' also. However, an agreement was made between myself, the client and a member of another group working on the same project that we would collaborate and finish the website throughout the next semester.

Documents for this Project at this Stage

A More Detailed Process (Document)


Development Document (This Stage)

The Final Website at this Stage

Y2S2 PROCESSES

The Result of the Semester


Overview

During the second semester of my second year, I then continued the project with another developer, as explained before.

To demonstrate the development processes undertaken in the semester, I have included a document to demonstrate my contribution.

During this semester, the project was unable to be completed but it was agreed that this would have been undertaken again during April. This was due to the fact that there were other university projects which needed to be completed at the current time.

Development Document (This Stage)

SUMMER 2018 PROCESSES

The Result of the Semester


Overview

After deciding to leave the project at the current stage during the second semester of my second year due to the other projects I was undertaking, this was then resumed at a later date with the other developer I had been working with before.

Contacting the Client

After contacting the client to explain that myself and the other developer I was working with wouldn’t have been able to implement aspects such as functioning forms and items that handled personal data due to the lack of experience within these areas, it was suggested to meet with the client to explain the current stage of the project. However, after attempting to arrange a time and place to meet, the client informed both of us that we were not further required to complete the website and that this was the end of the project for the current time. Therefore, to compensate for the incomplete website, this section and the document situated at the end of this section at least displays the areas addressed and shows an understanding of some areas of ‘PHP’ and ‘WordPress’.

The more detailed development work for this stage can be viewed below, demonstrating the different processes undertaken.

Development Document (This Stage)

Furthermore, the images below will display the final appearance of each page at the current stage within 'WordPress', acting as the final outcome. This was the required task of implementing the website into a content management system of which was 'WordPress' and during the summer this was continued from the second semester of my second year. As well as the new appearance, examples of the old appearance of the 'Cherry Childcare' website can be viewed below. Please note that the images for the new appearance may have not reflected some elements of the current website such as data collecting forms due to the new enforced 'GDPR' laws. Furthermore, some images used for the new appearance were acting as temporary placeholder images which were intended to be replaced as the project developed further.

The Final Semester Result

The Previous 'Cherry Childcare' Website (Examples)

Example 1 of the Previous 'Cherry Childcare' Website

Example 1 of the Previous 'Cherry Childcare' Website

Example 2 of the Previous 'Cherry Childcare' Website

Example 2 of the Previous 'Cherry Childcare' Website

The New Appearance for the 'Cherry Childcare' Website

The Home Page

The Home Page

The Our Nurseries Page

The Our Nurseries Page

The 'WordPress' Default News Page Created by the other Developer

The 'WordPress' Default News Page Created by the other Developer

The For Our Parents Page

The For Our Parents Page

The Careers Page

The Careers Page

The About Page

The About Page

The Enquire Form Page

The Enquire Form Page

The Individual Nursery Page ('CherryVale' Example)

The Individual Nursery Page ('CherryVale' Example)

The Privacy Policy Page

The Privacy Policy Page

The Individual Nursery Change Sessions Form Page ('CherryVale' Example)

The Individual Nursery Change Sessions Form Page ('CherryVale' Example)

The Individual Nursery Email Form Page ('CherryVale' Example)

The Individual Nursery Email Form Page ('CherryVale' Example)

The Final Stages


Overview

Despite showing the final outcome above, this is also displayed below.

The Final Outcome

The Home Page

The Home Page

The Our Nurseries Page

The Our Nurseries Page

The 'WordPress' Default News Page Created by the other Developer

The 'WordPress' Default News Page Created by the other Developer

The For Our Parents Page

The For Our Parents Page

The Careers Page

The Careers Page

The About Page

The About Page

The Enquire Form Page

The Enquire Form Page

The Individual Nursery Page ('CherryVale' Example)

The Individual Nursery Page ('CherryVale' Example)

The Privacy Policy Page

The Privacy Policy Page

The Individual Nursery Change Sessions Form Page ('CherryVale' Example)

The Individual Nursery Change Sessions Form Page ('CherryVale' Example)

The Individual Nursery Email Form Page ('CherryVale' Example)

The Individual Nursery Email Form Page ('CherryVale' Example)