When I was asked to help out the CRO and UX team at ProWeb Consulting, this was the first project I had the pleasure of working on. The NGO that approached the agency was looking for ways to improve their website and landing page structure in order to increase the number of adoptions.
Role: UX and Interaction Designer Skills: User Experience, Interaction Design, Prototyping, CRO Tools: Figma, FigJam Company: Pro Web Consulting (a Cerved Group company) Timeline: May 2023
Overview
Problem
The NGO needed practical fixes to their adoption form in the homepage as well as the structure and content of their landing page in order to increase the number of children adopted via recurring monthly donations
Outcome
I created a mid-fidelity prototype of the following:
- Adoption form in the homepage
- Adoption-related banner in the blog section of the website
- Landing page for one of the NGO’s campaigns
Impact
After our pitch, some changes have already been successfully implemented by the client to the website!
We are currently waiting on further feedback to measure impact in a quantitative manner.
Uncovering issues
When I first boarded the team, the in-house UX researchers had already uncovered the following issues:
Home-page form
- Users aren’t able to understand how their money helps the children: there is no mention of how the monthly sum helps the child and their community.
- The presentation of the child that is to be adopted doesn’t allow the user to emotionally connect with them: for example the picture is small and the text with the child’s story is badly formatted.
- The payment process doesn’t look safe: a lack of key elements e.g. payment circuits can represent a deterrent.
Landing page
- Testimonials focus solely on the donors’ experiences (for the few ones who saw the adopted children) instead of the childrens’ changed lives thanks to long-distance adoption.
- The benefits of donating are towards the end of the page and might be not viewed by most visitors.
- The presence of the full form in the above-the-fold section might be viewed as a deterrent for those who are not yet set on donating monthly.
Blog Banner
The repetition of the same terms in the title as well as in the CTA (”Adopt a child”, “Adopt now”) doesn’t show the impact of the user’s donation.
Ideation
After analyzing the audit results written above, I first looked at competitors in the same space and then proceeded with low-fidelity sketches in Figjam.
What are other NGOs doing?
I looked at competitors such as Save the Children, Unicef and more to study their approach in page structure and copy of the forms, the banners as well as the adoption pages.
Finding solutions
In FigJam, I ideated potential solutions to each step of the adoption flow, as well as for the landing page and the banner. I then reviewed everything with my colleagues during our design critiques.
The final design
At the pitch with the client, I delivered a Figma file with mobile and desktop designs for each problem area. Here are the main improvements:
Home-page adoption form
Adoption campaign landing page
Adoption banner
Outcomes and personal takeaways
Complex data, made simple
The final result we achieved is a dashboard which provides:
- An overview of all incoming requests with relevant metrics
- In-depth views aimed at providing relevant data for specific archetypes
- Complex filtering and export features.
It helps all users to quickly find and export the needed KPIs for their internal processes.
We worked hard to make sure every metric or graph was included for a specific reason. The copy and infographics were optimized for each piece of content to ensure better understanding.
As a result, the demo of the product is now being shown by higher-ups in several meetings with prospects.
Lean wins the race
The actions which helped us go smoothly from Figma to code were:
- involving the developer team in early discussions
- personally taking part in their day-to-day Scrum ceremonies,
- Establishing a continuous dialogue between teams when developing new features
This way, me and the team were able to ensure that our designs were first of all feasible as well as coded as intended. I was responsible for ensuring the publishing of a smooth final version of the platform and therefore furthered my knowledge and skills in the field of Agile UX.
Keeping the product user-centric
To ensure that our approach user-centric, we carried several conversations with our stakeholders on the client side together with the developer team throughout the process, which helped us create a product that was valuable to the end users.
The initial phase which involved the creation of archetypes was crucial to keep our focus on the end-user while defining the IA of the platform.