Qiao En; Ray of Hope Case Study

ABOUT ME

CONTACT

RESUME

ABOUT ME

CONTACT

RESUME

DURATION

3 week sprint, Feb 2023

TOOLKIT

Figma, Miro, Notion, Google Suite

TEAM

Luann See (UX Research),
Tho Wei Teng (UI Lead); & Shanice Woo (UI Illustrations)

Luann See (UX Research),
Tho Wei Teng (UI Lead);

& Shanice Woo (UI Illustrations)

Luann See (UX Research),
Tho Wei Teng (UI Lead); & Shanice Woo (UI Illustrations)

ROLES & RESPONSIBILITIES

ROLES

Project Manager

Built & maintained task dashboard, anchored team discussions, fronted client meetings & pitches on prioritization of features and deliverables

UX/UI Designer

User Research (Interviews, Contextual Inquiry, Competitive Analysis), User Journey Mapping, User Flows, Sketching, Wireframing, Prototyping, Usability Testing

The Problem

Ray of Hope is a Singaporean charity that runs a crowdfunding platform where anyone can pledge donations to in-need individuals in the community. Despite a decade-long track record of successful campaigns, they were facing challenges in becoming a 'top-of-mind' donation platform for Singaporeans.

Challenges in retention and conversion on the site were evident with high bounce rates of up to 86% and with 90% of donors donating once and not returning.

Ray of Hope is a Singaporean charity that runs a crowdfunding platform where anyone can pledge donations to in-need individuals in the community.

Despite a decade-long track record of successful campaigns, they were facing challenges in becoming a 'top-of-mind' donation platform for Singaporeans.

Challenges in donor retention and conversion were reflected in the site's high bounce rates of up to 86%, with 90% of donors donating once and not returning.

The Game Plan

The What:

Conduct an entire site refresh to update the visual design and user interface to align with current digital design trends.

The Why:

Inspiring visitor confidence forms the foundation of encouraging donor conversion and retention. This would be done by ensuring the website is modern and easy to use, which conveys the image of a professional and active organisation who is committed to the stewardship of their crowdfunding platform.

The Focus:

As 70% of Ray of Hope visitors are mobile-users, the team prioritised designing for mobile interfaces first during this sprint.

Measuring Outcomes

System Usability Scale

System Usability Scale (SUS)

With our proposed redesign, the System Usability Scale (SUS) score improved from 75.9 (B grade) on the original site to 87.81 (A grade).

Due to time constraints, we used the SUS Scale as it was fast to administer and provided a preliminary understanding of whether we were headed in the right direction.

With our proposed redesign, the System Usability Scale (SUS) score improved from 75.9 (B grade) to 87.81 (A grade).

Due to time constraints, we used the SUS Scale as it was fast to administer and provided a preliminary understanding of whether we were headed in the right direction.

With our proposed redesign, the System Usability Scale (SUS) score improved from 75.9 (B grade) to 87.81 (A grade).

Due to time constraints, we used the SUS Scale as it was fast to administer and provided a preliminary understanding of whether we were headed in the right direction.

Qualitative Insights

During usability tests, users shared that the redesign felt trustworthy, warm, mature and professional.

The insights gathered provided an additional layer of assurance that the redesign was effective in achieving the goals we had outlined for this sprint.

What's Next?

What's next?

I’m happy to share that my team was engaged by Ray of Hope to continue working together after this sprint concluded. Over the course of 6-weeks, we collaborated with their team & developers to expand on our initial designs.

✰ I'm looking forward to seeing the new site go live soon! ✰

I’m happy to share that my team was engaged by Ray of Hope to continue working together after this sprint concluded. Over the course of 6-weeks, we got to collaborate with their team & developers to expand on our initial designs.

✰ I'm looking forward to seeing the new site go live soon! ✰

Still curious? Scroll to view the detailed process

Still curious?
Scroll to view the detailed process

What was causing
these challenges?

What was causing these challenges?

Our research strategy to uncover the root causes of the site's challenges was two-fold: we would speak to users while also conducting market analysis to piece together a more comprehensive picture.

User
Interviews

13 user interviews were conducted to gain qualitative insights on donor goals, motivations, and frustrations

Contextual
Inquiries

Contextual

Inquiries

9 contextual inquiries were conducted to identify gaps and opportunities in the current user experience of the site

Competitive
Analysis

4 crowdfunding platforms were analysed to identify the strengths and weaknesses of Ray of Hope vis-a-vis other crowdfunding platforms

Identifying
user demographics

Identifying user demographics

With preliminary information from the client, we developed a donor matrix as screening criteria for our research. The assumptions in this matrix would later be validated through our collected data.

