Y3S1 WORK

Please Note: Some of the 'PDF' documents supplied on this page may take a long time to load due to the amount of work included and these may need to be refreshed quite a few times in order for them to load fully.

THE REFERENCES FOR THE PROJECTS/WORK EXPERIENCE ON THIS PAGE ARE SITUATED IN THE RELATED DOCUMENTS PROVIDED EITHER NEAR TO THE END OR AT THE END OF EACH SECTION

Please Note: During one of my lectures, I was informed by my lecturer that I did not (as a developer) need to produce branding guidelines for the work undertaken but show I had worked to the branding of an organisation. To fulfill this, I have shown main evidence of this for the CFENC website project.

Introduction

Through a relative, I was informed of clients which wanted a website redesign and to be able to implement e-commerce into the website as well. Therefore, I contacted the clients to ask if it would be possible to meet and discuss the potential project in more detail. This was then arranged and I met the clients at their home where details were passed to myself. From this initial meeting, I then took upon the action of typing the notes into a document. These notes are viewable below as well as some notes from another person who also attended the meeting.

Explaining the areas of the Website I could Complete

As was agreed during the initial meeting, I was required to send an e-mail to the clients explaining the areas which I would be able to complete as well as those that I wouldn’t be able to do. Within this e-mail, I stated that I could redesign and build/code the charity website and that I would need to undertake research regarding the automated social media updates and the ‘keywords’ aspect relating to Search Engine Optimisation (SEO). The element which I mentioned that I wouldn’t be able to complete would be the e-commerce section as I explained that I am inexperienced in this area and wouldn’t want to cause any unnecessary security risks to the user.

In response to this e-mail, the clients asked some further questions relating to the social media and key words elements as well as purchasing a domain name.

After receiving the previous e-mail from the client, I replied explaining that I would be able to produce a brand-new website for them and suggested a hosting service called HostPapa. I also explained that with regards to the social media and key words aspects, that I would try to attempt these areas once researched. Evidence of these e-mails in order can be viewed below.

Planning Methods of the Project

After confirming the requirements with the clients, I then created several methods of planning to help myself with the project. Although these may have been started whilst continuing with the project, these helped myself to understand the tasks and milestones of different stages. These methods took the form of a task table, Gantt chart, technological and platform requirements table and a contact log. Please note that the Gantt chart was improved to accommodate university requirements after beginning semester 1 of my third year.

The Task Table

The Gantt Chart Versions (Original and Improved)

The Technological and Platform Requirements Table and Contact Log

As will be evident on this page, I continuously contacted the client regarding different aspects. Although not all emails have been displayed, the screenshots above of the contact log show a document that I created to keep a log of when I had either contacted the clients myself or had been contacted by the clients. This can also be viewed below.

Analysing the Competitor Websites

After confirming the requirements with the clients, I then decided to begin with analysing the advantages and disadvantages of the website provided by the clients, both those that they liked and disliked. I also did the same for the current CFENC website. The purpose of this was to try and influence the project I would be undertaking. All of this analysis can be viewed through selecting the link to a 'PDF' document below.

Branding Research

Following on from analysing the websites shown previously, I then decided to think about the fonts and colours for the new website. Firstly, I noted down the colours used in the logo and fonts currently used in the CFENC website that I didn’t know of to help identify each aspect. Throughout this task, I utilised the colour picker tool in 'Adobe After Effects' to identify the colours and the 'inspector tool' to identify each font. This process is viewable below.

Identifying the Utilised Colours in the Logo

