CPF homepage redesign
Who I work with
PM, UX researcher, content strategist, product owner, engineer, vendors
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.
UX and UI designer
7 / 2019 - 3 / 2020 (8 months)
Transform the current CPF homepage into a more intuitive and user-centered service for all CPF users.
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:
More service-oriented, less lively style
UI and component doesn't reflect modern design practices
The website is difficult to navigate, making it difficult for users to find to what they're searching for
Understand users’ need:
We interviewed 60 CPF members of different age range. Afterwards, we came out with the 6 personas for design ideations.
(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.
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.
(Singapore Digital Service Standard)
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.
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.
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.
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.
1. Before typing the year
3. Select the second filter
2. Select the first filter
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.
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.
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.
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