Lean UX Case Study:
Redesign a digital product for
a registered charity in Singapore.

Background

Animal Lovers League (ALL) is a registered charity and home to over 500 dogs and cats. It became official in 2002 and is currently a registered no-kill shelter.

As one of the largest and longest-serving animal welfare groups in Singapore, it’s mission is to help control the stray population through sterilisation and not annihilation. The animals under their care consist of vagrant strays, abandoned, traumatised, abused, and rescued animals.

Our Team

This project was conducted by 2 UX/UI design students studying in Singapore Polytechnic as an assignment to learn about the UX approach and UI design to redesigning a digital product for a registered charity in Singapore.

We chose a non-profit animal organisation as the purpose of the redesign is based on the fact that many charities must choose to use their funds for more needed places, and animals are always the last to be considered especially during this global crisis. We hope that through this school project, we can provide some suggestions for the organisation as a reference to improve its digital platform.

Lean UX Approach

The Lean UX process

Considering this is a school project about a non-profit organisation, we did not have access to the organisation, therefore, we did this project through Lean UX approach. It starts from assumptions to create hypotheses and establish what we believe we know about the users and what they need, then validate the assumptions via real users. This method can save time and costs for doing research, so we can focus on building the MVP based on our assumptions and hypotheses, then test it. This will provide more room for iterations.

Business Goals

We start by using the Business Model Canvas framework to map out the findings of Animal Lovers League via quick online research and information available on its current website to understand the rationale of how it creates, delivers, and captures value.

These will help us to form assumptions of its business goal:

  • To create awareness on the prevention of cruelty to animals and the importance of animal adoption drives
  • To increase monetary contributions (donor) and manpower (volunteer) to keep the organisation running

Product Objectives

The official website is considered a reliable channel for users to learn more about the organisation. To establish trust with users, it might be also the main platform to reach out to the users. It would let the organisation create an opportunity to convert potential users to become donors and volunteers.

Therefore, through user experience we want to improve the information available on the website and provide a good platform, function, and planning, ultimately achieving the goal of the organisation.

User Needs

Next, we would need to know who are users the website is targeting and what are the user needs. Instead of spending months in the field interviewing people, we spent a few hours created a proto-persona from assumptions, then validate it with a quick survey.

Proto-persona

Validating Assumption

To validate the assumptions, we crafted a quick survey using Lean Survey Canvas framework which generated 20 responses in a short period of time. The survey data provided us insight to prove our assumption or doubt.

Some questions in the survey include:

  1. Do you have any experience in donation or volunteer? Please share your experience.
  2. How would you prefer to reach out to a charity platform? Why?
  3. Which factors influence you the most when deciding to donate or volunteer?
  4. What information do you need to know about becoming a volunteer?
  5. What are the criteria for you to choose an organisation to donate or volunteer?

The survey outcomes provided us with some interesting insights, which overturned some of our previous assumptions.

  • 14 out of 20 participants have the experience of donation or volunteer. Only 3 of them donate and volunteer for animals.
  • 11 out of 20 participants prefer social media to reach out to the organisation, 5 of them also selected website.
  • How the organisation uses the donation will be the most consideration for the user to become a donor.
  • Time of commitment is not the only concern, the type of task and organisation background also the consideration for participants to make a decision to become a volunteer.

From these survey findings, we made some adjustments for our proto-persona.

Feature Hypothesis Statement

Now we have formed the business goals, user needs and validated the proto-persona. For the functionality side, we would need to consider what features is needed on the website to address them. Here, we use the Lean UX Hypothesis Table to list down all the business outcomes, persona, user outcomes, and features that can achieve their goals.

With that, we could form the Feature Hypothesis Statement effectively:

  • We believe ALL can increase monetary contribution if Lily knows where her donation is going and how it is being used with a transparent financial overview.
  • We believe ALL can increase monetary contribution if Lily can find ALL is a trustworthy animal rescue organisation by providing more organisation background.
  • We believe ALL can increase human resources if Lily is provided with more information to have a better understanding of the volunteer program and how to apply.
  • We believe ALL can increase awareness if Lily can feel the confident with organisation through facts and statistics on the impact ALL has made.
  • We believe ALL can increase awareness if Lily can feel empathy for the animals ALL rescues by displaying past success stories.
  • We believe ALL can increase awareness if Lily can easily navigate the website with better user flow and structure.
  • We believe ALL can increase awareness if Lily adds her voice and spreads the word about ALL by showing comprehensive care they provide to their animals.

