UI/UX Case Study

Nature Society
Singapore

Designed a mobile app to effectively manage volunteering services.

Project Overview

What is Nature Society Singapore?

The Nature Society (Singapore) or NSS is a non-government, non-profit organisation dedicated to the appreciation, conservation, study and enjoyment of the natural heritage in Singapore, Malaysia and the surrounding region.
‍
Even though the organization's well-established status, users still perceive the website as lacking clarity. Individuals encounter challenges when attempting to join events, and there are difficulties in enticing ex-volunteers to return, often attributed to the distant locations of the events.

MY ROLE

An UI/UX designer where my responsibilities involves working closely with stakesholder and communicating design recommendations, prioritising outcomes, leading the end-to-end design process, and managing expectations across dev teams.

DURATION

8 Weeks

DESIGN TOOLS

Figma, Adobe Illustrator, Adobe Photoshop, Slack, zoom (remote)

User Research

Individuals with volunteering experience are our target audience.

My team and I decided that looking for people with volunteering experiences would be a great help to identify challenges that people might faced. We also wanted to learn more about their habits, needs & motivations.

We interviewed a total of 5 people with volunteering experiences and was able to gain some insights from it. The followings are the objective of our research.

01

More information will be required for people to know.

Improve the clarity of information about volunteering events to keep people up to date.

02

People get frustrated when content is too dense.

Understand what kind of content would keep people engaged rather than being wordy.

03

Some places are not easily accessible without transport.

Addressing the challenge of remote or hard-to-reach locations without reliable transportation.

04

Bookings may sometimes be overlooked.

Find out what ways could we prevent volunteers from forgetting the events they've signed up for.

Finding & Analysis

After interviewing from all our 5 users, we consolidated their feedbacks into Affinity Map.

Based on our initial user findings, users find that most information lacks clarity on the Nature Society Singapore website, as it is either too chunky or scattered.

Users are mostly frustrated by how certain visual elements are placed, which leads to low interaction and causes them to leave the website without understanding the furnished content

01

The user found it difficult to obtain the necessary information from the current website.

02

Users prefer to have more visual storytelling rather than just text.

03

The location is too far, there’s no bus stop so we literally need a car to drive us in.

04

Users find registering for volunteering work confusing.

Defining Persona

I created 2 personas to synthesize the patterns users have shared.

Consolidating insights from both groups of interviewees, despite being divided into two distinct demographics, their needs and pain points exhibited sufficient similarities for me to formulate two personas.

John

32, Botanist, Plants Collector

The goal is to enhance user satisfaction and engagement on the platform to be able to discover eligible volunteering options, signing up seamlessly for events and viewing a summary of their volunteering schedule.

Xin Ling

24, Photographer, Editor

The goal is to facilitate cost-effective transportation solutions by enabling users to hitch rides with nearby volunteers, save on carpooling expenses, and identify individuals in close proximity attending the same events.

Problem Discovery

Leveraging insights drawn from affinity mapping

By utilizing insights obtained through affinity mapping, we were able to formulate conclusions and develop two problem statements targeting two distinct personas.

PRIMARY PROBLEM

John needs a way to streamlined volunteer event management for effectiveness.


‍

SECONDARY PROBLEM

Xin Ling needs to reduce travel barriers to re-engage in volunteering and maintain her passion for community service.

Naturally, this also leads to 4 different but closely connected objectives to consider in our ideation phase.

HMW

Streamline the processes for the user to easily sign up for the events?

01

HMW

help the user track their schedule to ensure they can join the activities?

02

HMW

help the user get to the venue without spending too much time travelling?

03

HMW

help the user to resume her active role with volunteering services?

04

Analysing Market & Competitions

Identifying opportunities that address the user’s pain points

With the help of HMW (How Might We), we generated ideas while creating low-fidelity wireframes, which helped to develop preliminary concepts for elements to incorporate into the design. Below are the 4 HMW questions that assisted in my ideation process.

Ideation & Design

Approaching a solution through sketching and converging ideas

