BPJSTK
Employee Social Security System
BPJS Ketenagakerjaan is a Government legal body in Indonesia that was established in 1947 to protect all employers with social security programs.
The problem: The BPJSTK website provides various services for their users. However, users found it hard to search and access their desired service from the website because each one had its own separate landing page.
When the BPJSTK team approached us for our design expertise, they had a primary focus in mind -- to improve the usability and simplify the user experience of the web platform.
BPJSTK
Mobile (Responsive) Website
BPJamsostek website offers a variety of services and important information, such as pension plans, employee registration, monthly insurance bill payments etc. However users found it hard to find and access their desired service from the website because each one had its own separate landing page.
Ideally, BPJSTK’s website should provide ease of use and clear information since they are the largest government social service body and it’s mandatory for every Indonesian company to enroll their employees in their program plans. However, the outdated design style and the content heirarchy makes it difficult for the user to understand the information and navigate around the website.
The website contains heavy textual information that makes it difficult to comprehend and overwhelms the user. The use of visual elements and layout design has turned out to be more of a distraction throughout the website’s user experience.
To map out all the contents of the website, understanding what kind of services BPJSTK provides, and which user flow would be the most effective. By doing so, we will be able to provide the user with the information they’re looking for on the website.
Provide clarity and a seamless experience for users to access the services offered by BPJSTK. Maximize the website’s usage in order to minimize the number of users that come in to branch offices for onboarding and customer support.
Simple and effective use of visual elements could help the user understand the website’s contents. A consistent design system would be required so that a clean layout is maintained across the website and the information displayed doesn’t seem overwhelming for the user.
To start the design process, we mapped out the website’s content on a macro level to understand all the available services offered by BPJS by creating the website’s information architecture. This aims to ease the user’s search process by streamlining the offerings and making them clearly accessible amidst the abundant information that the website provides.
Based on the Information Architecture, we were able to visualize BPJSTK’s services by displaying all categories right from the landing page and the easy access navigation bar. This way, the user is able to quickly find the services that are suitable for their needs so that they can navigate across the website with ease, staying focused on one task at a time. We provided a seamless flow between pages in order to maintain comfortable access across all devices.
The next step after we figured out a seamless flow across the website, was to communicate all the relevant information in an straightforward yet friendly manner. Our goal was to offer a pleasant, no-hassle experience for the user. Thus, we created a clean and simple design that feels warm, welcoming and intuitive, while maintaining BPJS’ strong brand identity.
We composed information and service categories through a friendly approach to our design. Using simple icons and illustrations we were able to show empathy towards the user while effectively helping them to understand the information more easily.
Wordy pages can be overwhelming, however, it can’t be helped since it’s all very relevant information. We used dropdowns to maintain a clean layout which also makes it easy for the user to find the relevant information they are looking for.
We composed information and service categories through a friendly approach to our design. Using simple icons and illustrations we were able to show empathy towards the user while effectively helping them to understand the information more easily.
Wordy pages can be overwhelming, however, it can’t be helped since it’s all very relevant information. We used dropdowns to maintain a clean layout which also makes it easy for the user to find the relevant information they are looking for.
In addition to having a structured and clean layout, we created illustrations to represent certain categories of information. These assets aim to help the user recognize complex information quickly.
As the website scales, the design would need to scale as well. There might be other designers in the future who may work on additional features or new pages. Keeping that in mind, we established a design system that will help future teams maintain a consistent user interface.