The goal was to uncover the needs and motivations of current and would-be donors. For scalability, we also needed to identify if there were common trends that spanned across these groups which could be addressed by a core set of solutions.

With preliminary information from the client, we developed a donor matrix as screening criteria for our research. The assumptions in this matrix would later be validated through our collected data.

What’s really happening

on the current site?

What’s really
happening on
the current site?

What’s really happening on the current site?

Insights from contextual inquiries highlighted user pain points on the current site, especially for 4 key pages: Home, About Us, Overall Campaigns and Individual Campaign pages.

Given that these pages had the highest donor touch points, prioritising them in the redesign would yield a higher impact on the overall donor experience.

Defining core user needs

The research insights were then used to narrow the scope to 3 core user needs that were common across the three target groups in our donor matrix.

Scoping was crucial to ensure that we would have enough time to design, test, and iterate truly effective and viable solutions.

The research insights were then used to narrow the scope to 3 core user needs that were common across the three target groups in our donor matrix.

Scoping was crucial to ensure that we would have enough time to design, test, and iterate truly effective and viable solutions.

Proof of
Tangible Impact

Proof of

Tangible Impact

Donors want to know exactly how their donations will be used to help the beneficiary.

Knowing that their actions have impact on someone else creates a sense of empowerment which motivates them to donate.

Donors want to know exactly how their donations will be used to help the beneficiary.

Knowing that their actions have impact on someone else creates a sense of empowerment which motivates them to donate.

Security and
Transparency

Donors are worried about falling prey to scams when making online payments.

They need assurance that Ray of Hope is legitimate and trustworthy before donating through their platform.

Donors are worried about falling prey to scams when making online payments.

They need assurance that Ray of Hope is legitimate and trustworthy before donating through their platform.

Seamless
Navigation

Seamless

Navigation

Donors want a browsing experience that isn’t overwhelming and doesn’t rely on emotional clickbait.

The less friction experienced when browsing, the more likely donors are to discover a campaign they resonate with.

Donors want a straightforward browsing experience that isn’t overwhelming and doesn’t rely on emotional clickbait.

The less friction experienced when browsing, the more likely donors are to discover
a campaign they resonate with.

Brainstorming!

As project manager, I felt it was important for the team to meet in-person so we could whiteboard and sketch out our ideas. Having an open space for organic discussion helped us to let our imagination run wild and get our creative juices flowing.

In a one-day design studio, I led the team through How Might We brainstorming, Crazy 8s Sketching, and a prioritisation exercise of our final solutions.

For each exercise, the approach adopted was to ideate without boundaries before bringing the team together and leading a discussion to synthesise our ideas into viable and actionable solutions.

Design & test

We then proceeded to prepare a mid-fidelity prototype to mockup our decided solutions. To validate the design, we followed up with 2 rounds of usability tests with a total of 8 users.

During testing, users were tasked to go through the same user flow that was tested during our earlier contextual inquiries. We standardised the testing flow to approximate a closer comparison between our final prototype and the current site.

We then proceeded to prepare a mid-fidelity prototype to mockup our decided solutions. To validate the design, we followed up with 2 rounds of usability tests with a total of 8 users.

Key solutions to address the 3 core user needs

Seamless Navigation

Clear information architecture for content-heavy pages

Simplified campaign categories

Utilising a ‘carousel’ navigation to reduce browsing fatigue

Proof of Tangible Impact

Highlight progress of campaigns

Opt-in mailing list for updates on the beneficiary's welfare

Showcase beneficiary testimonials

Security & Transparency

Showcase team and board members

Spotlight financial statements

Partnerships with government agencies

It was evident that the text-heavy and clunky site was causing user fatigue and the high bounce rate on the current site. Streamlining the interface would help to reduce feelings of overwhelm to encourage visitor retention.

It was evident that the text-heavy and clunky site was causing user fatigue and the high bounce rate on the current site. Streamlining the interface would help to reduce feelings of overwhelm to encourage visitor retention.

Feature - 1/3

Streamlined
information
for content-heavy
pages

Streamlined
information for
content-heavy
pages

Streamlined information for content-heavy pages

To build trust with donors, it was essential to showcase information about Ray of Hope's charity work and crowdfunding model on the site. However, we needed to strategise the immense amount of content on each page so that it was easy to digest.

Feature - 2/3

Simplified Campaign Categorisation

During contextual inquiries, I observed donors’ thought processes when using the navigation menu & filtering system. I noticed their train of thought when browsing was to think of the demographic of the beneficiary first, followed by the type of help they needed.

I proposed that the navigation system of the redesign should follow this mental model to reduce the cognitive load and friction for the user when browsing.

Feature - 3/3

Carousels for Easy Browsing

