5 Elements of UX + Lean UX Case Study: Animal Lovers League Singapore (Part 1)

Lee Kim
11 min readNov 30, 2020

The Background

Animal Lovers League (ALL) is a registered charity that was founded in 2002 and is home to over 500 dogs, cats and animals in need. The charity provides much-needed care to vagrant strays, abandoned, traumatised, abused and rescued animals.

ALL aims to encourage the public to adopt instead of buying animals, and endeavour to rejoin the animals at ALL with loving and committed families. Their value is strictly no-kill.

Like all NGOs, ALL constantly faces the challenge of raising funds and support. In order to continue the good work that is being done ALL needs the support of the public to help keep the charity running and continue caring for the animals. Some ways members of the public can help include donation, volunteer, sponsor, adoption and shop for a cause.

Project Overview

The team comprises two UX students currently studying at Singapore Polytechnic(SP). The design challenge was to design (or re-design) a digital product for a registered charity in Singapore. The reason we chose an animal charity over the option of a human charity is simply because we felt that animals are always the last to be considered especially during this global crisis.

The Approach

The approach is based on and guided by ‘The Elements of User Experience’ and Lean UX methodology.

Over the course of 6 weeks, we learned and applied the first 3 planes from the 5 elements of User Experience which defines the principles of a user-centric product experience. From bottom to top, abstract to concrete, each layer is dependent on the other layers below it. The planes applied include; strategy, scope and structure.

‘The Elements of User Experience’ by Jesse James Garrett

The Lean UX methodology ensures a user-centric approach that aims to eliminate wasteful practices and improve efficiency.

The Lean UX process

As this is an academic assignment with a set deadline and little to no access to the data from ALL, this method allowed us to go off of assumptions and create the hypothesis that may solve the problem while testing feedback on ideas in order to learn quickly before finalising a design solution.

01- The Strategy Plane: Product Objectives & User Needs

Strategy is the foundation of any successful UX. To begin we need to answer to the two guiding tenets:

  1. What do we want to get out of this product? Product Objectives (Business Goal)
  2. What do our users want to get out of it? User Needs

Product Objectives

By establishing the product objectives we mapped out ALL’s business model using the Business Model Canvas framework. This allowed us to form assumptions on their business needs by identifying factors such as; who they help, how they work and what their value propositions are. We conducted the research using their website and social media accounts as the primary sources.

Business Model Canvas for ALL

Assumed business goals

  • Create awareness towards the prevention of cruelty to animals and the importance of animal adoption drives.
  • Increase monetary contribution(donors) and human resources(volunteers) to keep the charity running.

Furthermore, we made the assumption that the business can achieve the goals by enhancing the website(product) experience. As the most effective and main communication platform the website’s objective is to establish trust and grow relationships with users by providing more background information on the organisation and their initiatives. Essentially, it would drive public awareness and encourage users to become donors and volunteers.

User Needs

In order to establish what users want to get out of the website, we created a proto-persona. Unlike the usual persona, the persona in Lean UX also called proto-persona is created based on assumption. It not only helps us to understand the user’s needs but also allows us to be more empathetic to the end-user.

With this in mind, we created a proto-persona first while conducting research to validate our assumption. As we conduct ongoing research we adjust our persona in response.

Based on our discussion, we created Lily.

Proto-persona for ALL

Validating Assumptions

In order to validate our assumptions, we conducted user research to gather data and insights. Due to the above-mentioned project time constraints, we conducted a brief survey by using the ‘Lean Survey Canvas’ resulting in the preparation of an effective and powerful survey. We received 20 valuable responses in 2 days.

Lean Survey Canvas for ALL

We asked the following questions:

  1. Have you ever donated to or volunteered for a charity organisation?
  2. How would you prefer to reach out to a charity platform? And why?
  3. What donation method(s) would you prefer?
  4. What information do you need to know how to become a volunteer?
  5. What are the criteria for you to choose an organisation to donate or volunteer?

And here’s what we discovered:

  • Over 70% of the participants have experience in donation or volunteering, 8 out of 20 are donors, 3 out of 20 are volunteers and 2 out of 20 are both donors and volunteers.
  • 15% of the participants have the experience to donate and volunteer in animal charity.
  • 11 out of 20 participants prefer to use social media and websites to reach out to the organisation. Some participants however, were perturbed about fake news and misleading information that can be shared on social media. Some participants further raised the concern about the safety of their personal data and privacy on social media. It is noteworthy that all participants did not doubt the reliability of a website.
  • How the organisation uses the donation will be the most consideration for the user to become a donor.
  • Type of task, time of commitment and organisation background are the top three concerns of our participants when becoming a volunteer.
  • Most of the participants chose location & website accessibility as the key criteria to donate and volunteer followed by organisation background and achievement. Users are least concerned by organisation size and popularity.

With those insights, we adjusted our proto-persona.

Proto-persona 2.0

02- The Scope Plane: Functional Specifications & Content Requirements

Now that we have a clearer understanding of what the business and users want, the next step is to determine how to cater to all the strategic objectives.

The scope plane comprises two aspects which are functionality and contents. By defining the requirements of these two aspects, we can accurately determine what will and will not be built.

Functional Specifications

We began with the functionality side, our major concern was what would be the features of the website, in Lean UX we also called it opportunities. Opportunities are the product features, changes, additions, or improvements that would help users to meet their needs and drive the business outcomes.

Lean UX Hypothesis