Prioritising Hypothesis

Next step, we would need to prioritise the Hypotheses to ensure which feature will need to do and be tested first. We use the Effort/Impact Scale to prioritise the features listed in the hypothesis statement based on the organisation perspective.

Then, we use MoSCoW to rank the importance of the features according to the user’s needs. The ideal situation is to start with the feature that prioritised by user and organisation.

Content Requirements

For redesigning the website, we recorded all the content and information in a content inventory spreadsheet for better understanding and did the content audit to determine what existing content we need to keep, update or remove to meet the user needs.

Content Framing

Content frames are tools that can help us validate the content incorporated on the website, making sure we have the right content in the right place and make modifications as needed. Decide the hierarchy and level of detail on every page to aligned to our product objectives.

Content framing for ALL’s website

Interaction Design

Next, we would need to find out how we want the user and website to interact with each other, the 5 dimensions of interaction design could help to achieve:

1st Dimension: Words
Words/content should be easy to understand and written to effectively communicate information. It also depends on how we determine the organisation brand personality and target users.

  • ALL’s brand personality: honest, inspirational, trustworthy, caring, positive, humane, ethical
  • Target users: Caring, positive, cheerful, helpful, ethical, animal lovers, philanthropist

2nd Dimension: Visual Representations
Most of the time, attach relevant typography, photography, icons, diagrams or graphical elements could help to assist users to process the information in front of them.

We believe that,

  • The natural, strictly no filter or editing photography can show their thrust side.
  • Outlined, simple iconography would help to stand out from the content.
  • Logo and the corporate color can show consistency as a guide.

3rd Dimension: Physical Objects/Space
For different mediums, what we need to do is not only changing the layout. We would also need to think about the interactive way. The response is not just about moving things, it also about understanding the context the user might be doing.

  • A desktop/laptop, with a keyboard and mouse/touchpad
    Type of interaction: click, scroll, type
  • A smartphone/tablet, with the user’s fingers
    Type of interaction: swipe, tap, slide, multi-touch, zoom

4th Dimension: Time
The fourth dimension defines the time that the user spends interacting with the first three dimensions, it mostly refers to media that changes with time (animation, videos, sounds). We concluded that some design elements such as a progress bar or numbering will help users to measure their progress or resume their interaction some time later.

5th Dimension: Behaviour
This is the user’s actions, reactions, and emotions when interacting with a product. It was determined by all the previous dimensions. We would like to see the users be empathic, inspired and motivated while browsing through ALL’s website, and feel contented, self-worth, joy and trust after using the website.

Information Architecture

We did a hybrid card sorting with 5 users to get insight into how the site structure to be categorised. It could help us to understand the possible combination. How the navigation system and shaping information products and experiences to support usability and findability.

From the card sorting exercise, we analysed and discussed after gathering all the results.

We then finalise with the following actions:

  • Remove the pages without content (Support, Events, TNRM program)
  • ‘Our Rescue’ and ‘Our team’ will be part of the content pieces in ‘About Us’
  • Replace ‘Support’ to ‘Ways to help’ and implement content into it
  • Move ‘Shop for a cause’, ‘Adoption’ as sub-categories of ‘Ways to help’
  • Combined ‘Adoption process’ and ‘Adoption stories’ into 1 page
  • Move ‘Volunteer’ to the top level.
  • Place the ‘Become a sponsor’ into ‘Donate’

User Flow

Based on the Information Architecture (IA) and customer journey map, and the previous survey outcomes, we have created a user flow, focusing on the way that users will interact.

Considering users might not perform tasks the same and may travel in different paths, we appropriately establish a connection between pages and provide users with a convenient path to complete tasks.

User flow

