“Emily Harris Foundation”

Overview — Project Brief

This was a one solo week project, during my studying in General Assembly. The project was to reskin the website of our choice, on different viewports. I had to keep the functionalities, structure and content identical, only changing the UI and branding. A list of websites were given from the tutor and all of them were charities, it was upon me which website I wanted to redesign. I chose to do the Emily Harris Foundation, I loved the story behind the creation of this charity and the cause. I created 4 pages for each viewport, with Sketch, 3 onboarding pages and 1 page with the supporters. The exact size of the viewports was given by the tutor.

Deliverables

3 pages of each desktop (mobile, tablet, PC screen)

A styleguide, documenting your decision on typefaces, colour scheme, layouts, spacing and components (e.x. button states).

Users and audience

As this was a concept project, no real data was given with analytics of people entering the website. I assumed that the users visiting the website would be adults, most commonly parents as the charity;s cause is helping parents and families whose their babies are in the neonatal intensive care of King’ Mill hospital. Also, supporters and people that are interested to financially invest in this charity.

Process and what I did

I started with having an in-depth look at the website, to make sure I fully understood the navigation. I looked at the photos they used, the information that tried to include in every page and the styleguide they followed.

Following to that I did my own personal research with other charities, specifically the ones whose related to kids. I created a moodboard, keeping in mind the colour scheme of the existing website I created a new Visual Design Toolkit. I started with doing some paper sketches, lo-fi wireframes. Having the complete styleguide and the main outline of every page.

My moodboard:

Based on the moodboard, I wanted something playful and with character. There was a lot of text on the supporters page so I had to keep the playful character , but still make sure the work of the charity and the event they do are well organised and with a good cause. In the current website the donate button and the subscribe button was hidden and as the main aim of a charity is to save as much money as possible from donations I wanted to emphasize these buttons and make them very visible. I also reorganised the navigation on the homepage, I wanted to be a bit more clear where you go and what to do as in the current website you get lost quite easily. I changed the carousel quotes and design, it was 3 pages with the same quote written. I also made the social media appearance a bit smaller on the homepage and created a carousel with the upcoming events instead.

I gave enough space for the text and the logo appearance each of the sponsors, whilst redesigning the supporters page.

I simplified the footer but making sure all the main information was there. I added a picture of the nurses because its more humane to see faces rather than just written words saying about the hard work that the nurses are doing in the intensive unit.

Styleguide

Colour Scheme

Typography

Layout Settings

Exact layout settings, sizes of viewports and alignment were given from the tutor.

Key learnings

Outcomes and lessons

What I learnt from this project was to document the design system from the very start, the complete set of design standards and principles, along with the toolkit (UI & code components). If I could do the project from the beginning I would keep my Sketch file clean and tidy with naming all the layers, boxes, rectangles icons. I would be more consistent with spacing from the start, create type style and colour style from the start to save serious time of the project.