←Go back
Winter 2020, UK

Heart & Parcel - Brand renewal and launch MVP website

15 minute reading time

Duration

January - May 2021

Role

Brand, UI/UX Designer

Delivery

Brand design & strategy
Marketing material
Research
Wireframe
Prototyping
Design system

Tools

Figma
Slack
Illustration
After Effect

Team

Aco Hsu
Clare Courtney

Rebranding the Heart & Parcel brand experience by cohesively bringing out their vision & principles as branding foundations.

Brand situation

Heart & Parcel was founded in Manchester, England in 2015 by Clare Courtney and Karolina Koścień, two friends with a love of food and the connections and relationships surrounding it. An education and food project supporting people ​learning English to flourish in their local communities and forge connections by developing English language and communication skills through the medium of food.
Core value: Food, Language, Recognition, Community

Challenge

For brand identity

Despite Heart & Parcel's meaningful pedigree, an inconsistent approach to identity and visual communications. Which had left it with a brand that did not convey the full breadth of its offering and expertise.

For website
We were tasked with making the experience for the user as accessible as possible. We tackled the problem of information architecture, unfriendly function for information searching and class booking. An additional consideration was that we needed to add the membership, donation and shopping cart system. Furthermore, to conceptualize and design a new feature for H&P that will help improve user engagement and retention by expanding social capabilities and activities.

Goal

1. Create a visual language out of different forms and colours to represent their core value, brand position and strategy

2. Simplify the process and provide practical and easy ways for individuals to get involved

3. Enhance the long-term loyalty of individuals and establish trust in Heart & Parcel. Increase awareness and motivation to learn English and ultimately empower individuals to get involved.

Redesign brand identity

Design Solution
Aim to create a modern brand identity and align with the features of Heart & Parcel. The new logotype and colour palette are fresh and approachable.

To stay the balance between softness and formality, put the organization's multi-faceted offering at the centre of its story. Besides, we created motion images to express the brand's visual dynamic value.

Visualise four core values of Heart & Parcel

Food

Food
After simplified and geometrised, retain the outline shape from the old logo. The dumpling pattern expresses cooking and food are the integral languages of Heart & Parcel. Another purpose is to remind people that it is an original and symbolic object that H&P begins their class to interact with participants.

Language

Language
The idea is from "Steep Learning Curve". Learning a new language takes a lot of time but doesn't see an increase at first. However, it will start getting better and better eventually, if we keep practising it.

Recognition

Recognition
The centre of a circle to each side is equal distance. To show people they are all equal in the H&P no matter what's their level of English language skill and where they come from.

community

Community
This pattern presents the meaning of heart and arrow. It's inspired by the name of "Heart & Parcel". People in H&P have coherence. The members are connected or united because they share common aims, engaging, or social life in a foreign country.

survey

User research - survey

We prepared a survey with Surveycake and distributed it among multiple groups of their staff, students and supporters. The purpose was to determine the essential pain points when using their website.

Current site analysis

1. An inefficient process of class booking, buying the product, membership login, donation, finding helpful information and resource

2. Without a clear mission statement, stories and other information on the homepage

3. A lack of evidence showing the impact that Heart & Parcel has made and the impact you can have as an individual

4.It’s not friendly for browsing on mobile

User journey mapping

We looked at the current Heart & Parcel website to determine their areas of focus and what could be improved to address business and user needs. We found that the website catered to organizations rather than individuals.

We would like to demonstrate potential scenarios where users might interact with Heart & Parcel’s website, including the process of donating and how to book a class.

Class booking experience

Class booking experience

Donating Experience

Donating Experience

Comparative analysis

We observed the websites of other non-profit organisations, Bioforce and Obakki Foundation. We conducted a competitor analysis to gain inspiration and identify the best methods for the website redesign. We figured out some common features:

1. These websites all have a donation button on the navigation bar. However, the original website of H&P lacked emphasising on it as one of the main actions.

2. These websites displayed their mission statement at the beginning of their homepage.

3. These websites have pre-determined donation amounts for the donation page to make the donation process easier and more efficient for users.

4. These websites list more friendly layouts to browse the articles, events and news.

5.These websites are RWD versions, friendly for desk, tablet and mobile users.

Information architecture

With the comparative analysis and inspiration results from other websites, we discussed with H&P and created a site map to define the website's overall structure. It's a step to ensure that products are placed where users expect to find them when visiting the website and make the experience more intuitive.

IA

User Flow

User Flow

Sketch

We quickly explored several concepts for the website layout to start this process, as illustrated by the quick sketches below. It helped us translate our thoughts into tangible ideas and better visualize our problems.

Sketch

Wireframes

After defining the core functionalities that we needed to include in our solution, we created quick, high-fidelity wireframes—using these wireframes to test these with 4 participants to validate whether these solutions addressed both the user and business needs.

Wireframes

Style and components

components

Website final design

Website final design

Brand Elements

Brand Elements 01Brand Elements 02Brand Elements 03Brand Elements 04Brand Elements 05Brand Elements 06Brand Elements 07