Identifying the Utilised Fonts on the Website (Some fonts couldn't be found by the software I was using at the time)

After I had finished analysing the current fonts and colours for the CFENC website, I then undertook research regarding colour meanings/connotations to help myself create a few colour palettes for the new website. Within a couple of colour wheels I had discovered, I highlighted the aspects which I believed to relate to CFENC as a charity. This would allow for the values of the charity to be displayed in the created colour palettes. This is highlighted below.

Colour Palette Creations

After viewing the colour wheels, I then decided to create a few colour palettes to try and incorporate some of the colours shown above as well as the colours of the current logo and those that I thought would be professional. As will be seen, a mixture of vibrant and paler colours had been integrated into the colour palettes to try and add variety to both specific palettes as well as the palettes as a whole. Red was utilised in some of the colour palettes as this related to the business card the client had given to me and therefore, I thought this would be beneficial to include.

Undertaking Font Analysis of the Competitor Websites

After the colour palettes had been created and ready to show to the client at the next meeting, I therefore also began to analyse the types of fonts used on the provided competitor websites. This allowed for an understanding of aspects such as font-weights and alignment which would ultimately help me when creating the new website. This analysis is evident below.

Creating a List of 'Google Fonts'

After analysing the fonts for each of the websites above, I then decided to view the fonts supplied by ‘Google Fonts’ as I thought these would be more professional than standard fonts including ‘Calibri’ and ‘Arial’. The fonts I shortlisted were the ones that I thought would benefit the charity best with professional but friendly and appealing fonts being selected as is seen below. Some fonts contained curved edges with others in the style of almost handwriting which could have related to the children's nature. If you would like to know the names of the shortlisted fonts below, simply select the link at the end of this section called 'CFENC Other Processes Document' which will open the 'PDF' to view.

Decision of Final Colours and Fonts

During a meeting with the clients undertaken on 1st September 2018, I explained the work I had completed for the project thus far, receiving feedback for this. A variety of topics were discussed, of which some will be shown later and one of these topics related to the colour palettes and fonts I had highlighted as well as the research I had undertaken to inspire this.

From this, the following colour palette was chosen due to the fact that this represented the branding of the company of which the clients didn't want to change.

After the colour palette had been chosen, the font called 'Poppins' was chosen by the clients as this was the one they preferred. I had explained that this would be for the headings of the web pages with another font needing to be selected through suggested pairings by 'Google Fonts'. This process can be seen below with the 'Poppins' font first and then the suggested pairings options.

The font the clients chose to pair with 'Poppins' was 'Playfair Display' (image 6 above) as this, again, was the font that appealed to them the most. After the meeting, I had noticed that the heading and paragraph fonts had been swapped for the font that the clients had chosen, which meant that the actual font that they had chosen was the ‘Poppins’ font. To resolve this issue, I therefore contacted the clients by email to explain this, asking them to select one of the fonts again. The clients then replied, stating that the font they wanted to choose was 'Roboto'. Evidence of this process can be viewed below with the first image below showing the fonts switching positions.

Final Stages of the Branding Stage

As the colours and fonts had now been chosen for the website, I thought it would be beneficial to analyse how colours were used throughout the websites provided by the clients. This would then allow myself to use knowledge gained from this to integrate similar aspects into the new CFENC website with the key aspects discovered being displayed through the images of the analysis below.

As well as undertaking colours analysis, I also undertook some research on the Internet regarding the best practices for both fonts and colours. From this, the key aspects I discovered were to include a visual hierarchy, pair fonts that benefit each other, ensure colours overlap and utilise the 60/30/10 rule where the main colour is used at 60%, the secondary is used at 30% and the accent colour is used at 10%. To view this research in more detail, please refer to the 'PDF' document at the end of this section, accessible under the link called 'CFENC Other Processes Document'.

Target Audience Research

Following on from the branding stage, I then decided to undertake target audience research to allow for the creation of a website that would suit the correct type of visitor. To begin this process, I analysed the charity's values/objectives.

Analysing the Charity's Values/Objectives

As a result of undertaking this task, I made several conclusions including the fact that this will attract those who are generous and kind-hearted as well as those between the age of 18 and 70 who are interested in helping. To view the full analysis, please refer to the 'PDF' document at the end of this section via the link called 'CFENC Other Processes Document'.

Undertaking Several Processes of Research

After making some initial judgements, as shown before, I then decided to undertake a series of research to help better my understanding of the topic area. This involved collecting an overview of charity statistics, research regarding the funding options for charities and also the types of audiences charities attract. The statistics, as found on the website 'Statista', can be viewed below, providing an example of the research I collected. To view the research in full detail, please refer to the 'PDF' document at the end of this section via the link called 'CFENC Other Processes Document'.

After completing the necessary research, both that shown above and in the 'PDF' document at the end of this section, I then summarised the main points I thought had appeared several times regarding types of target audience to help me in preparation for creating the target audience personas later on in the project. These main points were that women are more charitable than men, the younger generation is less likely to be interested and not be charitable at all, people are more likely to be charitable towards a charity if it is something that they can relate to and sometimes people need to be encouraged and motivated in order to become charitable.

Creating the Target Audience Personas for the CFENC Website

Following on from the previous processes, I decided to create three target audience personas to allow for variation in different types of target audience, hence allowing for consideration of more than one type of visitor when producing the website. This is viewable below.

Undertaking Website Trends and Standards Research

Further to the target audience research, I also undertook research relating to website trends (predicted and current regarding 2018 and 2019) and standards as I thought that this could help me when completing work later in the project, hopefully being able to implement best practices into the final outcome of the website.

Website Trends Research

Due to the fact that this aspect was solely written research, this can be fully viewed in the 'PDF' document at the end of this section under the link called 'CFENC Other Processes Document'. However, to summarise, the main aspects to consider were one-page websites, static websites, photo content, successful website development for mobile, progressive website applications, e-commerce, 'JavaScript' and typography as well as other aspects.

Website Guidelines and Standards Research

Likewise to the research above, due to the fact that this aspect was solely written research, this can be fully viewed in the 'PDF' document at the end of this section under the link called 'CFENC Other Processes Document'. Some of the main aspects to consider were ensuring of fast loading times, ability to function on mobile devices and following of the W3C standards and of the Web Content Accessibility Guidelines (WCAG).

As a result of noticing the mention of the Web Content Accessibility Guidelines (WCAG) and due to the fact that the guidelines had been updated from WCAG 2.0 to 2.1, I therefore decided to undertake detailed analysis which can be fully viewed in the 'PDF' document at the end of this section under the link called 'CFENC Other Processes Document'. Although from a different source, 'GOV.UK' summarise the main elements of the Web Content Accessibility Guidelines which can be seen below and these relate to the research shown in the 'PDF' document.

The key aspects to highlight here are the fact that 'alt' text should be utilised for anything that isn't text based, ensuring that the background colours and text colours contrast, ensuring that the user can use the product easily without any problems and also making the content clear and understandable. Through undertaking the process of viewing the Web Content Accessibility Guidelines, this allowed for me to consider some areas whilst progressing with the project.

Creating the Wireframes for the new CFENC Website

Although some of the wireframes were created earlier than some of the other processes of this project, this was an important part that was reviewed and developed over a period of time. The process of this development will be able to be seen below.

Initial Wireframes - Desktop Versions

The initial wireframes for the CFENC website were created in the very early stages of the project whilst also undertaking the branding process. At this stage, I created two sets of wireframes for desktop devices. The purpose of creating two for each page at the current time was to try and explore more than one method of how each page could be structured, acting as a process of ideation. The first set of wireframes created can be seen below. For these, I placed the logo at the top of the page with the title of the website placed next to this, believing it would be beneficial for the user to remind them of the organisation they are either reading about or considering helping as well as being able to navigate to the home page through a link placed around the logo. The navigation bar and footer sections were also in the same place for the first set of wireframes to keep a consistent appearance for the user, allowing them to easily recognise where different elements would be placed on the page, hence creating a good user experience. Within the navigation bar for the first set of wireframes, the links to the different pages would be able to be interacted with and in the footer, items such as contact details and legal policies (e.g. a privacy policy) would be included for quick reference.

For the first home page wireframe, I decided to include a slideshow of images underneath the navigation bar as this was something that was currently included on the CFENC website and therefore, I thought this would be good to keep to help provide an overview of the website through different images. Furthermore, the title of the page would be placed underneath the slideshow with either an image or set of images next to the descriptive text underneath, providing an overview of the organisation and what the user can expect to find on the website.

Regarding the first history page wireframe, I included the same layout with regards to the title of the web page, the introductory text for the page and the image or set of images as that used in the home page. This was due to the fact that again, this would create a consistent and professional appearance throughout the website and help the user to familiarise themselves with the structure of each page. For this page, I thought it would be beneficial to include facts in circles or similar shapes which would provide short, concise historical information about the organisation and Nepal in general. I believed the shape of a circle or similar shape could possibly represent the sun and moon shown in the logo of CFENC and encourage the user to learn about the history in a fun and interesting way.

For the first 'Who we are' page wireframe, the title of the web page along with the introductory text and image or set of images was placed in the same place to create a consistent and professional appearance. I included a section which would relate to the people involved with CFENC, including only two people relating to the clients. This was due to the fact that at this stage I didn’t have any content to understand if there were more people. In this section, I placed the name of each person with their images and a descriptive piece of text underneath each image. As will be evident, I decided to place the name on a line attaching to each image as I thought this would enhance the design of the website. This section was also placed centrally due to the fact that if I placed this to the left, it wouldn’t add variation to the page. Underneath, I believed that it would be beneficial to include a social media section to encourage users to interact with and help promote the CFENC organisation as well as being able to see what the organisation had been up to.

Regarding the first projects page wireframe, I integrated the same structuring of the introduction section with the title of the page, text and image or set of images as that of the other pages. With regards to the content of the projects, I chose to include each project as their own container and place all of these in a grid layout as I thought this would be clear to see for the user. This would allow the user to select a project they were interested in and read about it in more detail through selecting the ‘View’ link underneath each. This grid system would continue as far down the page as possible, ultimately depending on how many projects had been undertaken by CFENC.

With relation to the first donations page wireframe, I integrated the same structuring of the introduction section with the title of the page, text and image or set of images as that of the other pages. For the content of this page, I decided to integrate the three different sections (fundraising, donations and donate materials and supplies) in a vertical format placed centrally on the page. This was to attempt to add different content flows throughout the page as I thought this might add variation. The images would be placed first and then the titles of the different elements along with descriptive text would be placed below. I believed that placing the titles above their respective images would create an appearance which wouldn’t be as aesthetically pleasing which is the reason why the images are placed first, creating a tidy appearance for the user.

For the first sponsor a child page wireframe, I thought it would be beneficial to have each child that is available to sponsor in a row format with the same layout for each; the image first and then the name of the child followed by a description of them with a link to sponsor them. This was because I thought that this would help maintain a professional and consistent structure to the page. I thought that also having the sponsor links underlined would indicate to the user that they are to be selected, hence being intuitive. These sponsor links would take the user to either a modal or a separate page due to the fact that having too much text on the page would probably disinterest the user and having the option to do this would allow the user the choice of whether to continue with the process or not.

For the first wireframe of the shop page, I decided to place the images of each shop item in a block format to create a professional and consistent structure on the web page. Only images would be displayed on the screen until the user interacted with them by selecting them, causing the products to be displayed either in full size or in a modal with the information and price relating to them. Likewise to the first sponsor a child wireframe shown previously, this would reduce the amount of text displayed on the page and encourage users to select each product to read more about each one, giving the user a choice and allowing them to have control.

With regards to the first gallery page wireframe, I decided to structure images in a block format and in a simple way to create a professional and consistent feel to the web page. When hovering over these images, this would display information about each image in the gallery to the user, enhancing the user experience through the form of an animation. As well as displaying information, a button would also appear allowing for the user to select this to view the selected image more clearly in the form of a modal.

For the first events page wireframe, I thought it would be beneficial to structure the page with one event for every row with either different background images or colours to distinguish different events. This would therefore act as a visual aid to the user in knowing how many events there were available to read about on the page. Similar to some of the other wireframes, the titles of the events would be placed first with information and links to view more information about the events below, allowing for the user to read more if they wanted to. This information would be either placed in a modal or on a separate page to attempt to reduce the amount of information on the page and keep visitors to the page engaged and interested. It is also worth noting that the latest event would be placed at the top of the web page with the older events being placed further down the page, hence encouraging visitors to read about the upcoming events and hopefully encourage them to become involved.

For the first contact us page wireframe, the structure of this page was different to the other pages as this wouldn't include an introduction section and the title would be placed centrally. There would also be a background image placed at the top of the page as this was something that the client had mentioned they liked about one of the current competitors. To view where this was inspired from, please view the 'PDF' document via selecting the link called 'CFENC Other Processes Document' at the end of this section. I also decided to place the content for this page in a column format as I thought this would create a more pleasing appearance than if I were to place the content in a row format. I also thought including icons would enhance the design of the page and be more beneficial than titles, adding more variation than if I were to place everything in the form of text for the contact details section. With regards to the ‘SUBMIT’ button for the contact form, I thought it would be better for the user if I placed the font for this in uppercase to indicate it as a button to select once finished with providing details to the form.

As mentioned previously, I created two sets of initial wireframes and the second set can be viewed below. Likewise to the first set of wireframes, I decided to place the logo at the top of the page with the title of the website placed next to this. However, within this set of wireframes, I decided to also include a search bar as seen in the provided competitor websites to allow for users to perform a quick search and find any information within the website that they wanted to view. For the same reason as the other set of wireframes, these aspects are something that will be seen consistently through these desktop wireframes because, as explained before, I believed it would be good for the user to remind them of the organisation they are either reading about or considering helping as well as being able to navigate to the home page through a link placed around the logo. As was the same for the other selection of wireframes, the navigation bar and footer sections were also situated in the same place for all of the wireframes seen below and this was due to the fact that I wanted to maintain a consistent appearance throughout the website for the user, enabling them to easily recognise where different elements would be placed, hence creating a good user experience through an intuitive interface. Within the navigation bar, the links to the different pages would be able to be interacted with and in the footer, items such as contact details and legal policies (e.g. a privacy policy) would be included for quick reference and legal purposes.

For the second home page wireframe, I decided to include a slideshow of images underneath the navigation bar as this was something that was currently included on the CFENC website and therefore, I thought this would be good to keep to help provide an overview of the website through different images. However, on this wireframe, the title of the page would be placed above the slideshow centrally with a sub-heading, descriptive text and a selection of images placed in the same format as that seen on the first home page wireframe. Again, the purpose of this was to help provide an overview of the organisation such as their values and work and also direct them to other aspects of the website.

Regarding the second history page wireframe, the title of this page was placed in the same place as the other pages to create a professional and consistent appearance throughout the website. Regarding the content of this page, this time I decided to place the images on the page instead of facts which would relate to the piece of information supplied when hovering over each image. This would therefore create a more visual page and interest the visitor. The year of each event was placed under each image to display to the user the time in which the event occurred and arrows were placed between each image to display to the user the order in which these events happened, symbolising a timeline of history.

Regarding the second 'Who we are' page wireframe, the title of the web page was placed in the same place for the same reason as stated before but this time there would be some introductory text to explain to the user about the people at CFENC or about CFENC in general. The images this time wouldn’t have a line attached to the top of them as I thought this may be easier to structure with regards to programming. The same format would be integrated as before for the same reasons stated before regarding the first wireframe. The social media section of this page would also be the same as the other wireframe created as I thought that this was the best way to structure this at the current time with titles above each social media channel’s content.

For the second projects page wireframe, I thought it would be beneficial to have a sponsored project placed larger and higher up the page than the other projects to signify to the user that this is the project that is the most important and relevant at the current time. This was inspired by one of the provided competitor websites and to view this inspiration, please view the 'PDF' document via selecting the link called 'CFENC Other Processes Document' at the end of this section. Another difference between this wireframe and the first is the fact that an overview of information was included for each project, helping to entice the user and engage them into finding out more about each project which they can then view more information through selecting the ‘View’ button/link. This would then display more detail in either a modal or on a separate page, allowing the user a choice to either continue reading or to visit another page. The name of the projects would be placed at the top of each container to display a hierarchy of information, structuring the information in a professional and consistent manner.

With regards to the second donations page wireframe, this time I decided to place the three sections in a row as I thought that this would help reduce any unnecessary white space as would have been the case on the other wireframe. The same format for these sections would be used as before as this, in my opinion, was the best way to structure this with regards to the visual appearance. On this page, I decided to include introductory text to be able to introduce the user to the purpose of this page as well as provide an overview. The other main difference for this wireframe compared to the other wireframe is the fact that I thought including the ‘DONATE’ button would be beneficial to try and encourage visitors to donate to a good cause, hence helping the organisation and most importantly those in Nepal.

The second sponsor a child page wireframe also demonstrates the fact that there was to be an introductory section which would welcome users to the page and explain what they can expect to find. The difference with this wireframe and the first is that in this one, the children would be displayed within a card format as seen with the framework ‘Bootstrap’. To view this inspiration, please view the 'PDF' document via selecting the link called 'CFENC Other Processes Document' at the end of this section. Furthermore, information would be displayed about each child when hovering over each image, providing an enhanced user experience with a link that would enable the user to sponsor the child of their choice. The ‘Sponsor’ buttons/links were of the same concept of the previous wireframe and the explanation of this can be viewed there.

For the second shop page wireframe, I explored a different approach by having the images of the shop items in circles and in a block format as I thought this could possibly be integrated as well. The introductory text section had also been included to introduce users to the page and again provide an overview of the content on the page as well as instructions. The same concept would be incorporated as before, displaying each product in full size either in a modal or on a separate page along with information about the product and its price if the user were to select an image. As is also evident, I thought it would be beneficial to integrate a shopping icon at the top of the page to signify that this is an e-commerce section of the website.

Regarding the second gallery page wireframe, I decided to structure the gallery images differently for this wireframe, gaining inspiration from a couple of football galleries found through research on the Internet. These were galleries of both the rangers.co.uk and www.chelseafc.com websites. To view this inspiration, please view the 'PDF' document via selecting the link called 'CFENC Other Processes Document' at the end of this section. I thought that displaying the gallery similar to the Rangers football gallery would be beneficial as this was both professional and tidy and highlighted the selected image in an obvious and clear way. I thought I would also include a description of each image as this would help the user to understand the context of each image, also inspired by the Rangers football gallery. The Chelsea gallery was one which I used less to help as this didn't include a description of each image. Elsewhere on the page, an introductory section would be included to explain about the gallery page as well as providing instructions on how to operate the gallery.

With relation to the second events page wireframe, there was introductory text to again introduce the user to the page, providing an overview of what they would expect to find. With this wireframe, I thought it would be beneficial to have a few events positioned on bunting to symbolise the fact that these are events. There would be images of events and information with buttons/links placed beneath for the user to select to read more information about each event. This would either appear in a separate page or within a modal to reduce the quantity of text on the page. I thought that this might help to produce a friendly appearance whilst also trying to maintain a professional and consistent appearance throughout to try and encourage users to view more aspects of the website and ultimately help CFENC.

For the second contact page wireframe, I decided to keep the same layout as before as I thought this was aesthetically pleasing. However, this time I decided to remove the contact form as on some websites I had viewed either for this project or during another instance, occasionally contact forms weren't included. I wanted to explore this approach as well. Instead of including a contact form, I replaced this with social media contact details, encouraging users to visit the social media platforms provided by CFENC. The final element to notice is the fact that I decided to keep the icons as I thought this was visually pleasing and had noticed this had been included on a few websites as well. To view the inspiration for this wireframe version, please view the 'PDF' document via selecting the link called 'CFENC Other Processes Document' at the end of this section.

Initial Wireframes - Mobile Versions

As well as creating the desktop wireframes shown above, I also decided to create two sets of mobile wireframes to reflect the desktop wireframes structure but on mobile devices instead. The main aspect to mention is the fact that most of the content would be displayed in column format to suit the size of mobile devices. Another key aspect to note is that the title of the website was included with the logo on the responsive navigation bar as well as at the top of each page to remind the user of the organisation they are viewing. As well as these elements, a 'hamburger menu' was included to allow for the user to select and navigate to different pages on the website with the search bar being placed at the top of the page regarding the second set of wireframes. This would make it easier for the user to identify how to search for content when first visiting the website on a mobile device. These wireframes can be viewed below.

Wireframes Created from Feedback

In the meeting between myself and the clients on 1st September 2018, as well as showing the clients the colours and fonts, I also decided to show both the desktop wireframe sets I had created as shown previously. This was to demonstrate different types of structures for each web page. From doing this, I received feedback for various pages which were the home, sponsor a child, history, shop and contact pages. Key aspects were to explain how visitors could help regarding the sponsor a child page rather than being specific, to structure the contact page in a block format, as seen on a company website shown to the client and to also contain the history facts in prayer flags rather than circles. Another major aspect mentioned was to create a partners page to show who CFENC were currently collaborating with. To view the full feedback, please view the 'PDF' document via selecting the link called 'CFENC Other Processes Document' at the end of this section.

After receiving this feedback, I decided to create a few more wireframes to include some, if not all of this feedback. These can be viewed below.

For the first partners page wireframe, I decided to include the introduction structure as seen on the second set of wireframes displayed previously to help introduce the user to the page and with regards to the partners, I thought it would be beneficial to have these displayed in a row in a card format as seen with 'Bootstrap'. The image of each partner was placed first with the partner’s name, description and link/button to their website to view placed underneath, creating a hierarchy of information, inspired by some of the competitor websites. Please note that the same structure with regards to the heading and footer sections was used as that shown in the first set of wireframes shown previously. To view all inspiration, please view the 'PDF' document via selecting the link called 'CFENC Other Processes Document' at the end of this section.

Regarding the second partners page wireframe, this had the same concept to the previous example with relation to the content placed on the page but the introductory section included an image to add more visuals to the page and the partners were placed in a column format. These would alternate with regards to positioning of content to add variation to the page and the images would be circular. Likewise to the first wireframe, a hierarchy of information was included but in a horizontal manner instead to maintain a professional feeling to the website. Please note that the same structure with regards to the heading and footer sections was used as that shown in the second set of wireframes shown previously.

Regarding the contact page wireframe displayed above, I decided to integrate the ‘DONATE’ link/button into both the banner section of the page and further down as well, as requested. The ‘DONATE’ button was placed centrally further down the page as I thought this would help it to be more obvious to the visitor and help to encourage them to interact with it. I decided to keep the structure of the introductory section of the page as the same as shown in the previous set of wireframes for the contact page. This was because I thought this would structurally be more appealing than if I were to align this to the left or right of the page but also due to the fact that it would complement the image shown underneath. As is also noticeable, I integrated a block format as this was an area the client mentioned that they liked, taking inspiration from the ‘Edit.’ website. Within these blocks I thought it would be beneficial to contain a map locator, links to social media platforms, contact details and a contact form as this would allow visitors to choose their preferred method of contacting CFENC.

For the new sponsor a child page wireframe, I believed it would be beneficial to include an introductory section with text to provide an overview of the information on the page or to relate to the purpose of the page. I also believed adding simple instructions would be good to inform visitors of how they could help sponsor a child in a clear way. Underneath this, I included examples of children this had helped already to show how this method is helping. An image of each child was placed first with their names and a short description underneath to again create a hierarchy of information and structure this in a professional and clear way. This was all based on the feedback provided by the clients, stating that they didn’t want this page to be specific to sponsoring a child but instead to how people could help in general.

Desktop High-fidelity Wireframes

After creating the wireframes shown previously, I then decided to create high-fidelity wireframes, using ‘Adobe XD’, where I attempted to integrate both the feedback received as well as viewing all of the wireframes I had already created. This then allowed myself to create the first set of high-fidelity wireframes which can be viewed through selecting the 'Initial High-fidelity Desktop Wireframes' link below. Please note that due to not having received any content at this stage, this therefore meant that I utilised the images available on the current website. Some of the aspects from previously undertaken research with regards to colour schemes and fonts were taken into consideration whilst creating the high-fidelity wireframes.

After creating the first set of high-fidelity wireframes and progressing with the coding of the website, of which the process will be shown in multiple documents at the end of this section, I then decided to refine the previous wireframes in a new file. I changed the footer section to allow for understanding of how this could be built through programming as well as adding new elements to attempt to enhance aspects of the design including the flags of the United Kingdom and Nepal. Please note that some of the icons/images were integrated from other websites of which will be referenced in the 'PDF' document under the link called 'CFENC Other Processes Document' at the end of this section.

Mobile High-fidelity Wireframes

After creating the high-fidelity wireframes for desktop devices, I then decided to also create one for each page for mobile devices to reflect the content on a mobile screen resolution. The main aspects to note here were including the content in a column format as well as including both a search bar to allow for users to search the website and a ‘hamburger menu’ to allow the user to navigate the different web pages on the website through a drop-down list. To view each high-fidelity wireframe, please select the ‘High-fidelity Mobile Wireframes’ link situated below.

High-fidelity Mobile Wireframes

Creating the Sitemap and Flow Diagram/Chart for the new CFENC Website

Due to the fact that the sitemap was an aspect that I could only complete during the latter stages of building the website, this therefore represented a high amount of detail with regards to the different proposed links on the final CFENC website. With regards to the flowchart, the purpose of creating this was to demonstrate the user journey as they navigate through the website. Please note that I created one flowchart after completing the majority of the website as this was a stage when I could have a full understanding of the structure of the website.

The Inspiration for both the Sitemap and Flow Diagram/Chart

In order to gain inspiration for the sitemap, I viewed a few examples through Internet research to help me understand how I could structure my sitemap. Regarding the flowchart, I utilised one of the aids I used in my second year for the ‘Whitchurch Silk Mill’ project as I believed this to be very helpful. I also viewed an example as well as viewing the flowcharts I created in my second year to help inspire myself, integrating some previously used aspects where relevant. The images of inspiration for both aspects can be viewed below with the first four relating to sitemaps and the last two relating to flowcharts.

From the sitemap research, I understood that there was a hierarchy involved where the main aspects would be placed at the top with the other aspects being placed in order of importance. I also understood that a brief overview was included to state what each section related to and that arrows were utilised to direct the flow of navigation.

From the flowchart research, I realised that different shapes signified different actions within a flowchart and that arrows were utilised to display the journey of the process. Also, I understood that brief pieces of information were used to state each process clearly.

The Created Sitemap and Flowchart/Diagram

After viewing the examples shown previously for each, I then created the final sitemap and flowchart for the website and this can be seen below. Please note that the flowchart was a basic flowchart due to time constraints, however this still demonstrates a user journey throughout the website.

Regarding the sitemap, the banner and footer sections would apply to all pages which is therefore why these are linking to each page with the logo being able to link to the home page in the banner and the footer providing social media links as well as legal links (e.g. a privacy policy). I included the links that were situated on each page, including links to aspects such as social media and external websites. The text in red related to each page heading and for the shop and gallery pages, as the aim was to have filtering of images/shop items, this therefore meant that the blue text related to the outcomes of selecting a filter. The ‘Read More’ and ‘Buy’ buttons relate to the options to select on each shop item and the ‘Images’ for the gallery page would allow users to select an image to view more information about it.

For the flowchart, I included some initial actions with the user connecting to the Internet and opening a website browser to navigate to the home page of the website. A decision is then made because if the user taps or clicks a page link on the website, then questions are asked until the page selected is identified. Once the page has been identified, another decision is made to stop the process if the user doesn’t interactive with or read the content on the page as this means that they will exit the website. This same process is undertaken if the user decides not to tap or click a page link. After the user reads or interacts with the content on a page, a process of deciding if a user navigates to another page is undertaken, identifying the page again. The decision is then again made to stop the process if the user doesn't interact with or read the content on that page. If the user does interactive with or read the content on that page, the process repeats until the user stops these actions.

Review of the Work Completed at this Stage

I believe that throughout undertaking the processes shown above, I had managed to understand different aspects of an individual website project and as stated previously, I had documented this in the form of a 'Word' document which had then been converted to 'PDF' format. The information in this document mostly represents that of the content above but also includes other areas which haven't been included on this web page. To view this document, simply select the link provided below.

CFENC Other Processes Document

The Development/Programming Process of the CFENC Website

Although some of the work shown above was either completed during or after the programming process of the website, the next stage after the majority of the tasks shown above had been completed was to begin developing the website through the use of programming languages. To view this process, please view the ‘PDF’ documents provided below. Multiple documents have been included due to the fact that including all of the work into one file would become too large in size to open.

The Testing Process of the CFENC Website

After progressing the website to its latter stages, I then decided to undertake testing, resolving some experienced issues and to show this process, I have included a document below which documents this. This has been included separately to the development document above but still acts as part of the development/programming process.

The Final Outcome/Conclusion

As would have been seen above for this project, I undertook many different processes to help myself produce the best possible outcome. The final outcome of the website can be viewed below, either on this page or alternatively through an external link. Please note that I am currently still waiting to receive content to place onto the website but I have decided that this will be something completed at a later date when having received the content from the clients. Overall, I am pleased with the outcome and when undertaking the building process of the website, I received some feedback from the clients who were also very pleased. This feedback can also be seen below. Please note that due to the fact that the contact form on the website wasn't high in security, I therefore decided to disable this for the final outcome. However, to compensate for this, I have included a video also below to show this functioning. All of the aspects mentioned above can be viewed below. To conclude, I believe this project has been successful and I am proud of the outcome.

Please Note: As I am currently awaiting full website content from the clients, I have been unable to create a handover document. However, it will be my intention to assemble a handover document once this content has been received and published and if this is what the clients desire. Once 'live' on the clients server, I will also offer continued website support as and when required.

The Feedback from the Clients during the Building Process

The Final Outcome of the Website Integrated into this Page

The Video of the Contact Form Functioning

Overview/Review of the Undertaken Work Experience

Throughout the week at 'The ICE Agency', I managed to learn many new concepts with one main technology being 'Flexbox' to allow for easy structuring of each page. 'WordPress' was also utilised to allow for integration of the plugin called 'Advanced Custom Fields' as well as integration of 'page templates'. Throughout, I ensured that I asked questions as well as attempting to explore many different aspects to gain the most from the work experience. You will be able to view both the outcomes and development process at the end of this section through the provided videos and ''The ICE Agency' Undertaken Development Work with Outcomes Document' link.

Feedback Received from the Work Experience

After finishing the work experience at 'The ICE Agency', I was kindly provided with some feedback from the company and this can be viewed below.

"Daniel has a real passion for web development. He has a brilliant attitude and commitment to learning new skills. During his week at The ICE Agency, he got hands-on experience working with WordPress and gained knowledge using PHP, HTML, CSS, SASS, JavaScript, Gulp and Apache. He also learned about working within a development team, using JIRA and Git".

The Final Outcomes and Development Process Document

The Final Outcomes for the Home Page (Desktop and Mobile Devices)

The Final Outcomes for the About Page (Desktop and Mobile Devices)

The Development Process Document

Overview/Review of the Undertaken Work Experience

Throughout the two weeks at 'Coullweb', I managed to enhance my front-end website development skills through both making front-end page edits to one of the company client websites as well as creating a landing page to link to different aspects of a website. I learnt of the 'skew' transformation in 'CSS' whilst undertaking the landing page task. Regarding back-end website development, an area I am not as confident with, I utilised the technologies of 'PHP' and 'MySQL' to create a fictitious register and login system. I also utilised 'WordPress' for another task to create a custom post type called 'clients' which would then allow for a clients page to be populated with clients. This was implemented so that I would be able to allow for filtering of clients by different categories, displaying the clients in alphabetical order. Throughout the work experience I was kindly helped by the developer at 'Coullweb' who gave me advice and explained different aspects to me in detail. To view the development processes as well as the video outcomes for the work experience, please see the end of this section.

Feedback Received from the Work Experience

Whilst undertaking the work experience, I asked if it would be possible to receive some feedback regarding my time at the company. I have been informed that I will receive this and the company are in the process of completing this for myself.

The Final Outcomes and Development Process Document (Viewable below)

The Clients Page which Could be Filtered by Categories

As explained previously, I undertook the task of creating a clients page that would display all clients alphabetically and allow for filtering of these by category. This process can be viewed by the video showing the final outcome below. To view the development work of this task, please refer to the document at the end of this section.

The Register and Login System

As stated previously, I undertook the task of creating a fictitious register and login system which would allow users to register an account, log into and out of their account and also be able to reset their password if required. To show the outcomes of all of these actions, I have included videos below which show the different processes of the system. To view the development work of this task, please refer to the document at the end of this section.

Registering an Account and Logging in and Out of the System

Resetting Password (Parts 1 and 2)

Resetting Password (Part 3) and Page Redirects if Unathorised Access Occurs

The Landing Page

As explained previously, I undertook the task of creating a landing page to link to different sections with the main purpose of each hovered aspect growing to highlight the aspect interacted with. However, due to time constraints, this was unable to be fully completed. This process can be viewed by the video showing the final outcome below. To view the development work of this task, please refer to the document at the end of this section.

The Development Process Document

Introduction

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. To view the previous work which had been undertaken before this point of the project, please click on the links provided below. You will then be taken to the corresponding pages where you will need to select the links called 'Cherry Childcare' in the navigation bar.

Contacting the Client

After contacting the client to explain that myself and the other developer I was working with wouldn’t be 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 page 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’.

Explanation of this Section of the Page

The more detailed development work can be viewed at the end of this section under the link named 'Individual Development Document for the Cherry Childcare Project during the Summer of 2018'. This demonstrates the different processes undertaken. However, 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 apperance may not reflect 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.

Previous Cherry Childcare Website (Old Appearance Examples)

Cherry Childcare Home Page - New Appearance

Our Nurseries Page - New Appearance

WordPress Default News Page Created by the other Developer - New Appearance

For our Parents Page - New Appearance

Careers Page - New Appearance

About Page - New Appearance

Enquire Form Page - New Appearance

Individual Nursery Page (CherryVale Example) - New Appearance

Privacy Policy Page - New Appearance

Individual Nursery Change Sessions Form Page (CherryVale Example) - New Appearance

Individual Nursery Email Form Page (CherryVale Example) - New Appearance

The Development Process for the work during the Summer of 2018

As has been mentioned previously in this section, I did undertake the process of creating a document which shows the process of this project in more detail from a development point of view. This can be viewed by simply selecting the link called 'Individual Development Document for the Cherry Childcare Project during the Summer of 2018' below. This also contains the images of the final pages, as shown above, but across both tablet and mobile devices as well.

Introduction

Due to the fact that at the current time, the old design of the DHW Website wasn't appealing and that in some circumstances, the website wouldn't be fully responsive, I thought it would be best to use some of my spare time during the summer of 2018 to create a new design for the DHW website which would attempt to work fully across different devices.

The Current Appearance

The old appearance of the website appeared to be unattractive and in my opinion wasn't appealing to the eye with some elements appearing to be too clunky. This can be seen with the examples shown below.

The Old Home Page Appearance of the DHW Website

The Old 'Y1S1 WORK' Page Appearance of the DHW Website

The Old 'Y1S2 WORK' Page Appearance of the DHW Website

The Old 'GENERAL WORK' Page Appearance of the DHW Website

The Old 'Y2S1 WORK' Page Appearance of the DHW Website (A few Examples)

The Old 'Y2S2 WORK' Page Appearance of the DHW Website (A few Examples)

The Appearance after the Changes/The Final Outcome

After spending a considerable amount of time on the redesign of the 'DHW Website' and solving some problems in the process of doing so, the appearance now was more professional and continued to use the same branding as before with relation to colours. However a new font was introduced, courtesy of 'Google Fonts', called 'Montserrat'. To view the refreshed and redesigned appearance of each web page, please select the link(s) you wish below. This is acting as the final outcome for this project. Please note that some of the pages may have changed since this was completed. Furthermore, if you would like to read a more detailed process of this project, please select the link named 'The Redesign/Development Documented Process of this Project' as this is a document which I have created specifically to explain the processes of this project and some of the issues that I encountered throughout. This is to show my development process of this project.

Introduction

During the summer, I was contacted by one of the clients at Whitchurch Silk Mill to ask if they could utilise the project that myself and my group had produced during our second semester of our second year. After contacting the client, it was agreed that some changes would have to be made to the project before providing the finished version to the client. The current stage before the refinements had been made can be viewed below, either through interaction on this page or by selecting the link to view the project on a separate page. If you also wish to view the work that had built up to this stage of the project in year 2 semester 2, please select the link below called 'Y2S2 Work Process' and then select the 'Whitchurch Silk Mill' link situated in the navigation bar.

The Project at the Current time before the Refinements had been Applied

Refining the Appearance of the Project/The Final Outcome of the Appearance

One area of the project I undertook was refining the appearance as currently it was well-structured and designed but needed to be more professional. Therefore, through code changes I created the following outcomes for each page as will be seen below.

The Final Appearance of the Main/Home Page

The Final Appearance of the Loom Page

The Final Appearance of the Waterwheel Page

The Final Appearance of the Quiz Results Page

The Final Appearance of the Instructions Popup Page

Other areas of the Project which were Addressed/The Final Outcome of the Project

In addition to changing the appearance of the web pages, I also managed to resolve some current issues with the project such as resizing the information 'iframe' to fit its contents on mobile and tablet devices and preventing the waterwheel models from continuously growing in size. These processes can be viewed in the development document placed at the end of this section under the link called 'The Detailed Development Documentation of this Project'. This shows the my process undertaken throughout. To view and interact with the finished version of the Whitchurch Silk Mill project, please see below where this has been included on this web page. Alternatively, you can select the link also provided below to interact with the project on a separate page.

Please Note: At the point of completing this project, there was no requirement from the client for a handover document. However, I have informed the client that I am available to offer continued project support as and when required.

The Final Feedback Received

Although this was received before completing the document provided above, I have decided to include the feedback from the client below. This was received before supplying the client with a memory stick to use at the mill after showing the outcome via email. The client was very happy with what had been completed. To reflect on this continued project, I believe this has helped me understand how to resolve issues whilst testing as well as understanding how to add the final refinements to ensure of a professional and high quality outcome. The final feedback received can be viewed below from Lisa Gale, the Visitor Experience Manager at Whitchurch Silk Mill.

“We worked with Daniel and his fellow students as part of a university project, to create digital resources for Whitchurch Silk Mill. We provided a number of briefs for the students to complete and Daniel took on the challenge to produce an interactive 3D model of our waterwheel and loom. We were very impressed with all of the work that was produced by the students through the course of the project. However, Daniel took this a step further by providing us with the finished product for which we were very grateful. Following the end of the semester, Daniel used his own free time to complete the product, so that we now have a very useful interactive model that we can use with school groups and wider audiences. Daniel was very thorough and diligent and we would be happy to work with him again in the future.”

Introduction

Throughout the semester, further to completing the work experience/projects, I also attended three networking events, all at 'Studio Republic'. These were during the months of October, November and December and I found them interesting as well as enjoying speaking to other people from the industry. The different attended networking events can be viewed below.

Networking Event 1 - 'How to hack the design industry – the Edoardo way'

During this networking event, I managed to provide business cards to several people which will help to improve my reputation amongst the industry. Images of my ticket as well as attendance at the event can be viewed below.

Networking Event 2 - 'What’s Your Story? The art of brand storytelling using photography & video.'

During this networking event, I learnt how the way in which something is produced can help to engage others with the story that you tell. Images of my ticket as well as attendance at the event can be viewed below.

Networking Event 3 - 'From student to professional; finding the balance between work and study.'

During this networking event, I learnt many useful tips on how to work productively, including focusing on one area rather than multiple areas all at once. I found the talk very inspiring and interesting. Images of my ticket as well as attendance at the event can be viewed below.