To ensure the opportunities aligned with the user’s needs and business outcomes, we used the Lean UX Hypothesis Table to help us craft out the Feature Hypothesis Statement.

Lean UX Hypothesis Table for ALL

Feature Hypothesis Statements

  • 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 Features

After we completed the hypothesis, we moved on to prioritisation. The core value of a user experience is to make a product that can satisfy a user. Furthermore, there are business goals that need to be achieved with an eye on helping the business grow. These two aspects mean that finding the correct balance is crucial in UX prioritisation.

Therefore, we needed to prioritise our features into 2 aspects: the business goal and the user’s need. We used the Effort/Impact Scale which serves to identify the features which have the highest impact with the lowest effort from the business point of view.

Effort/Impact Scale from business POV

Next, we used the MoSCoW method to rank the features according to the user’s needs.

MoSCow ranking from user’s need

Upon completion of both prioritisations, we decided to use the following features which can fulfill both the business goals and user’s needs:

  1. Provide more details on the organisation’s background.
  2. Provide more information about the volunteer program.
  3. Enhance ALL animal rescue stories.
  4. Create a better user flow on the website.
  5. Show facts and statistics on the impact that ALL has made.

Content Requirements

Content requirements define the information such as text, images, audio and videos that are needed in order to provide value to a website. There are two crucial tasks to complete in this scope plane which are Content Inventory and Content Audit.

A content inventory lists out all the contents displayed on a website. A content audit determines the quality of the content and whether it needs to be updated or removed.

Content Inventory

We created a spreadsheet that includes the index, navigation, page titles, URL links and comments to help us crystallise all the pages at a glance. See below our content inventory for ALL.

Content Auditing

After completing the ground work, we now have a clear picture in order to conduct a thorough audit on ALL’s website. As a result, most of the pages need to be updated due to the content placement as well as a general lack of information. Some pages need to be removed due to the lack and irrelevance of content.

Content Inventory & Auditing for ALL

Content Framing

Content framing is the precursor to wireframing, it allows us to verify how the contents will be incorporated into the website before we build. In addition, it also helps us to determine the hierarchy and level of the details on each page which are aligned to product objectives.

Content framing for ALL

03- The Structure Plane: Interaction Design and Information Architecture

Similar to the scope plane, it also incorporates two components, Interaction Design(IxD) & Informative Architecture(IA).

In this plane, we justified how the user and system interact with each other and how the pieces fit together to form a cohesive solution with the aim of developing a conceptual structure for the website.

Interaction Design(IxD)

There are 5 dimensions of interaction design which are; Words, Visual Representations, Physical Objects/Space, Time and Behaviour. With these 5 dimensions we can elevate a communicative user experience.

5Ds of Interaction Design for ALL

1D: Words

By understanding the demographic of our users, we can use concise language to communicate with them. With that in mind, we jotted down the brand personality of ALL as well as the target users below.

ALL’s brand personality: honest, inspirational, trustworthy, caring, positive, humane, ethical

Target users: Caring, cheerful, helpful, ethical, animal lovers, philanthropist

2D: Visual Representations

Visual representations are as powerful as words. They include typography, photography, icons, diagrams and any graphical elements.

We agreed that:

  • Photography: natural, emotional, bright lighting
  • Iconography: Outlined, simplicity
  • Colour: Consistent with corporate color guide

3D: Physical Objects/Space

This is where all the interactions take place.

Below are our assumptions:

  • 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

4D: Time

The fourth dimension defines the time that the user spends interacting with the first three dimensions. We concluded that some design elements such as a progress bar or numbering will help users to measure their progress.

5D: Behaviour

This is how users will behave while using and after using a product. The users should feel empathy, inspiration and motivation to help while browsing through ALL’s website. Furthermore, the user should boost their self-worth, feel content and experience joy.

Information Architecture(IA)

Information architecture interprets how the content will be structured when users interact with the website. The aim is to organise, categorise and prioritise the content which will eventually help users to navigate more easily.

Card Sorting

This is the first time for me to do card sorting. We conducted a hybrid card sorting with 5 users. So, what is hybrid card sorting?

Hybrid card sorting is a combination of both closed and open card sorts. The participants will sort cards into categories that we already defined. However, if they think the cards don't fit well in those categories, they can create and label their own. By using the card sorting method, we able to gain a lot more insights from users, and understand how users view, categories as well as label content.

It was an enjoyable user-testing activity where I could observe and listen to what they thought when they were doing their sorting. We analysed and discussed after we gathered all the results.

We concluded and finalised the following:

  • Remove all the pages with no content (Events & TNRM program)
  • Add a homepage to include all the important information at the first glance.
  • ‘Financial information’, ‘Our Rescue’ and ‘Our Team’ will be part of the content pieces in ‘About Us’
  • Change ‘Support’ to ‘Ways to help’
  • Move ‘Volunteer’, ‘Shop for a cause’, ‘Adoption’ as sub-categories of ‘Ways to help’
Information Architecture 2.0

Reflection

I always enjoy working together with people which is why I chose to work in pairs for this project. With our combined skills and different points of view, we make one awesome team.

Actually, I was totally stunned as I had never started a project based on only assumptions (traditionally I would conduct deep research before I kick-started). However, we managed to maximise our output with little resources by using Lean UX.

I am even more motivated to start the next term where we will learn more about the different planes from ‘The Elements of User Experience’ and how to use other Lean UX methods to design a solution for a website.

--

--