Simplifying the Simplistic Website Part 1
I saw an interesting website made by the Indonesian government (I think) for checking hospital bed availability for covid19 patients. It is a really useful website especially since hospital beds are currently hard to find, especially in Jakarta. It has all the needed components of a website, with a process for finding a specifically available hospital bed as shown in the image below from what I have surveyed.
We can see that the process is really long and takes a huge amount of time. As the data is shown in the form of a table in figure 2 below. Even though there is a search function, it only sorts out keywords such as the area of the hospital or the hospital name. Therefore, it is very limited especially if users want to immediately find available hospital bed with a specific type (ex. ICU or PICU for covid19) and this can be frustrating. Even though the user uses the search function, they will still have to read line by line for the specific hospital bed type that they are looking for which can take several iterations. The number of steps taken varies and is very unpredictable.
Suppose we find what we need on the second line, using the method where we manually read the lines, it will take roughly 6 steps. And if we use the search method with the same case assuming the system found a match on the first try, it takes 10 steps. This is ineffective and can be done better in fewer steps.
This is why a better solution needs to be found and it is a simple one. By implementing a more advanced filter and changing the table system, we can eliminate a lot of unnecessary steps. The first is to analyze the website pages as a whole. Other than the one in figure 2, there is another page that recaps the whole bed availability types, shown below.
We can see that the page’s only function is to recap all of the bed types and show the percentage of them. However, shouldn’t there be another function for it? I think it is possible. How about we use those cards to make it possible for users to access available hospitals filtered to the type of card which they pressed? Or how about a filter? Most importantly, why is the search function only available on one web page but not the rest? And so, is it possible to just delete the webpage that includes the table? Here’s what I come up with by using the GOMS method which is a cognitive modeling technique used in HCI research;
We can see that the steps decrease from more than a minimum of six to a total of 3 steps. Here we assume that users don’t need to read line by line just to find what they need, and will be directed to what they are searching. As a result, the system is simplified.
Another issue with the original website is that the cards on the ‘Rekap Ketersediaan Bed’ don’t have any functionality and are useless. Another issue is that because all of the cards have the same color and people would need to read each card to find what they need is just inconvenient. As a solution, I come with the idea to use the cards to immediately direct the users to the hospitals with the details on the card. This is useful for users who are lazy in using the search engine of the site.
As we can see on the image above, it is seen that it is now easier to understand. The color represents a bed type, and there is a button to direct the user to the hospitals filtered based on the card. The filter button is put on the right side of the navigation bar that can open and close. When the user first enters the site the filter will be open and they can close it if they’d like. You can try out the UX here.
Above is a side-by-side comparison. We can see that it is slightly different in design though it still tries to keep the original design. Though the grouping sort of the bed types is the same, they are also color-coded to make it easier for users to see and differentiate.
And that ends the first part of the project. I hope you enjoy the project as much as I do :)
