UI Case Study | The First Time Designing Responsively We Never Forget
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;
- 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 (!).
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.
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”:
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.
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.
My goal was to redistribute features on the Homepage using this space to tell the charity story in a logical way.
On “Use of Funds” page, the goal was to make use of more images and icons between text, so Karla (my proto-persona) would be able to scam it through without having to read it in full, tackling the wordiness of the website.
Low-Fi Wireframes
After reflecting about my paper prototype, I created the digital low-fidelity wireframe on Sketch to lay the structural foundation that would later on be used as a template to add colors, images and icons.
Having had some feedback on my screens, one small but important iteration I did was to add the number of testimonies on the bottom of that section, so the user would understand how far it goes in case one wants to check them all.
Deliver
Logo Development
It was also important for me to redesign the Foundation’s logo, even though this was an optional deliverable, because I honestly did not believe that it was aligned with the brand values that I just identified.
My creative process started when I sketched the Word Association. As you can see below, from the keyword Support I thought of Growth, then watering a plant, then seeds and how the seeds resemble new beginnings, like a newborn baby.
Curiously I found an image with the same idea when looking for the word “care” and “support” whilst building the brand’s mood board.
From there, I designed on Sketch the new logo, which followed the original curved top title, but kept the word “Foundation” in a straight shape, meaning the soil where the seeds could grow. Those tiny hearts being poured out meant the donations coming from supporters, that nurture those seeds to grow.
High-Fi Wireframes and Iterations
Next I worked on moving my screens from Low to High-Fi by adding text, colors, shapes and icons.
Following I had feedback from UX Design peers and these are the iterations I did:
Style Guide
Below is the Style Guide that I created to record all the design elements and interactions that occur within my wireframes. It also provided the “how to” and “don’t do” for applying styles.
Putting it together helped me in finding inconsistencies in my design and standardizing it across screens and viewports.
Final High Fidelity Wireframes
And finally, my finished piece that re-skins and rebrands Emily Harris Foundation website across desktop, tablet and mobile and aims at communicating positivity, compassion, commitment, care and support.
My idea behind the curved shapes in the background enveloping the hero image, testimonies and social media was to communicate being embraced and cared for by something bigger than you.
Also, by design I used the same color to fill the “How You Can Help” and “Donate” button, so it clearly sends users a message of what is expected of them.
Mobile
Tablet
Desktop
Next Steps
Because this challenge was more focused on branding and visual identity, some UX steps were not followed, such as user interviews and usability tests. So the next step would be to go through these ones and iterate my designs accordingly.
Thanks for reading!
If you would like to check other UX design projects or get in touch, please visit my portfolio by clicking here. See you there!
