UX Case Study: Singapore Children's Society Responsive Redesign

ux/ui

Singapore Children's Society Responsive Redesign was a case study that involved design process including content auditing, card-sorting, tree-testing to redesign the Information Architecture (IA) and key pages wireframes of the website and mobile app.

Singapore Children's Society Responsive Redesign prototype
Singapore Children's Society Responsive Redesign prototype was created using Axure with four members in 11 days

Understand Children's Society

“Singapore Children’s Society protects and nurtures children and youth of all races and religions. In 2018, the Society reached out to 78,433 children, youth and families in need. Established in 1952, its services have evolved to meet the changing needs of children.”

Identifying potential Target Audience of website

We first identified the target audience for Children's Society website — potential donors, potential volunteers and general site visitors. Then we conducted user research and contextual inquiry to understand the motivations and concerns when making a donation or signing up as volunteer through the existing website.

Defining the Problem

Based on our Affinity Map insights, we realised that:

Key Insights
Key Insights

Competitor Analysis Insights

After gathering the insights, we crafted our personas and made changes to the user flows for donor and volunteer. Based on our Competitor Analysis, we had 4 key findings based on their needs and frustrations,

Touch allows user to select cause to contribute with few steps to make payment.
Unicef has clear transparency and accountability of their money contribution.
Touch clearly shows all available volunteer roles and requirements on one page.
Touch shows the impact of their contributions or volunteer on a dedicated page.

Organising the Site Structure

As the website sitemap is rather extensive, we had to conduct open card sorting with 17 participants to observe how users group the website information. We faced some confusion over certain category of the website and had to perform tree testing. With the information clarified, we finalised our sitemap and user flows for donors and volunteers before working on the prototype wireframes.

Revised Sitemap
Revised Sitemap

Final Wireframes done in Axure

The redesign provide users with clear and concise information, highlighting transparency within the organisation and clarity of programs which help potential donors or volunteers make an informed decision for their contributions.

Wireframe features
Wireframe features

Design Iterations

From usability tests, not only did we shifted content hierarchy, we decided to add more interaction to the buttons to better inform our users about their actions to indicate their progress. For carousel cards, most users are expecting to see arrow buttons to see more cards. Hence, we added the buttons in.

Design Iterations
Design Iterations
Design Iterations
Design Iterations
Axure Interactive Prototype for Website
Axure Interactive Prototype for Mobile