UX teardown, Design refresh, Booth design
Project context
Triaging and registering for a medical appointment can be a time-consuming process when Singapore Armed Forces (SAF) men visit their medical centers. To streamline this process, the navy concepted an Automated Naval Medical Booth (ANMB) to replace the manual triaging and registration process with a self-service digital booth. The project lead was however unimpressed by the vendors’ designs for the interfaces. As such, they had reached out to the inhouse UX team to refresh the UI.
Details
Role: In-house UI designer (team of 3) of DSTA
Skills focus: UX teardown, Personas, Simple branding (with a UI Kit design), Wireframing, Prototyping, Booth design
Timeframe: March - April 2021
User journey mapping,
personas
Our team had come in after discovery research was done by the project team. As such, by consolidating what the project team shared, we created user journey maps and personas of what we understood from the research done.
As we discerned from the project team, the two main problem statements ANMB wanted to solve for were:
1. Unwell servicemen/women need a way to register and complete triage quickly because they are not comfortable staying at the medical center when unwell and would like to rest.
2. Healthy servicemen/women need a way to register and complete triage quickly because the medical screening could be in the way of their work or preventing them from going home.
Design principles
The team was fortunately given the opportunity to propose a new brand style guide for this project. Now that we've understood the context of ANMB, the team set a couple of design principles that we’d like to abide by to help our users better within the medical environment.
1. Efficiency: Getting users to their goal by designing the appropriate number of clicks
2. Guide the way: Always clearly explain each step and ensure users understand the next steps. Where possible, provide the information for them instead of having users input the details.
3. Accessibility: Designing for everyone, especially those who are not in the pink of health.
4. Keeping the user at ease: Having a more comfortable experience through maintaining a friendly personality for instance.
Main decision points for changes
From the screens we received, the team did a UX teardown to analyse where the experience could be improved. With the issues in mind, the team redesigned the interface for the entire experience. Overall, the look and feel of the interface felt cluttered and inconsistent. According to our design principles, the team wanted to design new interfaces to reduce clutter, thus avoiding overwhelming the user who is likely already in pain.
Upon closer analysis, we also uncovered the following key points to change:
*Due to confidentiality, the original screens cannot be shown. As such, some of the 'original screens' below are sketch samples of how it looked like
1. Orientation
The vendors had designed for a portrait interface. However, as the team examined the physical booth setup and considering that users are most likely seated when interacting with the screen, the top half of a portrait screen may prove difficult to tap.
Our suggestion: Thus, we suggested a landscape orientation instead, since screen elements would be easier to reach while seated.
2. Navigation
Previously, there was no navigation option; the registration process is very linear. While this could be good, in the event where users make errors in their data entry, they would have to exit and restart the whole process.
Our suggestion: Have an interactable navigation bar that also doubles up to show progress. The global navigation allows users to correct their input errors.
3. Overall flow
The original design had users input first their reason for visit, then triage, then asked additional questions about the user.
Our suggestion: Have the user complete all admin questions first, before conducting triage. This accommodates for the future where additional questions may be added to the admin flow.
In the original design, the team felt that there was noconsistent brand guiding the design. As such, we created our own simple styleguide and UI kit to guide the process before redesigning the screens. The key pointers were to design something pleasing, and as minimal as possible to reduce cognitive overload.
*Due to confidentiality, the original screens cannot be shown. As such, some of the 'original screens' below are sketch samples of how it looked like
The team then synced up and aligned with the vendors who originally designed this system. Both design teams then thrashed out each others rationales for making amends and the final design was eventually sent off for development, with the blessing of the project manager.
