Learning is a lot of friction. This week’s learnings are around designing around dense information, ego management, and mobile accordions.
Designing Around Dense Information:
We wanted a user-friendly way to present dense information within a healthcare application, particularly for lengthy forms. Diagnosis and treatment of diseases like Tuberculosis, for example, can add up to a lot of form fields that health workers have to fill up from their phones.
Some observations:
- Users didn’t mind scrolling through long forms, as long as the information was logically categorized into sections.
- Dropdowns are bittersweet: They pack dense information into a compact space, keeping the UI clean. But in most cases, when there are fewer than 7 options, displaying information directly via radio buttons was faster because of immediate visibility.
- Mobile accordions are tricky: It wasn’t always clear that users have to click into an accordion and access its contents. Fortunately, the GOV UK Design System team has some interesting research around accordions.
Approving design decisions
For a while, we didn’t have a clear approval process for designs before they went into production. The initial accordion design that went to production came back for a copy review. But during this process, there was additional feedback on the design that could improve the original design significantly. But the engineers had already built the component and were waiting for just one copy change. As a way to avoid this in the future, the Product Manager proposed implementing a clear approval process for designs. All designs would be shared on Slack and receive and final go ahead before moving to production. In retrospect, I think it was the right decision. But my initial reaction was mixed. “Did they not trust my abilities?” “Am I not a good enough designer?” “Are they blaming me?”. I’m okay now. And I feel it’s okay to have mixed emotions, especially when facing issues that touch on competence and autonomy.
Accordion Design in Mobile:
Our initial inspiration came from GOV UK Design System, which we then tried to improve on. Mainly in the following areas:
- We tried to remove the “Show/Hide” text so the screen looked less busy. Instead, we tried adding a light blue background to the accordion title section with the title in link blue text.
- The light blue background was so the entire accordion looked clickable and not just the “Show/Hide” text. When there are multiple accordions, the light blue background, also indicated which accordion is selected and which ones are tappable.
