Avni – UX Revamp

Avni is a configurable Android application used for data collection & to process solidification by organizations by field workers.

This application is used by different users, and has different data collection methods, due to the different use cases and user personas, any feature in the app is built as a generic feature configured for an organization.

Our objective was to revise and redesign a few crucial screens to not only introduce new functionality but also enhance the user interface and user experience, & incorporate features of the classroom observation tool developed by the World Bank, which was earlier aimed at measuring the quality of teaching practices.

We also came up with a set of guidelines that can be used in terms of color usage, font usage, and other ideal user experience solutions that can be used throughout the platform to keep it consistent & still give space to the users by making the application configurable.

Solutions

Home Screen – Card structure

Cards were arranged in a long scroll on the home screen. The lower navigation bar included a search function; lighter-colored cards were difficult to read. The filters took up a large amount of space. These were a few of the problems with the user experience that we found.

In addition, the clients brought up a few more worries and challenges that had to be taken care of, such as

• The best location for the search

• The description text, secondary value, and primary value make up a card. Putting these components in the right order will improve the user experience.

• Cards color selection to distinguish between several groups.

• To come up with a way to distinguish between clickable and unclickable cards that direct users to different pages.

Here are some of the solutions that were proposed:

1. The search icon was moved to the primary header, which is a standard solution as the search was for the list of cards. The header was optimized to make it clean and minimal, and the refresh button was highlighted by adding primary color and a consistent structure around it, as the button is frequently used by users.
   
   
2. A secondary header that changes states to display the number of filters applied as well as the filters applied in several tags stacked one on top of the other with a horizontal scroll was used to replace the filters button. There is a close icon on the tags in case you need to delete a specific filter.
   
   
3. Limiting the information and showcasing as many headlines as possible was necessary because of the lengthy scroll. To help the user concentrate on one area at a time, accordions were introduced. A section heading with an arrow indicates that the section opens up to display information when clicking, although only the first section and the first few cards are visible at this time. 
   
   
4. In certain instances, the content may exceed the character limit of 100. It is crucial to remember that the content consists of an explanation of the statistics and figures (primary and secondary values). The statistics context could be lost if the text were truncated in this place. Our suggested solution for this was to scale the cards based on the character count, and then modify the surrounding card sizes to balance the heights as well.
   
   
5. Clickable cards have an arrow in the corner to show that, clicking the card navigates to a new page.
   
   
6. The button at the bottom is to avoid infinite scroll. Here a few cards are displayed, and a view more button along with the number of cards that will be displayed on click. This helps the user avoid long scrolls go to the section they are interested in, and click on the button to view cards of only that section. This increases focus on one section and is a better experience for the users as it minimizes the scroll.

The cards were redesigned, the primary value along with the description text was anchored to the right, considering its importance, and the secondary value which is of less importance was anchored to the right with an icon.

The colors were picked considering the users and to bring maximum readability. We picked darker shades of grey on light colors, we picked colors with the same hue to bring harmony to the design and create a good contrast between the text and the background.

We provided the clients with a list of 10 colors that can be used for the cards. The cards also had a stroke to create a clear separation from the background. Below is the list of colors. The first color is the color of the card and the second is the color of the stroke. 

Home Page – List structure

Since Avni is a configurable application for data collection, the clients wanted to provide users with a choice of the type of view that would make it easier to consume information. For example, the users of the teach app found it easy to consume data in a list format, where numbers and the description text are listed side by side. So a list view for the home page was also proposed.

We had references from the teach app and came up with a listing layout that can be used instead of the card view for better consumption of data for different users. Below is the design of a consistent list-view layout for Avni

We provided them with a list of 10 colors for different categories in the list view

The Subject Listing Page

The listing page consisted of a list of names along with descriptions and tags of what programs the person/entity is associated with.

Since the data is configurable, a solution had to be found to display data in a way that is easily consumable and works when different amount of data has to be displayed in a list format. Below is an image of design mockups to how to show the optimized solution that works for all kinds of data collection.

The layout was made in a way that we create a clear separation along with initials for easy identification. The data can be stacked one below the other so that when longer names or entities have to be displayed we do not have to truncate the text, the entire text can be displayed. In the design, we tried to integrate the teach app specifications to fit this list. We suggested some solutions such as placing the location and the tags below can be easier to consume and also work when the text is longer.

The Dashboard

We had to align the dashboard page to a single-teacher details page of the teach app, where all the information of a teacher will be displayed, along with which we solved a couple of user experience issues, like the editing of observations and mentioning the status of observation along with the date.

In the above image, we removed the tab and optimized the solution in a way that all the information is displayed on the same screen.

We categorized the observations into completed and upcoming observations along with the status, and the summary included all relevant information such as critical codes, the last observed date, and the number to remove the profile tab. There were buttons on the observations to come. After completion, the completed observations are modifiable for 13 days, after which there is no longer an option.

We also optimized the color of the status labels in the iterations.

The above solutions were listed as guidelines to optimize the entire application to collect and display configurable data for different users. We made some guidelines for color usage, text usage, and basic UX solutions that can help users have a better experience while adding and consuming the data.