top of page
Singapore government website
My role
UX and UI designer
Who I work with
PM, UX researcher, content strategist, product owner, engineer, vendors
Timeline
7 / 2019 - 3 / 2020 (8 months)
Impact
About
All Singapore and permanent resident use this website to have a better retirement life.
It will be launched in 2022 and used by all CPF members and employers.
Goal
Transform the current CPF homepage into a more intuitive and user-centered service for all CPF users.
OVERVIEW
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
(Old CPF homepage)
.jpg)
(New CPF homepage)
RESEARCH
Understand users’ need:
We interviewed 60 CPF members of different age range. Afterwards, we came out with the 6 personas for design ideations.
RESEARCH
(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.
SOLUTION
(Singapore Digital Service Standard)
(WCAG accessibility)
Apply design principle:
-
Keep it relevant: Prioritise the information which is relevant to users.
-
Help users focus: Highlight the key information, so users can focus on what they need.
-
Be forthcoming: Allow users to make easier choices and control how they interact with a website.
-
Keep it simple: Present the information in an easy to understand manner.
Design
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.
Design
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.
.jpg)
Primary
Secondary
.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.
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.
.jpg)
CPF homepage website prototype
Challenge
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