Katerina Samoilis - UX Designer
User Experience Designer
The lotus flower charity website redesign_thumbnail 7.png

The Lotus Flower charity website redesign

The Lotus Flower charity website redesign

Project 5_LFC_Final.001.5.jpg
 

The Brief

For this two and a half week sprint, the brief was to redesign the responsive website for the Lotus Flower Charity, a non-profit aiming to help vulnerable women and girls impacted by conflict and displacement around the world. Due to reduced engagement with the current website, the aim was to create a clear, strong emotional journey for the site visitors so they will be able to connect with the charity and want to get involved with the cause. My role was Research Lead within a team of three.

Discover

Initial research

The research journey began with acquainting myself with the current website and overall online presence of the charity.

LFC images.001.jpg

Client meeting

My team and I had the opportunity to meet Taban, the founder of The Lotus Flower. This helped us gain further insights into her motivations behind starting this project, her personal experiences as a genocide survivor and how they shaped her approach. It also helped us understand the scope and impact of the charity and find out more about some ongoing and upcoming projects and events.

Conducting user surveys

As my next step, a short survey was compiled to gain an understanding on how users currently engage with charities. From the 160 respondents, over 99% engaged with charities in some way. When asked how users currently contribute to charities, 84% responded that they did so through an online donation. This confirmed how important the online presence of a charity is when it comes to engagement with the cause. A large percentage of users also engaged through volunteering (51%) and fundraising events(40%). Finally, 42% of users raised awareness about a cause they felt strongly about via social media.

LFC images.009.jpeg

User interviews and current website testing

We conducted a series of interviews, and also tested the current website in order to get specific feedback on possible pain points from users. For example, when visiting the Homepage, users were unsure what the charity did. They also wanted to be able to be updated on the charity’s activity and couldn’t find the option to subscribe.

LFC images.011.jpeg

Google analytics

These findings were confirmed when looking at the Google Analytics of the current website: the website had an overall bounce rate of 49%, with 52% of this being on the Homepage, which was the page that the majority of users were first to land on. This highlighted how important it was for the Homepage to clearly convey the charity message, and capture and engage the visitor.

Generating personas

The current visitor demographics (27.5% of visitors are 18–24 year olds and 33.5% are 25–34 year olds) informed us when identifying key users of the website:

LFC images.017.jpeg

Tracing Susie’s current user journey

We identified Susie as our primary persona and followed her journey on the current website in order to determine any pain points with the experience.

LFC images.022.jpeg

Define

Problem:

At the moment the brand and strategy of the Lotus Flower is not clear enough to encourage site visitors to get involved, which is resulting in reduced engagement with the cause.

Market research and report findings

Further market research and insights from reports highlighted that in order to successfully engage visitors, charities had to:

  • Make information about the nonprofit readily available through a variety of media.

  • Highlight information about projects, target population, and social issue addressed.

  • Indicate how your program is benchmarked within the field.

  • Provide one-page fact sheets with key metrics.

User interviews

This was also confirmed by our user interviews:

“I would like to know basic information like the core values of the charity and ways I can get involved” — Danni

“I need to know where the money is going, the aims of the project, the timescale and progress” — Hannah

“I look for case studies of projects, as well as lots of images and video content” — Marina

LFC images.002.jpg

Comparative analysis of non-profits

Further in depth comparative analysis of charities was conducted to verify key trends and best practices within the industry:

LFC images.026.jpeg

Hypothesis

This lead us to propose that by prioritising the correct information in a visually arresting format the charity’s vision, mission, background and projects will become discoverable and clear for the visitor to understand. This will engage site visitors and encourage them to take action to help the Lotus Flower cause.

Develop

Identifying brand keywords

Words such as Trustworthy, Loving and Hard-hitting stood out within the existing content , as well as the three motion pillars of Educate, Earn and Empower.

Semantic differentials

The Lotus flower aims to be:

  • Female focused but not girly

  • Empowering but not controlling

  • Trustworthy but not cold

  • Emotive but not guilt-tripping

These set the parameters that would inform the design and personality we wanted to convey through the new website.

Defining the information architecture and prioritising features

The next step of our workshop with Taban involved defining the information architecture of the new website, firstly by identifying the key static pages, then by prioritising the content needed within these and across the website.

LFC images.003.jpg

Prototyping and usability testing

This helped inform the visual structure when producing the first paper wireframes for the Lotus Flower, which was then refined through continuous usability testing.

LFC images.004.jpg

Information hierarchy

The Homepage was restructured to add impact and clarity. At the top, a relevant image was followed by the charity mission statement. Directly underneath, the three motion pillars of the charity were highlighted. Key statistics were nested directly underneath, to add credibility and urgency through bite size information. Current Projects and upcoming Events showed how active the charity was and a carousel of partners of the charity reinforced the credibility of the organisation. The footer now contained the option to subscribe to the charity’s Newsletter to keep up to date.

LFC images.035.jpeg

Visual design and brand identity

LFC images.036.jpeg

With the brand identity of the website, we kept elements of the current look and feel such as the Lotus logo and warm colour scheme. The logo was simplified and more impactful reds and pinks were added to the colour palette, to keep the content eyecatching and convey a sense of urgency. The typefaces used were Montserrat and Lato, both visually impactful and modern.

Deliver

LFC images.037.jpeg

Interactive prototypes:

View the interactive prototype of the new website here. User interviews identified that it was important to also consider how the responsive website would translate on mobile. The titles are maintained, with the topline text revealed by clicking on the block. Block elements now stack vertically as opposed to horizontally.

The new visitor experience

Susie can now clearly see what the charity mission is, how it’s making an impact, and ways she can get involved to help the cause. She is enthralled to be able to contribute through a donation.
Regarding the other key users, Erika is encouraged to help the charity through volunteering and sharingthe cause via social media, while Jeremy is ensured of the credibility and impact of the organisation and will set aside some of his company’s annual budget to aid the cause.

Presentation to client

The redesign was positively received by Taban and is currently being implemented.

Roadmap

Steps that could be taken as the charity grows in size and has access to more resources include:

  • Testing of responsive website on mobile devices

  • Exploration of sign-in/account option

  • Collecting data, stats and success metrics on the projects

  • Incorporating data into visualised progress updates

  • Producing downloadable content (e.g. FAQs sheet, fundraising pack)