Medair International is a 70 million annual budget humanitarian organization based in Switzerland, active in 11 countries, employing 3000 staff. Spending time with Medair, I kept noticing how passionately the staff would care for those in need, while the website would miss communicating so.
From our first workshops, I distilled our goal into the following: “Let’s communicate the passion and beauty of the people around Medair”. The redesign triggered many discussions and workshops around “who medair is”, “what is different about it”, providing, even more, meaning to our work, as the website works today as a beamer, leading the internal culture towards a people-centered organization.
Medair International
Challenge: Reshape UX strategy, increase of content consumption & conversion rates optimization
Shaping UX strategy
My role: Ui/Ux Design Lead (Team: Content manager, Marketing officer, Developer)
Date: January 2019 - March 2020
Requierements & turning existential
Coming up with a Ux process
Personally I used to love showing up on clients with “my own amazing, super-duper” process.
Time passed since my first UX workshop (2016). Every client is different, the dynamics inside each organization vary, and the resources (aka. Development, Digital or Marketing team) are not the same. Instead of trying to apply the same rigid system everywhere, I find that spending some (limited) time on a customized process, that takes into consideration all the stakeholders, pays back in the end, helping coworkers supported and heard.
Work is so much easier when stakeholders are “within” the system instead of trying to fit in.
UX Workshops
Due to the total redesign of the old website, everything had to be revisited.
Workshops had to be broken into two.
I) Messaging and Information Architecture II) User journeys
Messaging and its relation to each persona, was lead by the Content Manager.
The marketing team had done some extensive work with them, delivering the 3 following profiles:
a) Female 60 y.o (Retired, Churchgoing, willing to donate monthly etc.)
b) Male 50 y.o (Business-oriented, Religious but liberal, willing to invest in breaking-the-poverty-cycle systems)
c) Female 35 y.o (Mother, Activistic, willing to volunteer or fundraise)
I facilitated the brainstorming sessions on Information Architecture, competition analysis, and card sorting, drafting wireframes on the whiteboard.
Enacting the User journey workshops I started with a brainstorming session on how each persona is using technology, consuming content, and finally converting to actually donate online. Due to our limited time, we skipped extensive Empathy maps and focused on messaging and action that our users most likely take.
Comparing data from Google Analytics, I pointed out user patterns, forming draft user journeys, and “red-routes”. During our sessions Fundraising and Customer care officers were invited to brief us on their take, providing feedback from their experience with each type of donor.
*It was one of the most enlightening moments (which btw, should have booked even earlier in the week).
With the team we arrived at the following assumptions:
1. By showcasing better the work and people benefited from it, certain personas would consume more content if available. (high exits rate 63%)
2. Donation procedure takes too much time, resulting in errors. The experience fails to communicate the urgency the users need to act upon as it looks to much as a “paperwork process”.
(Time on task per donation: 4 mins )
3. There should be an appealing way to upsell donations
(Average donation: 30 Euros)
4. Visuals need to get a branded treatment, creating a better connection with the users.
Testing & Consolidating feedback
Due to changes in leadership, we had to be flexible and agile throughout the project. After the first week-long workshops, we shaped out the main messaging and creative direction: instead of technical areas and procedures or dramatic imagery we would depict people, stories, emergencies.
Visually I suggested that the design and images are welcoming, easy to connect with, earthy tones but also using darker transparencies where the copy should pop out, building the essence of urgency
Remote work: wireframing happened on-screen (thank you Windows stylus) connecting me (roaming between Ireland, Greece & Switzerland) with the team in Switzerland and New Zealand. The main work on information architecture was done through Invision prototyping, and after some first greenlight, the look and feel of the pages were rapidly designed within a couple of days.
Design Sprints 2 & 3
Creative Direction
Shaping our direction accordingly, I allocated the screen property based on the common needs of a cold and warm audience, prioritizing the brief explanation of “what/who the organization is”, above the fold.
Secondary we decided to communicate clearer how Medair is day to day working towards alleviating human suffering.
My response to this requirement was to convey daily updates from the various content creators, through cards. Expressing visually in a subtle way, a daily flow of care, relentless action & grateful faces.
In the light of this direction, I suggested a better use of personal visuals, strong imagery with good eye contact, while at the same time all calls and copy should be communicating hope, even in the most desperate news & articles.
Current version (August 2020)
Results corresponding to the initial findings and assumptions.
1. Certain users/personas would consume more content if it was available.
Cold users spend: 2:32 Average time from 0:58′
Returning users: 4:25 from 2:05
2. Donation procedure today takes 2:00 minutes from 4:10
3. User interaction
Cold visitors go 3 pages deep from 1.5.
Returning visitors go 3.25 from 1.7.
Conclusion
Closing this long entry about v.1 of Medair.org , I feel honoured by the way my work has been converted to awareness-raising and more support for those in need. The same time, this is just the start, there are still new dimensions on the way users are behaving through the pandemic and more data that are just now being analysed. This version hasn’t dealt with all pain points and issues, but it has been a new tool that showcased a fresh approach within the organization.
Sub-products
Prioritizing, Coordinating & Designing various products to cater to different persona-needs.
Jobs Hub – Careers Corporate website
For a Company employing 2000 staff, we had to develop from scratch a flexible and simple solution where all openings would be showcased and certain steps would facilitate the user to apply right.
Numerous hours and redesigns of user journeys were used.
The beta platform (being under development) can be found here.
Medair Lives
From the first requirements list I was provided, the need for new video content was really strong. A filming team was currently producing short videos in various areas where Medair operates. This exciting content had to be promoted in a relevant way, that would fit with the personas and at the same time we would avoid alienating the older users/personas.
For creative direction, we used strong visuals with a warm friendly touch, appealing but the same time passionate full of stories to tell. Coming up with the tagline: “Emergency response like you’ve never seen it” helped in creating a people-centered approach that breaks the old heroic humanitarian worker mold, bringing out real people who struggle, enjoy, and love their daily routines.
The beta product can be found here, it is currently being refined and debugged.
Emergency Response
Dealing with emergencies is a USP of Medair and we had to build more around it. Coming up with user journeys and feedback it was apparent that users would usually need more information about Medair’s involvement. Responding to the need, we came up with a timeline that would track every emergency the way the crisis evolves and the way Medair responds, giving the user the power to influence the situation. The timeline/emergency response page works really well, generating (an average of) 30% more funds than the last emergency appeal.
Donation Journey
Designing a new Donation journey I kept feeling that simply letting people choose the amount they want to donate wasn’t enough. The old page was really weak. There had to be a process that would personalize in a special way these funds. Wireframes and tens of versions were created and today we are in a much better place, where users spend less time (50%) on the donation page and more (25%) funds. That was achieved with the use of better platforms (more cards accepted) friendlier ux process and simpler ways to choose where your funds go to. Something very important was the principle that no ask is being made without a nice welcoming picture next to the amount.
The donation process can be found here.