The UI evolution of the CHT

Over the past year we’ve been making incremental UI updates to the CHT to be more scalable, intuitive, mobile-first and consistent with other Android experiences by aligning more closely with Material Design.

Summary of the evolution:

Filters (3.17.0)

The first step of our UI evolution updated filters from icon dropdowns to an expandable drawer to simplify the experience by providing clearer labels and allowing for better scalability.

Search (3.17.0)

Secondly, we updated our search feature to be expandable to free up real estate in the top bar, collapsing the current bar into an icon that opens when tapped.

Floating Action Button (4.2.0)

We then updated the bottom action bar to a Floating Action Button (FAB). This collapses the bottom bar into a single icon, providing more real estate on small screens for important content that expands into a list of actions, providing better scalability and labels.

Dialogues (4.4.0)

Our latest change was to dialogues (or modals). All titles and button labels were made clearer and more descriptive as to what actions are available.

Navigation

Our final step in this planned incremental update is to update the navigation. The new navigation uses a side drawer for the menu, housing all pages available to the user. Tabs move to the bottom of the screen for easier ergonomic access and the top bar features a page title, search, filter and additional secondary functionality. For smaller screens, the bottom bar can also be hidden to allow for more real estate on screens for the main content.

The navigation update is one of the more prominent UI changes. In preparation, we are seeking partners to help get the new designs in front of CHWs to determine which key functionalities are intuitive and which will need additional training and support for a more seamless transition. If you are interested in working with us on this, please reach out to orlowski@medic.org .

7 Likes