The Central Provident Fund (CPF) is a comprehensive social security system that enables working Singapore Citizens and Permanent Residents to set aside funds for retirement. It also addresses healthcare, homeownership, family protection, and asset enhancement.
Our team which consisted of 4 team members (a Project Manager, an UX researcher, an UI/UX Designer & an Usability Tester), were tasked with the redesign of the current CPF website. We identified user needs and came up with a comprehensive solution through extensive research and usability findings.

Project Goal

The current CPF website is hard to navigate, content heavy and filled with technical jargon. Our goal is to validate our hypothesis through user research and come up with a solution. We want to redesign the website to ensure that users from all walks of life can easily navigate the interface to perform the necessary transactions.
MY ROLE
UI/UX Designer
PROJECT TIMELINE
2 Weeks
PLATFORM
Website & Mobile
USER RESEARCH

Overview

We interviewed 15 users from a wide demographic to understand their behaviour, their process of performing the tasks & goals, and their frustrations.

Key User Insights Summary

Complex Copy
The users were overwhelmed with a large amount of technical information and jargon in the current website.
Unclear Layout
The users were also confused with the website layout and information architecture. It was difficult for them to locate the information they were looking for and felt lost.
Inconvenient Navigation
The users wanted easier navigation and convenience while using the site. They also wanted visuals to help understand the complex content present on the website.

Meet Our Personas

DEFINE

The Problem

Users of CPF need a straightforward way to access their account information and complete tasks confidently and efficiently because they do not want to waste time making sense of schemes and services.

The Solution

By reorganizing CPF's information architecture in a systematic manner and providing visual representations of information, the users will be able to find what they need accurately and understand key information at a glance.

RESEARCH & ANALYSIS

The Benchmark

WHAT WORKS
Provides users with a quick summary of options that they can do e.g. "My Activities”. Clear and simple global navigation.

WHAT DOESN'T WORK
The homepage was cluttered and packed with an overwhelming amount of content.
WHAT WORKS
Clear and well-positioned call-to-action button e.g. ‘Learn’ button. An accessibility feature for elderly users to increase or decrease font size is useful. Visually pleasing infographics are effective in communicating key information to users.
‍
WHAT DOESN'T WORK
The positioning of website navigation is ‘reversed’, for it is located where a footer is usually found.  The items in the Global Navigation are not prominent enough. There is a button above the global navigation which is confusing and repetitive. The filter icon is not recognisable.
WHAT WORKS
Clear and well-positioned call-to-action button e.g. ‘Learn’ button. An accessibility feature for elderly users to increase or decrease font size is useful. Visually pleasing infographics are effective in communicating key information to users.
‍
WHAT DOESN'T WORK
The positioning of website navigation is ‘reversed’, for it is located where a footer is usually found.  The items in the Global Navigation are not prominent enough. There is a button above the global navigation which is confusing and repetitive. The filter icon is not recognisable.
RESEARCH & ANALYSIS

Best-In-Class

From our research, we concluded that POSB was the best-in-class. Many of our users mentioned POSB as a website that they frequented and enjoyed the most.

POSTIVES
Clear & concise categories in global & sub navigation bar to have an overview of available services & information.
Clear content sections.
Asks for feedback on post & encourage download on mobile app by providing a direct link (especially useful for those who prefer to use mobile) .
IDEATION

Sketches

We wanted to redesign the website that was stripped off of complicated jargon, provide clarity to the users, present relevant information at a glance, and save time for the users. We did a design studio session as a team to come up with multiple solutions and together we created a baseline design.
IDEATION

Lo-Fi Designs

We took our final sketch and created lo-fi wireframes to test our proposed design solution. We performed our first round of testing to make sure usability is ensured before further design and determine the best solution for the end-users.
VIEW PROTOTYPE
TESTING

Usability Testing 1

We conducted a round of usability testing on wireframes to identify key issues in navigation and functionality & validating our ideas while explore multiple possible experiences.

Positives

Short and simple processes that are easy to understand
A clear view of key information at a glance
Clean and minimal look, not too content-heavy

Usability Issue 1

3/5
users did not click on the correct category “Application” when they needed to apply for a monthly property repayment
ANALYSIS
The difference between the categories “Payment & Top-Up” and “Application” may not be so clear and straightforward for certain tasks
RECOMMENDATION
Combine both categories into a generic “Services” category in the primary navigation bar and add a secondary navigation bar

