Website redesign for the amazing charity empowering women and girls in refugee camps: The Lotus Flower. Article covers: teasing out their core identity and communicating it effectively; testing niche concepts with limited resources; non-linear customer journeys.
Project 3 General Assembly (Client Website Redesign)
Team: Joyce Lao (Project Management), Katerina Samoilis (Research Lead)
Client: The Lotus Flower Charity
My role: Design Lead
Duration: 2.5 weeks
Methods: Competitive analysis, surveying, design workshop, client consultation, 1–2–1 Interviews, focus group research/testing, Sketch App prototyping, user testing with clickable prototype using Invision app.
The Brief
For this two and a half week sprint, the brief was to redesign the 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.
Reframing the brief: If this project is a success what will have changed?
Given that the charity does not address for the users of the website a higher Maslovian user ‘need’ as such we had to think about how as UX designers our methodologies would apply to this project. The Jobs to be Done framework was more instructional for our project focussing not on addressing latent or universal needs so much as the specific journey for a user who lands on the site. Teasing out that 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 donate or otherwise get involved with the cause, was vital in understanding the user experience issue we were setting out to solve. It rapidly became clear that in order to improve the UX, we would need to work on the content strategy and branding as well to achieve our aim.
Discover
Initial research
Our first priority within the research was to work out what the core ethos and activities of the charity were, who the website was designed to reach out to and what actions it wanted to inspire them to complete.
We began with the crib sheet about the charity from Taban, the founder of The Lotus Flower, us exploring the information on the current website and overall online presence of the charity. We also assembled industry papers to help with benchmarking and best practices as well as branding guidelines for the charity sector.
Client meeting
Meeting Taban was vital in understanding the brief we were given as well as the charity’s aim and expectations from the project. We were able to understand her motivations behind starting this project, hear firsthand how her personal experiences as a genocide survivor have shaped her mission and informed her approach. As Kat, our research lead put it:
It helped us understand the scope and impact of the charity and find out more about some ongoing and upcoming projects and events.
As such we went from the understanding that it was a charity for vulnerable women and girls impacted by conflict, violence and displacement in Kurdistan, Northern Iraq.
But after further discussions…
We realised that the charity was more about helping vulnerable women and girls in refugee camps around the world.
The importance of regularly updated content, international media coverage, globally recognised sponsors and visible charity registration information was also highlighted by Taban, who was able to inform us the role they played in gaining corporate donations.
It was also vital for us to assess Taban’s resources in order to design something that suited hers and the charities needs. The current website has been nearly 6 months without new content being uploaded to the news section — this transpired not just to be due to a lack of time and resources on the content management side but also a lack of knowhow, internet connection and crucially that the client felt ashamed of her existing site. It didn’t match up to her vision of what the Lotus Flower was or how she wanted to portray herself and the charity to potential donors or activists. We were determined to get Taban to a point where she was proud of her branding and site.
When re-designing the site it was going to be important not to demand a lot of bespoke design and graphics as the charity would not be able to afford a graphic designer each time the content changed. It also needed to be have minimal of the CPU so that it could be updated by her project managers in the field and possibly even her volunteers in the camps on a dodgy connection. Whilst they are not the primary user of the site they are a critical edge case — what could they view on their mobile devices? Would they be inspired by the charity and proud of working with it?
User Surveys
We created a short survey charity engagement amongst our 160 respondents, inform our persona development and identify individuals for further interviewing. We posted this survey to individuals in our network and also to topic specific forums such as refugee work exchanges, women’s empowerment groups and aid workers forums. Over 99% engaged with charities in one of the ways that the Lotus Flower offers via their site. Online donation at 84% was the most popular manner of contributing to charity, with nearly half of respondents donating over £100 annually. As the website is the primary source of financing for The Lotus Flower it served to underline the importance of improving the donation user journey.
Highlighting why and how to get involved to those who volunteer (51%)and either organise or attend fundraising events(61%) would also fall within our scope. Finally, as 42% of users raised awareness about a cause they felt strongly about via social media we needed to create intuitively shareable content that succinctly communicated the importance of the cause and inspired new visitors to the Lotus Flower website.
User interviews and current website testing
We conducted a series of 10+user interviews, exclusively with those who identified as engaging with charities in some ways and including several charity sector workers or academics who work with refugees in order to maximise insights on what potential users behaviours and likes. We also tested the current website to identify specific pain points and get feedback on the brand, content and communication style.
The skeleton interview questions are listed here and responses further elaborated upon in the research findings section:
1.What are the charity brands you like and why?
2.How do you engage with these charities, is it donations, volunteering, other?
3.Any charity websites and branding that you particularly like? Why?
5.What drives you to donate to a particular charity?
6.What information would you like to know before making a donation to a charity?
7.When making a donation, how much time are you willing to dedicate to the payment process?
8.Do you like to contribute a pre-set amount, do you pay monthly or do one-off donations?
9.Are you open to donating your money/ time to a new charity you weren’t familiar with before? Why?
11.Do you like knowing exactly what your donation is going towards?
12.What would prevent you from donating to a charity?
13.What content would you like to see when browsing a charity website? What catches your eye and makes you feel emotionally involved?
14.Do you engage with/ follow any charities on social media? What channels do you use?
When testing the site we followed the following guide, that required a mix of observing how the user navigated some specific tasks and prompting responses about their experience.
- Observe user navigating through website and thinking out loud/commenting
- Ask the user what their understanding us about what the company does
- Ask user to choose and read about a project. What does it do/how does it make you feel/ does it inspire you to want to act?
- Ask the user to take the steps to make a donation
- Ask for feedback and issues arising throughout
As the landing page the Homepage was of especial interest. It was quickly clear users were unsure of what the charity did, a problem that was causing them to abandon; i.e. the worst possible outcome or if moved by the cause to look for further information in the about us or another organisation that helped Kurdistani refugees (if they were aware who the Yazidis are and the threat they live under). In our testing of the homepage a secondary theme that emerged was that they wanted to be updated on the charity’s activity and couldn’t find the option to subscribe.
This highlighted how important it was for the Homepage to clearly convey the charity message, and capture and engage the visitor.
Google analytics
The Google Analytics of the current website confirmed some of the qualitative feedback we’d received: the website had an overall bounce rate of 49%, with 52% of this being on the Homepage.
Surprisingly the current visitor demographics showed a majority of visitors were male but a stronger age bias: 27.5% of visitors are 18–24 year olds and 33.5% are 25–34 year olds.
As the donation portal has to be hosted by a third party due to regulations around their charity registration as a daughter of a larger organisation it was difficult to know with certainty where the conversion funnel was tailing off. Equally, whilst the website is designed also to inform visitors as well as elicit donations we were unable to meaningfully track engagement from the data due to the paucity of the articles online and lack of sharable content. We made pains to question users in interviews about these features and watch their behaviours and have outlined with the client how they might track and target set in the future.
Generating personas
From the google analytics, our survey and interview respondents, industry papers and Taban’s own experience of donors we were able to draw out our three main personas:
Tracing Susie’s current user journey
Susie, the most frequent but low value donor, was identified as our primary persona and having affinity mapped the responses we had from testing the current site we were able to trace her journey of wanting to support the Lotus Flower in their mission on the current website. Various pain points en route were identified and the result is clear that most users are coming up against lockgates that cause them to abandon and seek another charity doing work in this area.
Define
Problem:
At the moment the brand and strategy is not clear enough to encourage site visitors to donate or get involved, and the information architecture is not reasoned, further confusing the user.
This is resulting in reduced engagement both in donations and social through avenues such as social media, newsletter signups and enquiries/direct communication with the charity.
Market research and report findings
Further market research, in particular the Informed Giving Report, 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
These themes were repeated in 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
By undertaking a comparative analysis of charity websites; including a design audit some key industry trends and best practices emerged:
- Mission statement at Homepage
- Strong use of photography and video
- Prominent ‘donate’ button
- Use of statistics and infographics
- Short project overviews
- Strong use of colour blocks
Hypothesis
“We believe 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
If a brand were to speak to us, what would it say? Which descriptions are authentic, striking and ownable?
Identifying brand keywords
From screening the copy of the website and press releases as well as interviewing Taban the core values of the charity and the language to be associated with them became clear. Trustworthy, Loving and Hard-hitting repeatedly came about in the existing content, whilst the three motion pillars of Educate, Earn and Empower encapsulated the wording essential to the charities’ functioning that continued the branding into their operations.
Semantic differentials
The Lotus flower aims to be:
- Female focused but not girly
- Empowering but not controlling
- Leading through love but not cheesy or overbearing
- Trustworthy but not cold / flat
- Hard hitting but not gruesome
- Emotive but not guilt-tripping
With Taban I led a session on the branding and feature prioritisation. We encouraged her to develop the semantic differentials with us taking the core values and motion pillars as the starting point. 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 with a feature prioritisation grid that was itself drawn from work where all possible pages were called out and given a post-it, the possible features listed underneath and then voted on for the most important features to consider on each page (as below).
Initial Sketches, Prototyping and usability testing and iterations
The feature prioritisation informed our initial timeboxed sketches. After we pitched our designs we repeated the process to include the ideas we had most admired or ditch those that drew criticism. Finally all the sketches were laid out and preferred designs were voted for (as above) for an early indication of what worked or was perceived as appealing. The visual structure in the first paper wireframes for the Lotus Flower as such already reflected substantial critical analysis which was then refined through continuous usability testing.
Information hierarchy
The website was restructured to improve impact and clarity. This work is most applicable to the Homepage that also served as the archetype for many of the other pages as it is both the landing page and contains many repeated elements and styling across the site.
When the homepage is broken down as below you can see the visual prominence that we ascribed to the charity mission statement (this was also refined by us in the branding session). Directly underneath, the three motion pillars of the charity are highlighted. Key statistics were nested directly underneath, in colour blocked boxes to add credibility and urgency through clearly delineated bite size information that could also be shareable. With this simplification the option to expand allows engaged users to dive deeper when desired but doesn’t disrupt the easy assimilation of information or the user flow by introducing large text blocks where the user hasn’t requested more information.
Current Projects and upcoming Events show how active the charity is and a carousel of partners of the charity reinforces the credibility of the organisation with appealing current imagery illustrating their activities. The footer now contains 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. We emphasised the reds in a way that was warm but not girly and include an accent colour for emphasis. The logo was simplified and the more impactful reds added to the colour palette are exotic and evocative of crimson hues — these conveying a sense of urgency and importance being the colours of blood. The typefaces used were Montserrat and Lato, both visually clear and modern to tie in with the demographic and feel of the brand.
Deliver
Interactive prototypes:
View the interactive prototype of the new website here, bearing in mind mobile users, both in the field and for those all important first impressions for busy users or the younger demographic we took pains to show how the modular layout we used in the desktop prototype translates well onto mobile screens. 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
Regarding the other key users, Erika is encouraged to help the charity through volunteering and sharing the 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. 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)
