top of page

CPF homepage redesign

About 

Who I work with

PM, UX researcher, content strategist, product owner, engineer, vendors

Impact

It will be launched in 2022 and used by all CPF members and employers.

All Singapore and permanent resident use this website to have a better retirement life.

My role 

UX and UI designer

Project length

7 / 2019 - 3 / 2020 (8 months)

Goal

Transform the current CPF homepage into a more intuitive and user-centered service for all CPF users.

Problem

CPF is a comprehensive savings and pension plan for working Singaporeans and permanent residents primarily to fund their retirement, healthcare, and housing needs in Singapore. The goal is to make dense and complex CPF content easy and straightforward for users to understand

​

The current website:

1

More service-oriented, less lively style

2

UI and component doesn't reflect modern design practices

3

The website is difficult to navigate, making it difficult for users to find to what they're searching for

Screenshot 2020-12-11 at 3.04.04 PM.png
Screenshot 2020-12-11 at 3.18.17 PM.png

(Old CPF homepage)

Plan

Understand users’ need:

We interviewed 60 CPF members of different age range. Afterwards, we came out with the 6 personas for design ideations.

Screenshot 2020-12-11 at 3.29.47 PM.png

(Interview picture)

Screenshot 2020-12-11 at 3.32.53 PM.png

(Concept development)

Screenshot 2020-12-07 at 8.48.27 PM.png

(Persona developed )

Understand users’ behaviour:

Checking CPF's current website's Google Analytics data showed that most users will go to the homepage to use the common service and calculator tool as the first entry point from the landing page. Also from the interview, we understood that users usually have a specific task in mind to complete.

Solution

Apply DSS rule and apply WCAG rule to make it more accessible to all users. And follow the mobile-first principle while designing the mobile web.

DSS Checklist - Page Level.jpg

(Singapore Digital Service Standard)

WCAG Checklist - Page Level.jpg

(WCAG accessibility)

Apply design principle:

​

  • Keep it relevant: Prioritise the information which is relevant to users.
    Keep the relevant content together, so it's easier for users to find.

  • Help users focus: Highlight the key information, so users can focus on what they need.
    The same colour for the action buttons, and card components help users focus on the content inside

  • Be forthcoming: Allow users to make easier choices and control how they interact with a website.
    The calculator tool helps them engage with the website and understand the result of the different plans for their profile.

  • Keep it simple: Present the information in an easy to understand manner.
    Storytelling style for content makes it easy for users to digest.

Solution

Illustration oriented

Apply illustration to the website to show the brand value; its storytelling helps users understand it. The style becomes young and interactive with users. A hero image with illustration conveys the brand value so users will engage with us.

Prioritised content

The content will be three part to help users focus on and digest the content according to priority.
The primary content shows brand value and lets users use filter search to find what they need for task oriented purposes.

The secondary content introduces the main scheme to users, so users can keep exploring more about CPF.
The tertiary content shows additional information to users like recommended reading and the latest news. 

Homepage (Default).jpg

Primary

Secondary

Homepage (Default).jpg

Tertiary

Personalisation global search

Users like content relevant to them. With the personalised filter they will see search results based on their needs.

We apply the design principle: keep it relevant.

Homepage (Default).jpg

1. Before typing the year

Screenshot 2020-12-11 at 5.39.28 PM.png

3. Select the second filter

Screenshot 2020-12-11 at 5.42.27 PM.png

2. Select the first filter

Screenshot 2020-12-11 at 5.39.36 PM.png
Screenshot 2020-12-11 at 5.39.36 PM.png

4. Listing down relevant search results helps users to discover their need efficiency.

Experiment calculator tool 

​

This part introduces the 3 main CPF schemes, they can use the tab to easily switch to different schemes. With a calculator tool, users can understand the scheme more by trying different numbers, and make a more informed decision on the right plan. 

 

Apply the design principle "be forthcoming" so users can better interact and digest.

Homepage (Default).jpg

Challenge

How should we define the keywords in the dropdown list in filter search, making sure the choices fit users' needs to search the information without unnecessarily limiting them. The next step: reduce the filter and do a usability test for design iteration.

Results 

After a usability test with 20 CPF members, users are satisfied with the new homepage. They think it has a more modern style and it's convenient to find the information with the filter. With the calculator, it's easier to understand different plans and results. Overall, users think the redesigned version is more engaging and personalised.

Lessons learned

Since it's a Government website, I learned a lot from designing a website with DSS rules and WCAG accessibility. I also learned a lot from transferring the user's need into innovative ideas. For example, designing the page with a calculator upfront makes it more straightforward for users to understand the scheme.

I joined the project from the start , all the way through interview of users and usability test stage with vendors. I learned how to cooperate with designers from vendors and manage the work for them. I enjoyed collecting user's needs and transforming an old website into a young and innovative one

Mobile web_homepage prototype

bottom of page