Usability Issue 2

3/5
users did not choose the correct option “Use CPF for my property” and chose“Pay housing loan” instead
ANALYSIS
The options were too similar and users were unclear on what each option meant
RECOMMENDATION
Rephrase the options to descriptive sentences that provides more context

Usability Issue 3

3/5
users did not opt for the live chat shortcut function when they faced an issue and needed help
ANALYSIS
Users prefer to try to resolve their problem on their own first before using the live chat function and the shortcut was not prominent enough
RECOMMENDATION
Provide a generic help shortcut that has additional help options other than the live chat, such as FAQs, email and a help forum
IDEATION

Key Design Considerations

Following the first round of UT, we compiled the user feedbacks to device a better solution that addressed all the issues of the lo-fi prototype. We were careful to address the needs & goals of our personas - Instant Ivan, Simple Savita & Curious Cahya in our design evolution from lo-fi to hi-fi designs.

01

Clear & concise global navigation helps users to understand the structure

02

Quick view items give users direct access to key functions

03

Categorising large chunks of information into more digestible pieces helps users to make sense of the content in the website

04

Use colours to emphasise call-to-action buttons where users can act on the information they have learned about the various schemes

05

Typography helps to create visual hierarchy which directs users attention to key information

06

Accessibility options include changing of text size enables website to cater to a wider range of users
IDEATION

Initial Hi-Fi Designs

The key consideration while creating the hi-fi designs was to ensure that the brand voice of CPF - Clarity, Consideration & Authenticity resonated across the board. Our designs goals were to ensure visibility and jargon-free content in a consistent & minimalistic interface that was both flexible & efficient.

We chose to keep the existing brand colours to leverage on the CPF Brand recognition and user familiarity. The colour green is also associated with vitality, fresh growth, and wealth, new life and milestones. In CPF's case, using CPF to buy a property, cashing out on retirement fund and investing for the future marked significant phases in a person's life. Therefore, we chose a colour scheme that reflected new growth & wealth.

We chose a font that would work well for CPF's various typographic needs over time across mediums. Source Sans Pro is Sans Serif type family that includes a variety of weights, styles, and variants like ligatures. It is a typeface that works well in user interfaces and in print media.
VIEW PROTOTYPE
TESTING

Final Usability Testing

We put our hi-fi prototype to the test with a second round of testing to ensure that our users's needs were met.

Positives

Icons helps users to relate to the information better without adding more words
Choice of simple colours looked professional and had good contrast
Generic help shortcut was more useful and effective

"(this prototype) is less congested than the existing CPF website... have the right options I need laid out so I don’t have to manoeuvre through the website...”

Usability Issue 1

3/5
users took a longer time to notice the categories in the global navigation as compared to the row of quick links
ANALYSIS
There was no clear visual hierarchy between the global navigation and quick links hence users did not know what to prioritise viewing on the homepage
RECOMMENDATION
Combine both categories into a generic “Services” category in the primary navigation bar and add a secondary navigation bar

Usability Issue 2

3/5
users did not click on the ‘Services’ category directly when they needed to perform a transaction
ANALYSIS
Users have the idea that ‘Learn’ and ‘Services’ should work hand in hand but they have different ways of performing transactions which in turn impacts their order of viewing these categories
RECOMMENDATION
Provide users with a interconnected navigation structure so they are able to access all the various functions from different pages

Other Issues

The terms used for certain housing applications were slightly ambiguous
Phrasing used in the sidebar was not consistent with the page titles
Suggested repayment amount was mistaken as a fixed amount
‍Offer multiple language options
We took the feedback from our users and iterated to create the final hi-fi version of the CPF website. We also created responsive designs.

CPF Website Redesign

VIEW PROTOTYPE

SUS Score

Next Steps

Explore possibility of implementing official local language options.
Explore other accessibility features.
Conduct further usability testing to validate our iteration.

Key Takeaways

As a UI/UX designer, I applied my creativity, analytical skills and my love for providing a good experience to the end-users in this project.  In doing so, I learnt a lot and was able to grow as a designer and that growth was reflected in my iterated design.

The biggest lesson was that not all users will behave in the way we expect them to and it was interesting to observe how users performed the exact same task in different ways. I also learnt to communicate my ideas and thoughts better to my team and got valuable takeaways from each person in the team.