UI Case Study | The First Time Designing Responsively We Never Forget
By: Ana Van Schalkwyk
Tags: UI, Visual Design, Case Study, UI Design

An unsolicited redesign for Emily Harris Foundation

Overview

This re-skin and rebrand challenge was developed in a 4-day design sprint as part of the User Experience Immersive course by General Assembly.

The following case study will take you through each step of my design process following some parts of the double diamond method: Discover, Define, Develop and Deliver.

The Brief

To re-skin and rebrand a website of my choice from five options of charity’s websites.

Deliverables included:

Six screens: Home Page + Page of my choice across three viewport sizes: Mobile, Tablet and Desktop;

Home Page + Page of my choice across three viewport sizes: Mobile, Tablet and Desktop; Style Guide documenting my design decisions.

Mandatory: color, typography, layout.

Optional: logo, imagery, additional pages.

Discover

Why Emily Harris Foundation

From the five options I had been given, I opted for Emily Harris firstly because I do appreciate the work they are doing in supporting families and NHS staff in the neonatal care unit of King’s Mill hospital. Secondly, because their website feels really disjointed, wordy, and they put a photo of Emily, their passed newborn baby, as the hero image on the home page (!).

Pages I decided to redesign across three viewport sizes.

Understanding Responsive Design

Before we get started, what is responsive design?

“It is a design approach that came about in response to the evolving use and fast growing list of screen sizes that websites could be viewed on.” “It is a flexible design that can stretch or shrink to fit the viewport size.”

After learning about it through GA classes and activities, I also wanted to understand how this works in practice. So I visited Airbnb’s website and changed the viewport sizes, making notes on a Sketch art-board about the main differences I found between them.

Desktop, Tablet and Mobile viewport sizes on Airbnb’s website and my notes.

What are their competitors doing?

When I better understood responsiveness, it was time to move forward and research the charity market and current competitors. So I began to explore responsive charity websites.

Aiming at researching charities that help kids, I visited Unesco, Give a Smile, World Vision and Save the Children websites and made notes of the main features and similarities between their websites.

Some of the things that stood out to me: predominance of children’s pictures on their Hero; use of colors to play a role in the level of seriousness; use of features to increase engagement such as donation-meter, results and personification.

On Save the Children’s website I took time to analyze the differences in their design across viewports. Something I got inspired by and followed later on in my design was the way in which they tell their story: “who we are”, “what we do” and “how you can help”.

Define

Brand Values

A brand is a personification of a product, service or organization. It has a name, reputation and personality. Therefore it was worth it spending time defining it assertively.

From what I could observe by reading the “About us” section on their website, it would be fair to say that their values were:

Positivity; Inspiration; Compassion; Commitment; Care; Support.

Brand Personality

Personality could be summarized as “the characteristics that people describe how they feel about your brand, rather than what they think it is or does.”

Reflecting about the values above led me to identify the following 6 personality traits:

Positive but not Naive; Inspiring but not Manipulative; Compassionate but not Too Lenient; Committed but not Stubborn; Caring but not Invasive; Supportive but not Dominating.

For the third value, I had initially thought of “Compassionate but not Stupid” but then I thought that “stupid” could sound harsh and I actually wanted to say “not too lenient”. So I changed it.

Brand Position

The next step was positioning the brand by picking 5 sets of values from the list below and marking where the brand sits on the scale. Having worked on the values and personality, it became very clear to me where the brand should be positioned:

It would be more neutral in terms of formality, more elaborate, modern, colorful and homemade. A bit more feminine and very gentle and accessible.

Establishing a Tone of Voice

“Your brand’s tone of voice is the distinctive way that you communicate with your customers, both verbally and visually.” “Your tone is not only about how you speak, but also the words you use and how you use them (i.e., the cadence and rhythm, velocity, and length of your speech).” Felicia Sullivan for Medium.

To express Emily Harris’ tone of voice, I wrote the statement below aiming to communicate their values and personality without mentioning them, just writing in such a way that the tone would convey the message.

Sketched Word Association

Next up, to help me start visualizing design ideas, I chose one keyword from Emily Harris brand values to come up with a word association off the top of my head. I sketched and brainstormed words associated with “support”:

Sketched Word Association

This gave me great clarification of which elements could be part of the brand’s visual identity. It was also the starting point of creating a new logo.

Proto-Persona

Before starting the design, I created a Proto-Persona. Unlike the standard Persona, Proto-Persona is based solely on the assumptions of stakeholders.

Creating this helped me to center my design on the user that I assumed would use their website and therefore be more assertive in my design decisions.

Karla, Proto-Persona

Develop

Mood Board

Mood boards are a great design tool to visually define brand personality and app’s visual identity. It should include brand keywords and notes and should feel focussed and connected to those keywords.

First step: I gathered visual inspiration and reference based on the brand keywords and compiled these images into an art-board on Sketch.

Second step: I made notes and observations as to what was working and what was not when it came to representing the brand and the emotions it was trying to evoke.

Third and final step: I tidied up the mood board notes, laying them out in a clear fashion so it would be possible to understand where the apps’ visual identity would be heading to.

It became very clear to me that I needed to have warm colors to represent care, gentleness and compassion. But also cold tones that convey a bit of sadness and seriousness that are part of someone’s life when having a baby in the neonatal care unit.

Color Palette

These inspirational images from the mood board clearly set the path for creating the color palette. I started doing it by grouping the most frequent colors present in these images.

Next up I played with their level of brightness (HSB) and lightness (HSL) on Sketch to have as many hues as possible and be able to combine them in the designs.

This is what I came up with:

Typefaces & Hierarchy

Looking at the mood board, there was a predominance of sans serif typefaces. I also positioned the brand to be more modern than traditional. Therefore the decision was made on having a sans serif.

Looking at fontpair.co I found the suggestion to pair Raleway for headings and subtitles with Cabin for body copy.

With the help of the Type Scale from material.io I found the right hierarchy and sizes for those fonts I had just chosen.

Paper Sketch

Next I sketched 6 screens that were part of the deliverables: home page and “what we do” page across desktop, mobile and tablet. My goal was not to have it perfect for the first time, but to start having ideas that would influence my design.