UX & UI design: landing page redesign for a German non-profit
Project type
Landing page redesign
Contribution
UX Research
UX/ UI Design
Initial copywriting
Prototyping
Usability Testing
Target Users
1,000 site visitors
Non-profit members
Duration
October - November 2021
Background
Woé zon loo is a non profit organization based in Germany, working to improve the quality of life for children, youth and women in Kpalimé, Togo.
Problem definition
With increasing media attention, Woé zon loo was in need of a more approachable and user friendly website.
Before approaching the design process, I wanted to know what the stakeholders were hoping to achieve with the redesign.
The goal
Based on a project brief guideline, I conducted a qualitative research in the form of interviews with the founding members in order to determine Woé zon loo's goals:
-
Increasing donations
-
Introduction to new audiences and potential donors
-
User friendly site navigation
-
A cohesive UI design
Before the redesign
The website before the redesign had the following usability issues:
-
Difficult navigation and a non intuitive interface
-
No CTA on landing page or anywhere else - unfavourable for
potential donors -
Lack of storytelling and overview
-
Lack of cohesive UI design
Woé zon loo's website before the redesign
The solution
Through qualitative research, competitive benchmarking and usability testing I crafted an accessible, visually cohesive landing page with focus on increasing donations.
Additionally, I aimed to showcase the story of Woé zon loo, introducing their core values and impact.
Woé zon loo's website after the redesign
Research phase
In order to fully understand the problem, I structured my research
into 3 Stages:
1. Understanding needs
Interviews with Woé zon loo’s members in order to define specific painpoints and needs.
2. Competitive analysis
Exploring industry standards and structures, then connecting them to the needs defined in Stage 1.
3. Defining the problem
Based on the previous stages, I followed with user interviews and defined specific issues with the current website.
Stage 1: Understanding Needs
Goal
Defining the organization’s paint points and goals
Based on a project brief guideline, I conducted qualitative research in the form of interviews with 3 of the organization’s members in order to determine Woé zon loo's goals.
Participants were the Project Manager, head of Social Media and Head of Administration.
Via Zoom, I asked members in different positions what bothered them about the current website and what they wished to change.
I then noted their feedback.
Needs summary
-
Increasing donations using the website.
-
Introducing the organization to the press and to potential donors.
-
Making the website visually appealing.
Stage 2: competitive analysis
Goal
Defining industry standards
After the definition stage, I wanted to gain more perspective on how I can meet Woe zon loo’s needs and simultaneously stay in line with current industry standards.
The organizations chosen were either directly related to Woé zon loo or had a similar target audience and varied in size and popularity. I audited information structure, layout, tone and navigation.
This stage helped me define some pivotal key characteristics.
A competitive analysis of several non-profit landing pages
Competitive analysis summary
-
Functionality: clear site navigation and simple overview is the basis of user interaction.
Structure and the use of company colors are not only functional, but also inviting.
-
Emotional engagement: presenting the organisation's goals, mission statement and statistics serve for an engaging website.
Transparency and storytelling engages the user and creates an invitation to donate.
Stage 3: defining the problem
Goal
Defining specific issues based on stages 1 & 2
In order to avoid a biased-effect, I decided to conduct usability testing with 3 users unfamiliar with Woé zon loo, covering navigation elements, page flow, functionality and emotional engagement.
Recruiting: via LinkedIn
Format: Zoom interviews
Duration: c.a 15 min
Challenges
Users were recruited through social media and did not represent the target group.
Takeaway
While gathering feedback from unbiased users can be helpful, this stage in the project would have benefited from a target group whose main objective are donations or altruism.
Based on the target group’s wants and challenges with the current website, the research stage would have been better rooted.
Key findings
Problem 1: hero section
Users were confused by the slideshow in the hero image with keywords, unable to extract information on what the organisation was nor its mission.
Hero image analysis
Problem 2: overview
Users were confused by the news section below the slideshow, since the lack of clear information about the organization discouraged users to klick on the links.
Organization overview analysis
Problem 3: mission statement
The overflow of text made users not understand what the organization's story or mission was.
Users were discouraged to read long passages of small text after scrolling down.
Problem 4: color and typeface
Users were put off by the inconsistent typeface and lack of color direction of the UI.
Only 1 of the 3 users clicked on the hamburger menu to explore further.
Organization overview analysis
Research summary
-
Clear site navigation as well as presenting the organisation's goals and mission statement serve for an engaging, user friendly website.
-
Emotional engagement is better created as the user easily navigates through the site.
-
Lack of overview and navigation as well as cluttered information discourages users to engage with the website. Potential donors would get lost and the lack of CTA defeats the main goal of the organisation.
-
Usability testing with users representing the target group would have been more beneficial in this stage.
The research phase helped me define the possible ways in which
Woé zon loo’s landing page could be improved.
It was now time to prioritize possible solutions using the
Impact-Effort Matrix.
Exploration
Prioritizing solutions using the Impact-Effort Matrix.
Using the Impact-Effort Matrix, I organized possible solution for the landing page redesign.
Aside from design-related elements such as a hero section and typeface selection, other solutions concerning internal organization came to mind.
Since I was working with a non-profit, resources were limited.
This process helped in having an overview of possible solutions and by putting into perspective what can be implemented.
This, for example, is the reason why hiring a copywriter to rewrite long passages of text is placed as a high effort and a high impact solution.
Completely redesigning the entire website also fell in that category, since I did not have the UX experience yet for a task so big.
Impact-effort-matrix
Solution playground
Case study midpoint overview
The redesign
Ideation
Aside from meeting landing page requirements, my goal was to draft a storytelling landing page that will increase donations (especially for first-time visitors).
In order to achieve this, I have developed a hierarchy of information which would guide users through Woe zon loo's biography, projects and philosophy.
Goal
To introduce the organisation and their projects in order to establish an emotional connection with the users, which is crucial for increasing donations - one of the most important goals of the redesign.
Creating a low fidelity prototype based on the landing page structure
Design system
I created a design system based on Woé zon loo's logo, which incorporated the colors of the Togo flag.
Next to neutral colors like white and grey, green accent colors were selected from the logo, as well as one shade of red.
The abundance of green was chosen to represent the Togo flag and the organisation's concept, as well as to communicate nurturing, fitting for the nature of the projects.
For the typeface I chose Cabin for its simplicity and readability.
Creating a design system
Challenges
Design decisions were most difficult for me in the core values section.
Communicating core values is not only industry standard, but is integral to a non profit's transparency and agency. Moreover, Woé zon loo's work involved educating volunteers - who are western young people - about white privilege and respect of other cultures. This is one of the reasons why their relationship with the togolese community is so successful.
Thusly, clearly communicating core values such as respect, transparency and interconnectedness was crucial.
At the same time, the amount of text had to be reduced in order to avoid clutter. Due to its abstract nature, I have decided that incorporating visual elements in the form of icons in order to simplify the information to the user would be beneficial.
Woé zon loo's core values originally included a lot of text and no imagery.
They were also displayed on a separate About Us page and not on the landing page where they could easily be found.
Original core values section design
In the first iteration of this section I used circular icon placements.
However, the visual structure seemed dated as a result, and the circular placements made this section look heavy and distracting.
I decided to try a different incorporation of visual elements and text, while still focusing on how the information can be represented visually.
1st iteration to the core values section
The new version features theme appropriate icons as a watermark behind the text, offering a slight visual hint.
This decision helped to reduce the weight from the previous circle placements, allowing the titles of the core values to speak for themselves and not confuse the eye.
The color green is pale and does not distract from the text, while the icons still serve the purpose of illustrating the abstract concepts.
If needed, the user can scan over this section while still getting an overview of the core values.
2nd and final iteration to the core values section
Usability testing
Goal
-
Would unfamiliar users be able to understand the mission statement?
-
Would they be able to find donation ques easily?
-
Did the organization like the design and felt it was representative of them?
The prototype testing was done with a total of 13 participants, 10 of which were Woé zon loo volunteers and 3 participants unfamiliar with the organisation.
Unfamilliar participants were asked if they understood what the landing page was about based on the hero section. Later on I asked them if they understood what the organisation’s goal was.
Woé zon loo volunteers were asked if they felt that the website in it’s structure and visual concept was painting a coherent picture of what the organization stood for, aside from providing information alone.
Recruiting: via LinkedIn
Format: Zoom interviews
Duration: c.a 15 min
Key findings
Unfamilliar participants
Positives:
-
The organization’s mission statement was understood by the hero section.
-
Clear project overview.
-
Donation CTAs were noticed through the menu bar and by scrolling.
Negatives:
-
2 of 3 users found the text in the Core Values section too long.
Woé zon loo volunteers
Positives:
-
The structure of the organization’s mission statement and description was well received.
-
Donation CTAs were noticed through the menu bar and by scrolling.
-
The simple UI and color choice was well received.
Negatives:
-
4 of 10 users found the spacing between sections too tight.
-
Core Values section is too long and text is overwhelming.
Final design
The hero image and short mission statement provide for a quick overview.
The fixed menu bar provides a site overview, where the main CTA button is being introduced.
In addition to the core values section I added a quote by one of the organization members in Togo for a personal touch.
Testimonials from Woé zon loo’s project participants help in creating personal connection with the user.
Strategically placed underneath is a donation section.
Hero image and mission statement
Core values redesign
Testimonials and donation section
Estimated impact
Impact is yet to be numerically determined. The following impact is to be estimated:
-
Providing an overview and introduction of the organization, especially for media outlets and potential donors.
-
Creating a modern and user friendly landing page to better represent the organization.
-
Potential donors would be able to easily navigate through the site and learn about Woé zon loo's work. They can decide on their preferred donation method.
Lessons learned
What worked well
-
Feedback from Woe zon loo and through user testing was exciting and hekped the project a lot. I could really see first hand how my ideas could help people in real life!
-
I have thoroughly enjoyed the research part of the project, which helped to lay the foundation for every coming step. It made me truly realize just how much research is the backbone of UX.
What didn't
-
Recruiting a user group that represented the target audience (for example: potential donors) for the initial testing would have yielded better research results.
-
The large amount of text was still an issue in the final redesign. While I only focused on reducing existing text, incorporating a copywriter into the project would have been beneficial.
-
The scarce resources made solutions limited for this project, but I believe this is also a good representative for the real world.
For next time
-
I would love to take my time and experiment more with the UI design. Looking back at this project made me see how far I have comes as a designer. I would like to ideate more on UI elements and colors to make the website truly pop.