# The UI evolution of the CHT

**URL:** <https://forum.communityhealthtoolkit.org/t/the-ui-evolution-of-the-cht/3515>\
**Category:** Product\
**Tags:** ui-ux\
**Created:** [May 14, 2024, 6:39pm UTC](https://forum.communityhealthtoolkit.org/t/the-ui-evolution-of-the-cht/3515 "2024-05-14T18:39:58Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Nicole\_Orlowski](https://communityhealthtoolkit.b-cdn.net/user_avatar/forum.communityhealthtoolkit.org/nicole_orlowski/32/385_2.png) [@Nicole\_Orlowski](https://forum.communityhealthtoolkit.org/u/Nicole_Orlowski)\
**Post date:** [May 14, 2024, 6:39pm UTC](https://forum.communityhealthtoolkit.org/t/the-ui-evolution-of-the-cht/3515/1 "2024-05-14T18:39:58Z")

</div>

_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](https://material.io/)._

## 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.

 ![Filters before and after](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/c/c80383116f8a78112c54bb2f9c525211bebd72ee.jpeg)

### 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.

 ![Search before and after](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/1/1f1f1d241fe7ac6cbeb8167d5ad183861387ca56.png)

### 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.

 ![Floating actions before and after](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/e/e3b7071cf05ac7d6b7034c8b6a682caa38ffc3d9.png)

### 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.

 ![Dialogues before and after](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/d/d081a8c4d4a9eb47aef1b45fbc002aebda83f78e.jpeg)

### 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.

 ![](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/5/5853bdb5d2efb7b887d32dfa5797d8b2ac3d68ca.png)

 ![](https://communityhealthtoolkit.b-cdn.net/uploads/default/original/2X/1/1dd650c19f1c8ddcf1266b7969401ef254ed5227.png)

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](mailto:orlowski@medic.org) .

---

_[View the full topic](https://forum.communityhealthtoolkit.org/t/the-ui-evolution-of-the-cht/3515)._