Redesigning the Singapore Red Cross website using The 5 Elements of UX & Lean UX methodology.
Together with my team member (Alicia T), we decided on Singapore Red Cross as our client for this case study. We realised many improvements can be made to their website by applying the two research methods (Elements of UX & Lean UX ).
Overview of The Client
The Singapore Red Cross Society (SRC) officially began operations on 30 September 1949. The SRC is a non-profit organization that focuses on providing care to the general public and people in need, through several divisions including the blood donor programme, overseas humanitarian engagement, local community engagement as well as care services and outreach programs.
Vision: To realise Singapore Red Cross as a leading and distinctive humanitarian organisation that brings people and institutions together in aid of the vulnerable.
Mission: Singapore Red Cross is dedicated to relieving human suffering, protecting human lives and dignity and responding to emergencies.
The Approach
The 5 Elements of UX
The elements are Surface, Skeleton, Structure, Scope and Strategy. We will be working from bottom to top and also focusing on the 3 planes — Strategy, Scope and Structure. Starting with strategizing to determine the User Needs and Business Objectives. Scoping is divided into Functional Specifications and Content Requirements. The Structure Plane will allow us to view how Interaction Design and Information Architecture are placed in the product.
The Lean UX Process
Besides the Elements of UX, we are using the Lean UX approach as well. This methodology helps us in saving our time and effort because we are not focusing on “deliverables” but more towards solving the “problem statement. This is done by starting the process with assumptions and outcomes to create and test our hypothesis.
Product Objectives
SRC needs a website to reach out to families who are in need or require assistance. They will need the website to showcase the type of blood donors they need to be sufficient for the country, use their website to educate and train public volunteers on how they can help the disabled, those in need and also provide information of events happening.
Strategy Plane
We needed to identify the key business goals for the Singapore Red Cross and how the revamped product can benefit both the users as well as the business.
Some of the key goals identified for the Singapore Red Cross, based on both the needs of the business and the users are:
1) Increased awareness of the Singapore Red Cross in general, for the business to generate more funding and interested volunteers keen to provide their assistance be more well informed of the SRC and its programmes.
2) Enhanced care-giving to needy families who require assistance through the SRC and its various support networks, outreach and community programmes
Non-Profit Business Model Canvas
The Non-profit Business Model Canvas allows us to understand the needs of the business to further improve its services to the users. It also allows us to understand the company’s structure better.
Some important key points to note,
Key Partners of the Singapore Red Cross (SRC) include:
- Donors (Corporate and Public)
- Volunteers
- Government Bodies
- Schools
- Christian & other Religious groups
Key Resources include:
- Donors (Corporate and Public)
- Volunteers
- Part-timers
Some of the SRC’s Social Proposition Values include:
- Providing crisis support to those who need it the most
- Outreach programmes to raise awareness for the needy
- Education & programme support for volunteers of the SRC
- Assistance for low-income families through the SRC initiatives
Some of the SRC’s Social Proposition Values include:
- Providing crisis support to those who need it the most
- Outreach programmes to raise awareness for the needy
- Education & programme support for volunteers of the SRC
- Assistance for low income families through the SRC initiatives
Channels for raising awareness for the SRC include:
- Social Media Platforms
- Surveys
- Word of Mouth
- Donors
Key costs incurred by the SRC include:
- Salaries of workers
- Training funds
- Miscellaneous Costs
- Programme and event costs
- Home for the disabled costs
Business Needs
After coming up with the diagram above, we’ve also taken into consideration the user needs and SRC’s target audience. Using assumptions from the Lean UX model, here is a Proto-persona we’ve created that fits the needs of the user.
User Needs (Proto-persona)
Introducing Derrick Lee, a do-gooder who aims to give back to society whenever he can. He has been to many blood donations organized by the SCR and also runs a social enterprise online and works closely with the SRC to aid them in many of their community engagements.
Validating Assumptions
For us to get validate our assumptions, we used the ‘Lean Survey Canvas’ for us to conduct the user research and get data insights. We used google form as our survey platform due to the time constraints and the pandemic that is going on, we conducted the survey online. The questions asked were:
- Do you have any experience in donating?
- What will prevent people from donating/volunteering?
- What is the preferred platform to reach out to volunteers/donors?
- What kind of information is needed to donate?
- What are the criteria needed for a person to sign up as a volunteer or donate?
Results
We had a total of 20 responses and here are some of the insights we managed to get based on our online form submissions.
- 80% of them are above 19 years old and below 30 years old
- 80% of them are employed
- 95% of them have experienced making a donation and/or volunteering
- 41% of the respondents do not remember the last time they were on a website to donate and/or volunteer
- Most of them felt that the process of making a donation or signing up sometimes can deter people from completing it or finds it a hassle
- The most important part of a page is the available information and checking for credibility
- 52% prefers social media as the platform to reach out and the website comes second at 42% and none prefers emails.
- Most of the respondents mentioned that it is important to know how the donations are being used.
- 95% of the users felt that the look and feel of a website affects a person from donating
Adjusted Proto-persona
With the submissions, we adjusted our proto-persona accordingly.
Scope Plane
For our next step, under The Scope Plane for the functionality side, we want to find out what would be considered the product's feature and what could we offer to our client. This means that we needed to take a look at the current website and list down all the opportunities and improvements that would help business and users meet their needs.
Lean UX Hypothesis
We came up with our hypothesis by using the Lean UX Hypothesis Table. This was created for us to align the business outcomes and users’ needs.
Feature Hypothesis Statement
“I believe SRC will be able to raise more awareness about their ongoing campaigns by restructuring the content flow on the website. Then, users and volunteers are able to get the information required easily for them to participate or volunteer with the SRC.”
Prioritising Hypothesis
Prioritising Hypothesis method helps us to sieve through the many features we intend to do for SRC. However, we have to be realistic in terms of the timeline we are working with. Therefore, by using the impact/effort scale we will be able to scale the business goals. As for our user needs, we ranked the importance of the features according to the user needs by using the MosCoW method (Must Have, Should Have, Could Have and Won’t Have).
After we have completed our ranking of user needs, we decided that we were going to satisfy both the user needs and our business goals. The features are:
- Streamlining their information architecture
- Showing the statistics of donors (infographic way)
- Sign up form for SRC’s volunteers to sign up more effectively
- Mobile responsive web app
- The improved user experience of SRC’s website
However, we will also consider the other 2 features at a later stage or phase. These pointers are:
- Marketing Campaigns
- Newsletter
Content Requirement
We must understand what sort of content our users want to see. This will be covered under the Scope Plan as our next step. Before we begin finalising our content, we have to conduct 2 steps: the Content Inventory and Content Audit. These steps will help us develop a strategy and improve our digital content.
Content Inventory
Judging from the website itself, we realise that there was two navigation bar and that there were many links. However, once we started creating our inventory, we realise some of the links are duplicated and that SRC has made the second navigation meant more for customers and the first navigation for corporate use.
Content Audit
We soon realise many links was unnecessary. For example the duplicated links, the microsite and also the News & Stories. So we did our Content Audit to assess, examine and evaluate the content listed in our inventory. There were a total of 14 sections and we had to try and bring down as much as we could but keeping in mind to still provide all the essential content for our users.
We evaluated each link according to industry best practices. We appointed each link with 3 different statuses but we realise we needed one more besides “Keep”, “Update” and “Remove”. We decided to add in one more status called “Combine”. This means that the page would be updated as well as moved to a parent page.
Overall, most of the links are to be “Updated” or “Combined” due to the layout of the pages. Some of the pages will be removed due to duplication or old content that is irrelevant to date.
Content Framing
Based on our findings and statuses, we continued with Content Framing. This method helps us to look at the hierarchy before we incorporate the real content.
Structure Plane
Based on the 5 dimensions of the interactive design (Words, action, time, space and objects), we were able to highlight the issues faced with the current website and what we can do to make it more functional and user friendly.
Visual Representation
The first impression of SRC’s landing page is extremely cluttered, and way too much information. As a user, I would be confused as to where my first focal point should be. Banners are mostly in red and the CTA (call to action) buttons are in red colour as well. There is no contrast between the two and as such, it’s hard to differentiate between the CTA and the banner.
Behaviour
Looking at the circled areas in blue above, there are similar CTA buttons on the same page, leading to the same link. Too many CTA buttons leading to the same page is unnecessary and in turn, also confuses the user.
Words
User stories are important to help users understand, feel empathy and also have compassion towards the SRC’s recipients. It is an important implementation of a website that focuses on doing good for the community because it allows the user to understand where their funds are going towards. However, it is also important to ensure that the headlines are concise and the content is engaging. It is also important that the user interface is presented in a way that is user-friendly and not “buggy” like the example on the current SRC homepage.
Physical Space
The physical space is where a user interacts with the site. As you can see in the image below, this is the main landing page which was supposed to allow youth volunteers to sign up. However, the page is under maintenance. This will greatly deter any youth volunteers who were keen to sign up/know more about the SRC via this portal.
Solution
Our solution is to propose a new layout for the Singapore Red Cross website that is functional as well as user-friendly. We intend to change and do away with many repeated buttons so that the user will not be confused. The website should also be less wordy as compared to the current site and also more pleasing aesthetically to the eye.
- Do away with repeated tabs and buttons on the homepage
- Incorporate more pictures and cut down on the number of words
- Clearer information architecture (currently too many tabs)
- More pronounced call to action buttons
Interaction Design
On the right is a low fidelity wireframe of the homepage that we came up with as compared to the current site which is on the left. You can tell that we did away with the two navigational bars at the top and only had one main navigational bar which has a proposed 5–6 tabs.
We also reorganised the flow and structure of the content to ensure that the user would be able to understand the site better. Important campaigns can be placed at the first scrollable carousel banner where the user would be able to interact with it by clicking on a specific button to know more about the campaign.
We also shifted the social media icons to the bottom of the page for consistency. User stories and experiences can be incorporated at the bottom carousel banner so that users can click into those specific landing pages if they choose to.
We think that users should be able to get the information they require through the SRC website and also have an enjoyable experience at the same time. With these changes that we intend to implement, we are certain that it will change the way the user interacts with SRC’s website as a whole.
Information Architecture & Card Sorting
Information architecture interprets how the content will be structured when users interact with the website. This allows us to prioritise more important content which will allow the users of the site to navigate more efficiently.
In a hybrid card sort, you create pre-defined categories and allow participants to create their own as well. It’s a perfect mix of both open and closed (hence the name ‘hybrid’). By using this card sorting method, we were able to gain insights on users think, understand and view, categories as well as label content.
After card sorting, we made the following decisions:
- Categorise it base on the top 5 menu
- Home to have a glimpse of each menu page
- Less corporate information and more User-focused
- Remove Articles or Past Reports that are irrelevant
- Remove duplicates links
Conclusion
All in all, using The 5 Elements of UX and the Lean UX Method was an eye-opening experience because it actually saves us more time and having to start with ‘assumptions only’ was an interesting way to do research. This just proves that there are many research ways to justify our concepts or ideas.
The whole process was quite challenging but having to do it in pairs allowed us to share our views and skillset. We both learned a lot about our client as well, the Singapore Red Cross. SRC is more than just a blood donation charity and it is about time for SRC’s users to be even more aware.
We are both very excited to continue the journey of The 5 Elements of UX. The next planes that we would be covering are the ‘Skeleton’ and ‘Structure’ planes and still using the Lean UX methodology to design a solution for our client.