This user flow would try to achieve our business goals and user needs. We would want to find out if the user gets their needs after browsing each page. Is the information enough for the user to make a decision? Through various paths, we want to gradually provide users with more information.

Interface/Navigation Design

Before redesigning the website, we conducted a website audit to highlight areas that should take note when redesigning, keeping in mind how users interact with the website.

Current website show inconsistencies in page layout

Navigation with priority
Emphasis the priority call to action to show the purpose and what we are focused on.

Predictability
Set accurate expectations about what will happen before the interaction has occurred. Show users an interface that predicts the outcome of the interaction. Lead in a predictable direction.

Consistency
Browsing a website with consistent layout and elements will provide an efficient user experience so that users are able to focus on their tasks. In appearance, it will show trustworthiness, regularity, and can easily find the information.

From the website audit outcome, we created a UI style guide to ensure consistency across all pages.

UI style guide

Solution

Quick overview to discover ALL
Differentiate the ‘Volunteer’ and ‘Donate’ call to action, making it stand out from others to catch attention when users reach the home page. The heartwarming hero banner accompanied by a short slogan, and a quick link button to bring those users who do not need further information to the donation or volunteer page directly.

The main purpose of the home page is to emotionally drive donation rates and encourage users to become a volunteer. It will lead users to the organisation background, the statistical impact, and the many ways users can help out.

We also provided a quick link section at the bottom of every page to navigate users for further information or make decisions.

Home page

Establishing trust and confidence by better understanding
According to the insight from the conducted survey, users will make their decision by understanding the organisation background, how they use the donation, and what are their contributions, statistics and impact. To ensure we meet the user needs, we incorporate the content and information into several sections throughout the website.

  1. ‘Home page’ showcasing facts and statistics about the impact ALL has made, and provided the financial report download.
  2. ‘About us’ lets users get deeper understanding about ALL, organisation structure, and what ALL contributes.
  3. ‘Donation’ page descript how the organisation will use the donation.
About us page

Integrate content and information to simplify user flow
The intuitive and consistent layout helps the information to be more concise and digestable.

We recategorise the pages, integrate fragmented pages and content and make the information more concentrated, with the ultimate aim of simplifying the user flow, and achieving business goals more effectively.

Ways to help page

Increase willingness for donations and volunteering
Based on the business goal, ease of access, flexible and effective payment methods will help increase users’ willingness to donate. Clear terms, requirements and information can help volunteers make quicker, more-informed decisions and avoid misunderstandings.

Showing the purpose of certain donation amounts will provide an indicator for reference to encourage people to donate. In addition, the ‘Donation’ page also provided other ways to donate, so donors can find something that is suitable for them.

Donation page

On the Volunteer page, we list a variety of ways users can volunteer, providing flexible choices for volunteers and attaching terms and requirements, which can help those interested in selecting suitable ones.

Volunteer page

Optimising for mobile responsiveness

In fact of user’s activities are not limited to using computers, mobile phones are also the main device used to browse websites, share, post stories on social media in their life. At the same time, this is also a way for the organisation to reach out users. Therefore, it is important to design with mobile responsive in mind.

To optimise the website for mobile,we will need to change the grid from the standard 12-column to a mobile 4-column grid, with elements stacked on top of each other for a narrow and vertical view. According to the limited width and long scroll issue, certain function or layout displays are different in mobile and desktop view. The navigation menu will become a ‘hamburger’ menu button which will expand into navigation drawers when tap. Footer section will hide all columns and is displayed as a collapsible menu.

Home page in mobile view

You may interact with the Figma Prototype here.

Conclusion

This project showcases how to use the Lean UX approach to redesign a website by creating hypotheses from assumptions and establishing the users’ needs. Through this, I learned that this approach is good for projects with limited resources, time and budget. Lean UX eliminates the complicated user experience research process and shortens the turnaround time, making targeted use of existing resources to put forward well-founded hypotheses for verification. This allows us to quickly build something tangible and allows us to test on users to gather new insights and iterate.

You may check our process annex (Miro) here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Keith Chong

Keith Chong

1 Follower

A UI/UX designer in B2B marketing, one of the Agile Scrum team member.