The Lotus Flower charity website redesign
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.
The research journey began with acquainting myself with the current website and overall online presence of the charity.
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.
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.
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.
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:
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.
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.
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
Comparative analysis of non-profits
Further in depth comparative analysis of charities was conducted to verify key trends and best practices within the industry:
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.
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.
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.
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.
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.
Visual design and brand identity
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.
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.
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)