top of page
Redefining User Engagement and improve usability: Strengthening connections between supporters and Médecins Sans Frontières
Project Overview
Program: UX Accelerator Program by Peak XD
Role: UX Researcher, UX/UI Designer
Duration: 10 weeks
The client is Médecins Sans Frontières (Doctors Without Borders), an independent international medical humanitarian organisation that delivers emergency aid to people affected by conflicts, epidemics, famines and disasters.
Challenge
Redesign the MSF (Australia) homepage with a strong user focus to improve engagement and understanding of the organization's mission and values
Problem
MSF's website is failing to effectively engage and retain users, resulting in a low conversion rate and missed opportunities to mobilize support for humanitarian causes.
x Unclear CTAs
Navigation Bar
Vague images that doesnt tell a story
Inconsistent colour scheme and fonts
Uninformative
Collaborative Group Research
As a group, we initiated the research by conducting interviews with 25 charity donors and 8 charity applicants. We each interviewed one participant and collaborated our interview findings in an excel sheet. Participants were asked thought-provoking questions aimed at understanding their thoughts, behaviours and attitude towards MSF and followed by a task analysis.
Interview Collaboration Sheets ↓
Gathering Insights Through User Interviews
I proceeded to work individually with the insights I learned from the interviews to further analyse their actions and steps in detail through affinity mapping and user personas. I learned that MSF's user types have widely diverse goals, needs, pain points, etc. Each seeking specific information and function on the organization's website.
Personas ↓
.png)
.png)
Affinity Mapping ↓
Impact of Lack of Transparency and Crucial Information
Users
X Dissatisfaction
X Loss of Trust
X Hestiancy to get involved
X Missed career opportunities
Médecins Sans Frontières
X Reduced donations
X Low credibility
X Decreased supporter involvement
X Missed recruitment opportunities
Solution
Increased Transparency
Clear and honest reporting about how donations are used is crucial for building trust.
Targeted information
Information specifically tailored for job seekers and donors
Impactful Visual Content
Show impact their donations are making and visibly demonstrate the mission in action
Validating Information Architecture with Card Sorting Test
I conducted a Closed Card Sorting Test to organize and categorize items with users' preferences in mind, aiming to ensure that users can easily navigate the website and find the information they need. 7 participants helped validate this process and most strongly agreed that it is intuitive and logical. The test helped me find areas of improvement, I recategorised IA based on testing results.
Iterated Information Architecture ↓
.jpg)
Card-Sorting Test ↓
From Sticky Notes to Screen
I started with sticky notes to organize the new layout. Developing a low-fidelity wireframe to further visualize the concept. Afterward, I built a high-fidelity to test the design, iteratively refining them based on research insights. Design progress:
Wireframe ↓
Low-fi Prototype ↓
Initial High-fi Prototype ↓
High-fi Prototype for Testing ↓
Aligning Solution with MSF's Brand Identity
As a major international organization, developing the MSF website interface presented a branding constraint. I had to adhere to a strong brand identity to ensure consistency. Although, initially seen as a constraint, delving deeper into MSF's mission, values, and target audience transformed the branding guidelines into a direction for my creative process.
Validating the Design
I conducted a usability test with Optimal Workshop. The design was tested with 7 participants informing areas for improvement. The results indicated minor interface issues with the homepage validating the structure of the remaining site.
Click Testing Results:
100% Tasks completed
81% Overall Success
* The click test coincided with the Card-Sorting Test. Some issues encountered during the click test are connected to the flaws identified in the IA Card-Sorting test.
Refining Based on User Feedback
I iterated my design based on feedbacks during usability testing, resulting in a more cohesive and intuitive website while addressing the focus problems of the users. The homepage has been designed with new users in mind, while the rest of the site optimised for return visitors. The website has been optimised for intuitive navigation, easy-to-find and quality content, and visually appealing design can encourage users to explore and discover new content
❰ Well-structured and intuitive IA with a utility menu
Short slogan of MSF ❱ conveying principles and work at first glance
❰ Light UI for readability and enabling red (CTA) to stand out
❰ Summarises the mission and shows proof of impact across the globe
Proof of financial ❱ transparency
❰ Vital information to engage potential workers and volunteers
Brief presentation ❱
of news and stories, featuring MSF world headlines and MSF
Australian highlights
❰ More images of MSF workers in action
Neat and clear ❱ subscription form
Reflection
One of the challenges I faced is the abundance of the information and content aimed at different personas as stated above in research insights. I tackled that with information conciseness and content prioritisation. Also, a challenge is balancing between users and client as a UX Designer, but I learned that by advocating for the users, I was also actually helping the client achieve business goals in the long term by understanding who they are catering to. Overall, I am proud of my progress. My design went through a design growth and my design decisions were validated during usability testing with results I'm happy with.
This is my very first UX project, with PeakXD guiding me throughout the course, each week I had progress while learning the end-to-end process of UX design. I am grateful and inspired that I had the opportunity to learn about people-first design with a people-first organisation, Médecins Sans Frontier.
bottom of page