Users felt flooded by long columns of campaign cards when browsing. We streamlined this by grouping campaign cards into carousels according to the campaign categories.

This reduced feelings of overwhelm when browsing as it created breakpoints in an otherwise endless stream of campaign cards.

We introduced features that highlight precisely how donations have been used to help beneficiaries. This was in light of user feedback that they feel more compelled to donate when they can visualise the real impact their donations have on others.

We introduced features that highlight precisely how donations have been used to help beneficiaries. This was in light of user feedback that they feel more compelled to donate when they can visualise the real impact their donations have on others.

Feature - 1/3

Updates on
Campaign Progress

Updates on Campaign Pogress

The campaign updates section on the current site was often missed by users as it was buried at the bottom of the page.

We felt it was important to retain this section and increase it's visibility to users as our interviews revealed that this information was indeed valuable in showing the real-time change and impact that arose from donated funds.

The campaign updates section on the current site was often missed by users as it was buried at the bottom of the page.

Feature - 2/3

Feature
Beneficiary Testimonials

Feature Beneficiary Testimonials

The current site's testimonials were text-heavy and lacked eye-catching visuals.

We decided to refresh the look of these testimonials as these stories highlighted both the positive impact of donations as well as Ray of Hope's credibility.

The current site's testimonials were text-heavy and lacked eye-catching visuals. We decided to refresh the look of these testimonials as these stories highlighted both the positive impact from donations as well as Ray of Hope's credibility.

The current site's testimonials were text-heavy and lacked eye-catching visuals.

We decided to refresh the look of these testimonials as these stories highlighted both the positive impact from donations as well as Ray of Hope's credibility.

Feature - 3/3

Mailing List for Updates on Beneficiary Progress

Mailing List for updates on beneficiary
progress

From our research, we knew that users did not find mailing lists appealing as they often equate it with spam. However, we discovered that users are open to subscribing to an e-mailer specifically for updates on their beneficiary’s progress.

As such, we created an opt-in option at checkout to subscribe to the targeted e-mailer. This would also help Ray of Hope to establish communication channels with a wider pool of donors.

Due to increasing fears of online scams or fraudulent charities, donors needed to be assured that the organisation running the platform was legitimate, credible, and accountable for the responsible management of their donations.

Due to increasing fears of online scams or fraudulent charities, donors needed to be assured that the organisation running the platform was legitimate, credible, and accountable for the responsible management of their donations.

Feature - 1/3

Spotlighting Team &
Board Members

Spotlighting Team & Board Members

Users wanted to see the faces behind Ray of Hope as it demonstrated a commitment to transparency. However, they had difficulty finding this page as it was hidden in the footer on the original site.

We shifted this information into “About Us” to increase its accessibility as it was the page most users would navigate to when trying to learn more about Ray of Hope.

Feature - 2/3

Showcase Financial Statements

Users also gauged an organisation's transparency on how easy it was to locate their financial statements on the site. Thus, we shifted the financial statements from a hidden page in the footer up into the ‘About Us’ page. We also included it as a secondary navigation label in the global menu to increase its visibility.

Users also gauged an organisation's transparency on how easy it was to locate their financial statements on the site.

Thus, we shifted the financial statements from a hidden page in the footer up into the ‘About Us’ page. We also included it as a secondary navigation label in the global menu to increase its visibility.

Feature - 3/3

Highlight Partnerships with Reputable Organisations

An interesting research insight was the general lack of regard users had towards the current ‘As Featured On’ section. Users felt the news media icons shown were not assuring, as news articles may be doctored or lack fact-checking.

We decided to change this section from “As Featured On” to “We Work With”, which allowed us to feature logos of Ray of Hope partners who are government-affiliated or corporate banks. which could inspire more confidence in users.

Key learning points

✰ Scope early, scope often ✰

As project manager, I realised how important it was to set aside time for daily housekeeping matters, be it stand-ups or updating the task matrix. It may not be as fun as churning out frames on Figma, but these important habits were the foundation for the team’s success and synergy.

✰ Not all assumptions are bad ✰

There were times when it was necessary to make decisions based on assumptions because we simply didn’t have time to research everything. As someone who prioritises evidence-backed decisions, I had to get comfortable with leaning into the grey areas where needed.

✰ Embrace change ✰

New insights that surfaced throughout the project would occasionally require us to pivot our approach entirely. I had to keep an open mind during these instances and remember not to get overly attached to our designs. Change is the only constant and this mindset kept me open to continually exploring fresh and new ideas.

view next case study

Interested to know more?

Drop me a message via the channels below! I’d love to hear from you :)

+ 65 9325 1544

hongqiaoen@gmail.com

The Problem