User Interface Design for the website of a non-profit organization

Introduction

This is a digital product design project done by a team of 2 students, Edward Han and Huang Junyi. (herein referred to as “The team”)

The purpose of the project is to develop understanding, skills and competencies in digital product design, methods and processes.

The digital product that will be redesigned by the team is the website of a registered charity organisation in Singapore called Love Kuching Project.

Background

Established in 2009, Love Kuching Project is a cat rescue group in Singapore entirely run by volunteers. Their aim is to help the cat welfare community by promoting cats as companion animals through its outreach programmes (Feline Therapy at nursing homes and special needs schools), and rehabilitating sick and injured community cats through providing intensive foster care at their shelter.

Currently, their communication channels are Facebook and Instagram where they update and post information and photos of the cats that they are taking care of. Their official website is still work in progress and will be launching soon.

The 5 Elements of UX

Refer to the following diagram, the team focuses on the first 3 planes for UX for this project and will continue with the remaining 2 planes during the next term. Hence, the team worked on the Product Objectives, User Needs under Strategy plane, Functional Specifications, Content Requirements under Scope plane, Interaction Design, and Information Architecture under Structure plane.

Lean UX methodology

For this project, the team used the Lean UX process which start off with making assumptions of the product and used it to generate hypotheses.

The big 4 assumptions of this process are:

• Business outcomes
• Users
• User outcomes
• Features

The Strategy Plane

The first plane is what the product needs to accomplish for the organization and the users.

Business Goals

To determine what is Love Kuching Project business goals, the team used the business model canvas to describe, visualize and assess how an organization creates, delivers and captures value.

The team went through all the available information on Love Kuching Project via various communication channels and media, such as blogs and even emailed the organization directly. All information obtained is used to hypothesize the organization’s business goals on the business model canvas as shown above. The following explain key elements of the Business Model Canvas.

Who are the customer segments?:

• Public or cat lover who want to help injured or chronically ill stray cats
• Volunteers
• Donors
• Organization that benefit from Feline therapy programme

The value propositions (products and services that create value for the Customer Segments):

• To build a warmer and more caring Singapore through the love for cats

The channel in which the organization delivers its value to the customer segments:

• Non profit organisation website
• Social media
• Words of mouths

Customer relationships:

• People who believe cats who have received love and care can contribute back to society

Revenue streams for the organization:

• Money from donation

Key resources that makes the business model work:

• Volunteers

Key activities that makes the business model work:

• Administering care to chronically ill or injured stray cats and abandoned kittens.
• Helping with Feline Therapy at nursing homes and special needs schools
• Open houses and events

Key partnerships that makes the business model work:

• Other nonprofits organization
• Donors
• Volunteers

Cost structure of costs incurred to operate the business:

• Medication and food for cats
• Shelter for cats

Hence, based on the crafted business model canvas , the team established that Love Kuching Project primary business goals are:

• To build a warmer and more caring Singapore through the love for cats
• Caring for injured or chronically ill stray cats and abandoned kitten

Product Objective

To meet the business goals of Love Kuching Project, the website must be an avenue for public to apply for volunteering work and contribute donation to maintain the organization business. Hence, it is important for the website to create public awareness so as to achieve its product objective.

User Needs

After defining the product, the next thing is to identify the User Needs.

This consists of two steps, first is to Define the Customer, second is to identify Customer’s Pain and Gain. Finally , the opportunity and key features are determined.

1.Define the Customer

Using the Lean UX methodology, the team first established a Proto-persona, a “person” who best represent the goals and aspiration of most customers.

The proto-persona is Ms Katty, a cat-lover, whose goals, aspirations, personality , etc are as explained in the following illustration.

2.Identify Customer’s pain and gain

Based on the proto-persona, the team identified her main pain and gain. then the team rank them starting from the most significant to the least as shown below. Those at the top of the list require the most attention.

User Needs (Identify opportunities)

After identifying the Customer’s Pain and Gain, the team rephrase the major Pains, and/or Gains into opportunity, with statement start with “How might we”.

Thus, the following key opportunities are identified.

Opportunities:

• HMW make the website more easily accessed for user to volunteer
• HMW engage user

User Needs (identify key features)

From the pain , gain analysis and the opportunities identified, the team established several key features to be considered in our product.

This is done by using the following format.

Then the team mapped these possible features using the Impact-effort grid and rank them using the MOSCOW method.

Thus, the selected features are as follows:

• Embedded email on the website for user to contact
• Feature to match her free time with our volunteering slot/ or show calenders
• donation button that links to different type of electronic payments (some paylah, paypal, ibanking)

Content Requirements

The team used Content Audit to analyze content needs by using content inventory template. Since the website for Love Kuching Project is still work in progress, the team has to base on information from other sources to come out with the contents for the audit.

Based on the audit as shown below the team decided to keep donation, event and company profile related information.

Content Framing

Using content framing the team was able to prioritize what to include in the website to meet Love Kuching Project goal of ensuring user to understand what is the organisation about within few seconds. The team determined that the Most important elements are tagline, image and summary of what Love Kuching Project is about on the homepage.

Interaction Design

The team worked out the interaction design based on 5 interaction areas as shown below. The design aimed to facilitate the user’s behaviours intended to generate by the organizations product.

The following are two results of identifying the 5 areas of concerned:

Common features: Not too serious, but credible, Evoke the love for cats, concise and focus while allowing “more” selection; allow easy reading and quick comprehension even in mobile website.

Information Architecture

This is the

• The structural design of shared information environments
• The combination of organization, labeling, search, and navigation systems within websites and intranets

Firstly, the team recorded each of the necessary contents of the website onto individual Cards

Then, Card Sorting method was used to sort, group and organize the content of websites in ways that makes sense to users.

Open Card Sorting method was used and it generated a number of different site maps. Two typical examples are as shown below:

After careful evaluation, the team decided to choose the one that most of the testers favour, as shown above.

Conclusions

By deploying several effective methodologies and tools, the team has successfully established the Strategy, Scope and Structure of this product — website for the Love Kuching Project.

Building on this foundation, the next stage is to make the product more concrete, by developing the Skeleton plane and finally the the surface plane.