web & graphic design

Vent Over Tea

Duration
60 hours
October 2020 - March 2021
Tools
XD
Wordpress
Skills
UX Design
Branding
Content Strategy

Not-for-profit website to communicate services and impact

Background

Vent Over Tea is a not-for-profit organization where I volunteer as their in-house designer. Following the rebrand earlier in 2020, their existing website needed a strategic redesign. The goal was to create a simple website, where visitors could quickly understand the active listening service offered and the organization's mission to encourage bookings and donations. The website will also be used as a key item in the organization's upcoming charity application.

See Website
jump to:
ProblemJourney MappingWireframesBrandingLessons Learned
Problem

Challenges & Opportunities

1

Packed navigation

There are too many options in the navigation. By Hick's Law, it will take more time for visitors to interpret and decide which option to pick. Also, donating to the not-for-profit is not visible.

2

Weak value proposition

The branding is repeated twice on the landing page and the main headline is small and not impactful. The first impression is important to keep visitor's attention.

3

Competing call to action

The main service should be highlighted as the only call to action at the end of the landing page fold, reinforcing the organization's primary focus to the visitor.

1

No navigation indicator

An active page indicator on the top navigation makes it easier for the visitor to remember where they are on the website and the main subject of what they are viewing.

2

Lack of human faces

Priming the visitor with human faces within the content helps them understand what to expect when booking the service. It also brings emotion and connection critical for an empathetic service.

3

Overwhelm of information

Bullet point after bullet point of information is a large cognitive load to process. When explaining how their service works, progressive disclosure can help the visitor process information in smaller chunks.

Not-for-profit websites need to be very clear about what they do and why they do it, to get buy-in from visitors looking to get involved or donate.

Journey Mapping

Visitor booking a Vent Over Tea service for the first time

Matching Visitor and Organizational Goals

A visitor who wants to book a session is likely going through emotions that they need help processing. They want to figure out what to expect from these sessions, to know if it's the right service for them. On the other hand, the organization needs to sensitive to these emotions and must appear trustworthy and friendly. If successful, the visitor will book, or check out other verticals of Vent Over Tea such as their events, blogs, and social media.

Based on an original template by Carolyn Li-Madeo

There's an opportunity to present the value proposition on the landing page to capture the attention of the visitor. Because it's an emotional service, special attention needs to be placed on copy and imagery. Sharing testimonials and de-stigmatizing booking a mental health service are key components to do this.

Visitor wanting to donate to Vent Over Tea

Matching Visitor and Organizational Goals

A donor wants to know the organization's goal and mission as quickly as possible. During this decision, donors are rational and skeptical and will need to see where the donations go and what impact they are making. If all the information aligns with their values, the donor will decide to donate. On the other side, the organization wants to build excitement and create sympathy with the donor to encourage donations.

Based on an original template by Carolyn Li-Madeo

The opportunity is to have a clear and short mission statement within the first moments on the website. Any call to action for donations should be presented with an option for the visitor to learn more about the organization, its impact, and its initiatives.

Wireframes

Structure & Layout

Human connection

Photos of humans interactions to build trust and empathy for the mental health service

Eye-catching text and big sections

Large headers capture attention. Full-width sections breakaway from the grid to keep it interesting

Reusable layouts

Alternating text and image content block for scalability, as the organization continues to add pages

Branding

Stylescape

The rebrand of Vent Over Tea reuses the previous brand colours (green and orange), as bright and captive action buttons. Three neutral greens are added to the palette for web and accessibility. Photos are core to the organization's media, so photos with text above have a black overlay. Lastly, to create a friendly and fun tone, illustrative icons and a dot pattern are used.

Social Media & Branding Guideline

Lessons Learned

Challenges & Opportunities

Text styles

A key takeaway to keep a small set of consistent font styles. In fact, the WordPress theme used had a limit of 6 styles.

Common components

The balance between sticking to common components and doing something a bit more custom was challenging.

Custom CSS

Some plugins didn't have interfaces to customize their styling. Writing a few lines of custom CSS was a great learning opportunity.