This project is a proposed website redesign for Central Provident Fund (CPF). The goal is to identify potential usability issues with the existing website and develop design solutions to implement for the next iteration of the design.
The CPF’s mission is “to enable Singaporeans to have a secure retirement, through lifelong income, healthcare financing and home financing”.
However, most of the interviewees whom we spoke to during our user research interviews shared that when accessing the existing CPF website, they are overwhelmed by the large amount of jargon-filled text and cluttered interface, making their experience of finding information on a scheme or performing a transaction a tedious and laborious one.
We decided to redesign the existing CPF website to solve this problem.
Working within a 2 week timeline, and as the Project Manager specialising in user research and usability testing, my team and I worked together to deliver a redesign of the existing CPF website.
To redesign the CPF website, so that users from all walks of life can navigate the website intuitively, to discover the various schemes and available services and have clear and direct access to these information. This in turn will enable users to perform transactions confidently and efficiently and to make informed decisions while planning for their future.
The Design Process
Our design approach focuses on an iterative process, that involves the research and synthesise phases where we aim to discover, define and understand users’ needs, behaviour and issues that they are facing, before proceeding to ideate, prototype and test our design solutions intended to address the problem that users’ face.
To better understand the industry landscape, we analysed four websites – that of related government agencies and a bank – Inland Revenue Authority of Singapore (IRAS), MySkillsFuture, HealthHub and POSB. From our competitive and comparative analyses of these four websites, we learned that it is important to:
- Find the balance with including key information and visuals so as to effectively attract and retain users attention
- Provide users with a clear overview of available schemes and services by including clear and concise categories within the global and sub navigation
- Include clear and well-positioned call-to-action buttons for users to perform the necessary actions
- Include the use of infographics or simple and relatable icons to break up chunks of text when communicating key information across to users
- Include accessibility features such as providing users with the option to increase or decrease font size, among others
- Have a Live Chat feature for users to be able to contact the customer service directly and promptly should the need arise
To validate our assumptions, we conducted 15 interviews with existing users of the current CPF website, ranging from young adults to retirees, to understand their goals, behaviours and needs when using the website. These were our main insights gleaned from the user interviews.
Based on the insights from the user research, we developed three personas that reflect the behaviour and needs of users that access the CPF website.
Users needs a direct & 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.
By reorganising CPF’s information architecture in a more systematic manner and providing visual representation of information, users will be able to find what they need accurately and understand key information at a glance. We will know this to be true when we see users have lesser errors & touch points.
We then conducted an activity with 26 participants where they sorted virtual cards containing our website contents and this helped us to understand how they would organise the content.
We observed that users sorted by purpose and topics, and despite the range of contents, users were able to make sense and associate information and tools of same topic.
As such, based on the insights from this activity, we decide to combine information and tools when necessary and have multiple ways for users to find what they need. In addition, we split Services into Appointment, Payment & Applications as subcategories for clearer indication.
We kickstarted the ideation process by conducting a design studio session among the team. We sketched our ideas, critiqued and then combined the best ideas into one concept.
The Design Evolution
Brand Colour and Typography
Key Design Considerations
- Clear & concise global navigation helps users to understand the structure
- Quick view items give users direct access to key functions
- Categorising large chunks of information into more digestible pieces helps users to make sense of the content in the website
- Use colours to emphasise call-to-action buttons where users can act on the information they have learned about the various schemes
- Typography helps to create visual hierarchy which directs users attention to key information
- Accessibility options include changing of text size enables website to cater to a wider range of users
We conducted two rounds of Usability Test on both the low-fidelity and high-fidelity versions of our prototype with 5 participants for each round.
We conducted our first round of Usability Test on our Low-Fidelity prototype with 5 participants with the aim of observing the different ways users navigate through the website to search for information and complete tasks.
Users liked that the prototype shortened processes, kept them simple and easy to understand, gave users a clear view of key information at a glance and on a whole, the prototype had a clean and minimal look, and was not too content-heavy.
However, we noticed that 3/5 users did not click on the correct category “Application” when they needed to apply for a monthly property repayment. This was due to the fact that the difference between the categories “Payment & Top-Up” and “Application” may not have been so clear and straightforward for certain tasks. As such, we combined both categories into a generic “Services” category in the primary navigation bar and add a secondary navigation bar.
We also found that 3/5 users did not choose the correct option “Use CPF for my property” and chose “Pay housing loan” instead, when completing one of the tasks. This could be because the options were too similar and users were unclear on what each option meant. As such, we rephrased the options to descriptive sentences that provided more context for the users.
Based on the feedback received from users following the first Usability Test, we reiterated our design, incorporating colours and typography elements, and developed a High-Fidelity prototype, which we then tested during our second round of Usability Testing.
Users who participated in the second round of Usability Testing felt that icons helped them relate to the information better without the addition of more words, and appreciated the choice of simple colours that came across as professional and provided good contrast to highlight key information and call-to-action buttons.
From the second round of Usability Testing, we found that 3/5 users took a longer time to notice the categories in the global navigation as compared to the row of quick links. This was because 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. As such, we reduced the size of the quick links elements in relation to the global navigation.
Also, 3/5 users did not click on the ‘Services’ category (in the global navigation) directly when they needed to perform a transaction. This was because 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. As such, we provided users with an interconnected navigation structure so they are able to access all the various functions from different pages.
Reiterated High-Fidelity Prototype
Conclusion and Next Steps
With the redesigned CPF website, users are able to access the key information that they need more directly as there are lesser steps needed to navigate through the website. Clearly organised information also enables them to understand the various schemes better and perform their transactions confidently.
As users’ needs continue to evolve, we will continue to iterate and improve the design, and explore the implementation of official local language options to cater to users’ who may be more comfortable using their mother tongue. We are also working on developing a mobile version for the website to cater to users’ who may wish to access the website to perform transactions while on-the-go.
Special Thanks to Team members:
Yu She – UX/UI Designer
Yuan Shan – UX/UI Designer
Lahari – UX/UI Designer