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.
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 Find Nursery Page Desktop Wireframe Idea
The Generic Page Desktop Wireframe Idea 1
The Generic Page Desktop Wireframe Idea 2
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
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 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
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)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 2 of the Previous 'Cherry Childcare' Website
The New Appearance for the 'Cherry Childcare' Website
The Home Page
The Our Nurseries Page
The 'WordPress' Default News Page Created by the other Developer
The For Our Parents Page
The Careers Page
The About Page
The Enquire Form Page
The Individual Nursery Page ('CherryVale' Example)
The Privacy Policy Page
The Individual Nursery Change Sessions 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 Our Nurseries Page
The 'WordPress' Default News Page Created by the other Developer
The For Our Parents Page
The Careers Page
The About Page
The Enquire Form Page
The Individual Nursery Page ('CherryVale' Example)
The Privacy Policy Page
The Individual Nursery Change Sessions Form Page ('CherryVale' Example)
The Individual Nursery Email Form Page ('CherryVale' Example)