︎
     

Inspiring Contributions


MINDS is a redesigned welfare organisation website that encourages compassionate individuals to make quick donations and complete simple volunteer sign-ups.






M Y   R O L E S

User Experience
Project Management
User Interface

T E A M

Daniel (UI&UX), Melissa (Copy), Sophie (UX Research)

T O O L S

Figma, Google Suit, Miro, Optimal Workshop

R E S U L T S

Improved web content structure andquicker access to donation and volunteer sign-up

T I M E

2 week





C L I E N T


MINDS (The Movement for the Intellectually Disabled of Singapore) provide equal opportunities for children with intellectual disabilities to receive education and later, to be integrated as contributing and responsible citizens in Singapore.




O V E R V I E W


Our small team include design methods such as interviewing volunteers and donors to define user needs and goals before ideating prototyping solutions from sketches. In addition to creating a new concept for MINDS website, I was a project manager leading my team to achieve goals and meet success criteria at a specified time.










P R O B L E M


It is a struggle to assure donations made are meaningful and volunteer activities engaged is purposeful.



original landing site





S O L U T I O N S


We provide a clear navigation routes through 01. high call to action visisbility and an 02. organised content structure, that allows users to confidently align their values with the welfare organisation and make contributions that are meaningful and matters.




01. High Call to Action Visibility

We simplified the journey to make donation and sign-up as a volunteer with a sticky navigation bar. The call to action button includes a direct link to donate and volunteer as well as contact appears on all pages to provide accessibility convenience.





02. Organised Content Structure

We reorganised content to restructure a clear navigation framework, that allows a quick route to identify information needed accurately.











P R O C E S S

 

Empathise

Benchmarking
User Research

Define

Problem Statement
User Personas

Ideate

How Might We...
Solution Statement
User Flow
Navigation Scheme
Wireframing

Prototype

Hi-Fi Prototype

Test

Usability Test
Usability Insights

Ideate

Reiterated Design
Next Steps



E M P H A T H I S E

Benchmarking


benchmarking social service organisations


To begin, our team referenced two local social service organisations, as well as international counterparts, to understand the current navigation journey for volunteering and donating, and learn how we can do things better. Benchmarking analysis is conducted to identify features we would like to adapt for MINDS.

01.  Include a key call to action button in the global navigation
02. Display financial information for donation breakdown
03. Allow online volunteer sign-up form submission






E M P H A T H I S E

User Interview


We approached 12 individuals with an interest in welfare organisations and charity for a 1-1 interview. Interview questions aim to understand their primary concern and needs when selecting welfare organisations to work with. In relevance to MINDS organisation, our team seek opinions from interviewees in regards to Intellectual disability too.




After the interview, we applied affinity mapping to organise and analyzed our interviewee’s behaviours. Based on the above affinity diagram, we have gathered three main insights:



01. T R U S T W O R T H I N E S S

“I need credibility, authenticity and clarity.”

02. C O M P A S S I O N

“I empathise with them and want them to be acknowledged.”

03. I N I T I A T I V E

“I want to know what was done and what are the resultss”






E M P H A T H I S E

Card Sorting


Using Optimal Workshop, we conducted categorisation tests with 12 participants to sort 50 original navigation components into categories. Participants were asked to categorise the various navigation options on services and information found on MINDS. They were invited to create their categories or use the pre-defined categories set by our team. Based on the raw data collated, we standardised the categories created and further organised into median categories.






I D E A T E

Navigation Scheme


Based on card sorting results, we proposed the following navigation scheme that consists of 8 main top-level navigation, as in shown in orange, with its respective mid-level categories, as shown in blue.






D E F I N E

Persona


We put together our research findings and constructed our two user archetypes —  Amelia and Casey.






I D E A T E

Userflow



Amelia, the orange flow at the top, want to find out more details of the welfare organization and relevant documents before submitting a fundraising form. While Casey, the blue flow at the bottom, needs to identify the services the welfare organization has before signing up to be a volunteer.

The diagram below shows two userflow for both:






I D E A T E

Wireframe


From our user research, we  found out that most of our users access welfare organisation websites through social media or search engines using their mobile phones. MINDS does not have a mobile-friendly screen; hence, our team implemented the mobile-first design strategy.

We begin brainstorming the interface with low fidelity wireframes on paper to conceive ideas quickly. Important features such as sticky navigation bar and volunteer and donation page were visualised and converted into digital wireframes later.







P R O T O T Y P E

Hi-Fi Prototype


The clickable prototype focused on the two main routes, volunteer and donate, and is created with Figma, and you may test the prototype through this link. We also adapted the layout so that it can be viewed neatly on desktop devices without too many modifications.

The prototype stood by the brand colour of MINDS, which we have affectionately named it MINDS blue, and introduced the orange colour for call-to-action buttons. We have also carefully selected a dyslexia-friendly font, Century Gothic as the only font that will be used through the website.


Homepage

d e s k t o p


m o b i l e






Volunteer Page


d e s k t o p


m o b i l e





Organisation Profile

d e s k t o p


m o b i l e







T E S T

Usability Test


Two Usability test and iterations were was done with 5 participants in each test. We gather feedback on the ease of our design and areas we could improve on.

The first usability test tasked participants to submit an online application form and to initiate a fundraiser campaign. The second usability test allows us to delved deeper into the consensus of the website and understand the behaviour of content exploration and the expectations of navigations.




I D E A T E

Reiterated Design


Finally, we consolidate all the feedbacks from the usability test, made necessary changes in our redesign and finalised the mobile website. Here are some of the updates we had done for the reiterated design :







I D E A T E

Next Step


01. implement chatbot option

Our team learned that our users like to inquire about the welfare organisation for more information to provide quicker access to common questions

02. review UX copy writting

We are also planning to delve deeper into crafting better content and CTA copy for easier and quicker comprehension. We will do so by recruiting more users and conduct further categorisation testing to streamline categories further and create a user-oriented content copy.
B U I L D E R

©2022 Edwina Huiru Zhao