UX Audit
National-Level
| Flow / Screen / Widget | Issue | Priority | Assignee | Status | Comments | Links |
|---|---|---|---|---|---|---|
National level view | overall left and right padding of widgets - 24 px. | Low | ||||
National level view | Space between widgets -24px | Low | ||||
National level view | Heading to be left aligned with the widgets | Low | ||||
National level view | Space between heading and the widgets - 32 px | Low | ||||
Households / pop/ bnets delivery cards | Icons to be resized to 40x40px | Medium | Urvi | Completed | ||
Households / pop/ bnets delivery cards | Space and padding of the KPIs inside the cards to be in alignment with figma | Medium | Urvi | Completed | ||
Households / pop/ bnets delivery cards | Font size of the KPIs to be 36pts. Colour also to be changed to secondary. | High | Urvi | Completed | ||
Household coverage | Space between heading and subhead to be 8px | Low | Bhanu | |||
Household coverage | The ellipses dots on the the top right corner to be aligned to the heading | Medium | Bhanu | |||
Household coverage | Restriction of infinite horizontal and vertical scroll. | High | Bhanu | To be discussed | ||
Household coverage | Strokes of the shape outlines to be 1pt | High | Bhanu | In progress | ||
Household coverage | Custom alignment of the KPIs on maps to be centered to the shape | High | Bhanu | To be discussed | ||
Household coverage | Filter chips to be in alignment with figma | Low | Bhanu | |||
Household coverage | Right and bottom padding of the zoom notch - 24px | Low | Bhanu | |||
Household coverage | Tooltips should be attached to the shape and not the KPI | High | Bhanu | in progress | ||
Population coverage | All changes in household coverage are applicable here as well | Medium | Bhanu | |||
Coverage by province | Heading top padding to be fixed | Medium | Indroneil | Needs change in generic chart component | ||
Coverage by province | Search and ellipses to be top aligned with the heading | Medium | Indroneil | Needs change in generic chart component | ||
Coverage by province | Search field to be resized based on figma - height 32px, outline colour to be changed | Medium | Indroneil | Needs change in generic chart component | ||
Coverage by province | The Tete card to be resized and aligned so that outer padding is 24px | Medium | Indroneil | Completed | ||
Coverage by province | Font size of KPIs to be consistent | High | Indroneil | Completed | ||
View Dashboard CTA | Hover be highlighted in Orange (Primary) and not blue | Medium | Indroneil | in progress |
Components
| Component | Issue | Priority | Assignee | Status | Comments |
|---|---|---|---|---|---|
Secondary Button | Remove radius of the button | High | |||
The three dots (Ellipses) on widgets | To be top aligned with the heading and a padding of 24px top and bottom | Medium | |||
Tooltip - on data sync card | Font size in the tooltip to be 14px and the placement to be consistent | High | Urvi | In Review | Setting the font size to 14 px might make it inconsistent with other tooltips as the fontsize for them is larger. |
Filters in table | There should be 16px space between the chip and the label. | Medium | |||
Filters in table | Close icon color and placement to be in line with figma | Medium |
Overview
| Flow / Screen / Widget | Issue | Priority | Assignee | Status | Comments |
|---|---|---|---|---|---|
Overview | overall left and right padding of widgets - 24 px. | Low | |||
Overview | Space between widgets -24px | Low | |||
Overview | Heading to be left aligned with the widgets | Low | |||
Overview | Space between heading and the widgets - 32 px | Low | |||
Filter | The filter toggle to be closer (16px from the Date range input) | Medium | |||
Tabs | Font size of the inactive tabs to be 16pts, weight - 400 | High | bhanu | ||
Tabs | 16px space between the progress bar and the numbers | Medium | |||
Data Sync | 2nd Label of second KPI to be in a single line | High | Urvi | In Review | Achieved upto 1280px, the line will wrap if the width is below this. |
Households | Icon size to be 40px | Medium | |||
Households | Check Horizontal & Vertical alignment of KPI labels | Medium | |||
Households | Insights - Arrow icon size to be reduced to 16x16px. Space between the insight and the icon to be 4 px | Medium | |||
Households | The donut chart is slightly cut on the top and bottom. The container of the card has to expanded | Low | |||
Population covered | All changes that are applicable to household card | Medium | |||
Bednets distributed | All changes that are applicable to household card | Medium | |||
Households not delivered | Inner card padding to be 24px | Medium | |||
Households not delivered | Space between heading and subhead to be 8px | Low | |||
Households not delivered | Size of the donut chart to be increased | Medium | |||
Households not delivered | Alignment of the donut chart to be horizontal with the adjacent pie widget | Low | |||
Households not delivered | Alignment of the donut chart should not shift due the filter/ drill down appearing | Medium | |||
Complaints by type | All changes that are applicable to households not delivered card | Medium | |||
Households coverage ranking | Inner padding around the card to be 24 px | Medium | |||
Households coverage ranking | Space between the graph and the heading is 32 px | Medium | |||
Households coverage ranking | Space between the header and the subhead to be 8 px | Medium | |||
Households coverage ranking | Y Axis labels to have percentage (%) along with the number | High | Bhanu | InProgress | |
Households coverage ranking | Tooltip to be in line with figma. Remove blue border. Make the name bold | High | Urvi | In Review | |
Inventory status | All changes that are applicable to household coverage ranking | Medium |
Registration & Delivery
| Flow / Screen / Widget | Issue | Priority | Assignee | Status | Comments |
|---|---|---|---|---|---|
Households Visited | Overall inner padding to be 24 px | High | |||
Households Visited | The ellipses(three dots) to be top aligned with the heading | Medium | |||
Households Visited | Percentage / Number toggle height to be 28px | Low | |||
Households Visited | The space between graph and heading to be 32px | Medium | |||
Households Visited | Percentage to be displayed on the labels | High | Bhanu | In Progress | |
Households Visited | Tooltip to be in line with figma | Low | Urvi | In Review | |
Population covered | All changes that are applicable to Household visited card | Medium | |||
Bednets distributed | All changes that are applicable to Household visited card | Medium | |||
Households not delivered | All changes that are applicable to Household visited card | Medium | |||
Target Achievement | Space between heading and subhead to be 8px | Low | |||
Target Achievement | The ellipses dots on the the top right corner to be aligned to the heading | Medium | |||
Target Achievement | Restriction of infinite horizontal and vertical scroll. | High | |||
Target Achievement | Strokes of the shape outlines to be 1pt | High | bhanu | In Progress | |
Target Achievement | Alignment of the KPIs on maps to be centered to the shape | High | |||
Target Achievement | Filter chips to be in alignment with figma | Low | |||
Target Achievement | Right and bottom padding of the zoom notch - 24px | Low | |||
Target Achievement | Tooltips should be attached to the shape and not the KPI | High | bhanu | In Progress | |
Target Achievement | Space between toggle and ellipses to be 16px | Low | |||
Planned vs actual campaign progression | Target date lines are mising in the graph | High | |||
Planned vs actual campaign progression | Tooltip to be in line with figma | Low | Urvi | ||
Planned vs actual campaign progression | Overall inner padding to be 24 px | Medium | |||
Planned vs actual campaign progression | The ellipses(three dots) to be top aligned with the heading | Medium | |||
Planned vs actual campaign progression | The space between graph and heading to be 32px | Medium | |||
Summary Report | Overall inner padding to be 24 px | Medium | |||
Summary Report | Sort icon to be aligned to the column heading | High | |||
Summary Report | Column headers to be in single line and the attributes to be in the second line. Make the table scrollable horizontal if needed. | High | |||
Summary Report | Remove the outlines for all the rows. There should be only background blocks | Medium | |||
Summary Report | The size of the day and boundary toggle to be same | Medium | |||
Summary Report | The space between the toggle and the search bar to be 16px | Medium | |||
Summary Report | Pagination to be in line with Figma | Medium |
Complaints
| Flow / Screen / Widget | Issue | Priority | Assignee | Status | Comments |
|---|---|---|---|---|---|
Complaints by boundary | Overall inner padding to be 24 px | High | |||
Complaints by boundary | The ellipses(three dots) to be top aligned with the heading | Medium | |||
Complaints by boundary | Percentage / Number toggle height to be 28px | Low | |||
Complaints by boundary | The space between graph and heading to be 32px | Medium | |||
Complaints by boundary | Percentage to be displayed on the labels | High | Bhanu | In Progress | |
Complaints by boundary | Tooltip to be in line with figma - have a radius | Low | Urvi | In Review | |
Complaints by boundary | Height of the card to be adjusted to the adjacent card | Medium | |||
Complaints by type | The donut chart to be made larger | Medium | |||
Complaints by type | Tooltip to be in line with figma | Low | Urvi | ||
Complaints by status | All changes that are applicable to complaints by boundary | Medium | |||
Complaints by type & Boundary | All changes that are applicable to complaints by boundary | Medium | |||
Boundary wise share of complaints | All changes that are applicable to complaints by boundary | Medium | |||
average complaint res time | All changes that are applicable to complaints by boundary | Medium | |||
Summary Report (Open Complaints) | Overall inner padding to be 24 px | Medium | |||
Summary Report (Open Complaints) | Sort icon to be aligned to the column heading | High | |||
Summary Report (Open Complaints) | Column headers to be in single line and the attributes to be in the second line. Make the table scrollable horizontal if needed. | High | |||
Summary Report (Open Complaints) | Remove the outlines for all the rows. There should be only background blocks | Medium | |||
Summary Report (Open Complaints) | Pagination to be in line with Figma | Medium | |||
Summary Report (Total Complaints) | All changes that are applicable to Summary (Open complaints) | Medium |
Inventory
| Flow / Screen / Widget | Issue | Priority | Assignee | Status | Comments |
|---|---|---|---|---|---|
Inventory status | Overall inner padding to be 24 px | High | |||
Inventory status | The ellipses(three dots) to be top aligned with the heading | Medium | |||
Inventory status | The space between graph and heading to be 32px | Medium | |||
Inventory status | Percentage to be displayed on the labels | High | |||
Inventory status | Tooltip to be in line with figma - have a radius | Low | Urvi | In Review | |
Stock in hand today | There should be space of 4px between available stock and req stock bars | Medium | |||
Stock in hand today | The available stock bar should have a radius similar to req stock | Medium | |||
Stock in hand today | The ellipses(three dots) to be top aligned with the heading | Medium | |||
Stock in hand today | The space between graph and heading to be 32px | Medium | |||
Stock in hand today | Percentage to be displayed on the labels | High | |||
Stock in hand today | Tooltip to be in line with figma - have a radius | Low | Urvi | In Review | |
Summary report | Overall inner padding to be 24 px | Medium | |||
Summary report | Sort icon to be aligned to the column heading | High | |||
Summary report | Remove the outlines for all the rows. There should be only background blocks | Medium | |||
Summary report | Pagination to be in line with Figma | Medium |
Enhancements
| Enhancements to be considered |
|---|
Some guiding features like tooltips for the scroll and zoom component should be present |
Call to be taken on labels instead of legends for graphs. Gives more clarity and a sense of Segregation. |
Sort icon to be more common and functional |
Last updated