We began addressing the problem by creating rough sketches or initial designs. This helped us visualize different possibilities. Afterward, we refined and combined these ideas to arrive at the most effective solution.

The early stage of user testing and a client meeting on the wireframes, feedback highlighted two crucial aspects: streamlining content and establishing a storytelling theme. The focus is on achieving simplicity with minimal wording, prioritising infographics for a strong thematic presence, and creating an inviting art gallery atmosphere to stimulate user exploration.

The Solutions

The recommended solutions to ease the user’s challengers

The objective for the proposed idea was to establish user satisfaction by streamlining registration processing effectively.

The team is also interested in sustaining visitor's interests to prolong their interaction with the mobile app. Defining a brand new approach towards volunteering drives new opportunity for Nature Society Singapore to gain traction.

Solution Objective 01

Streamline the registration process for volunteering activities for the users.

  • User is able to shortlist activity based on categories.

  • Indication of the available slots available for booking.

  • Notify the user once the booking is made and automatically update it in their calendar.

Solution Objective 02

Easy access to information about past or upcoming projects.

  • Click 'Read more' to find information about available activities.

  • "Chat" function to communicate with participants or organizers.

  • Facilitate access to information for users about the venue, organizer, and number of participants to ensure convenience.

Solution Objective 03

Receive reminders for
upcoming activities and
share invites with others.

  • "Built-in calendar" to allow users to keep track of their schedule and plan their activities accordingly.

  • Confirmed activities are prominently displayed on the home screen of the app.

  • "Share" button allows users to share activities with like-minded individuals.

Iterations From Usability Test Insights

Usability testing with five users to test on the design

We carried out a usability test with five users to assess how user-friendly the application is. The test was conducted in person by our team, where the participants were given the following task while we observed how they navigated through the application.

The solution was further refined based on observations from usability tests, where users shared their feedback on what we could improve.

1. Reducing event tabs 

Reducing number of event reflected in the homepage as it was distracting for the user.

Included a "View All" button as user previously is fiddling in the homepage, as they thought the information are found there.

2. Implemented A Pop-up Box

A confirmation page will appear to notify user on the confirmation on the event.

Previous interface would caught user off guard as the event is booked immediately after confirming the guest.

3. Provide "feedback" to indicate to the user that the system is searching.

User mentioned previous animation looks like a loading screen more than a button to select the driver.

Hence, we adopted the idea and turn it into a loading screen instead.

4. The previous interface lacked dynamic elements for the users.

Instead of a static screen, a dialog box pop up to notify the user how many driver were found in this event.

5. Prompt to confirmation

Instead of just accepting the user to withdraw their booked ride. User will be prompted again to confirm on their request.

A clause is stated to emphasis to the user on the penalty they might be facing for consecutive cancellation.

The Final MVP Product

The Overview of the enhanced platform

Onboarding + SignUp

Browsing & Searching

Registering For An Event

Hitching For An Ride

Defining Impact

Measuring the success and impact of The Mobile App

We then define the key performances to measure the success and impact of the product at this stage.

Navigating the App

How easy was the navigation around the app, measured through qualitative interviews.

Efficiency Of The App

How efficient is for the users to manage their bookings, measured through usability testing.

Engagement Rate

How often user register their activity through data collected over time, post launch

Key Takeaways

A need to truly understand user's needs.

  • When there’s a strong sense of community, it positively influences the turnout rate and attracts more volunteers to join. Fostering this sense of belonging is crucial for organizing and participating in events.

  • It was through contextual insights and user interviews that proved to be equally, if not more valuable, in identifying opportunities and ideas that direct the generation phase

  • The new proposal for a mobile app suggests that Nature Society Singapore can help volunteers connect with their causes more intuitively. However, this approach assumes that all volunteer activities follow a linear discovery journey, which may not fully align with the diverse and dynamic nature of volunteering experiences.

Let's Connect!

Email Address
LinkedIn Page
WhatsApp Page

Made with webflow while sipping coffee
@ Gavin Lum 2024 Portfolio