Design
Consistency
To stay consistent across all unicef projects, layout was divided into three parts: top bar (with portal title, notification icon and user settings icon), navigation drawer on the left and main workspace with header on the right.
Similar to other unicef projects, UNPP is build of Material Design elements, e.g. :
Tabs in header to switch between screens in workspace on the right. Active tab is highlighted by primary color, so user is not lost during navigation;
Tables to present data. Tables are paginated, so they don’t take a lot of space on the screen. For smaller devices tables are scrollable as well. In some tables, when user hovers over a table’s row, there are additional options available, eg. downloading concept note;
Cards, to contain information. Information on workspace are grouped into cards, so different types of data are easy to distinguish. It provides clarity to layout and helps the user to quickly locate needed information.
Steppers used in registration flow. Each piece of data, depending on its type, is grouped in a separate step to avoid clutter;
Tooltips with helper text, that appear when the user hovers over an element. They are used to have quick access to hidden (because of lack of space) information e.g. full list of Sectors and Areas or Partners with their application status (when hover over CFEI status);
Menus (three dots) to show available menu items, hidden to reduce clutter on a screen. It allows to add more functions here in the future if needed, without changes in layout;
Buttons - raised buttons to indicate primary action on the screen (e.g. in headers to create new CFEI) and flat buttons for other actions available (e.g. on cards);
Material Design
Thanks to Material Design elements, that are commonly used in many apps across web, created layout is clean, responsive and easy to understand by users (especially if they are familiar with other unicef platforms).
UNPP Highlights & Resources
Similar to other unicef projects, UNPP is built with Material Design elements, e.g. :
Tabs in header to switch between screens in workspace on the right. Active tab is highlighted by primary color, so user is not lost during navigation;
Tables to present data. Tables are paginated, so they don’t take a lot of space on the screen. For smaller devices tables are scrollable as well. In some tables, when user hovers over a table’s row, there are additional options available, eg. downloading concept note;
Cards, to contain information. Information on workspace are grouped into cards, so different types of data are easy to distinguish. It provides clarity to layout and helps the user to quickly locate needed information.
Steppers used in registration flow. Each piece of data, depending on its type, is grouped in a separate step to avoid clutter;
Tooltips with helper text, that appear when the user hovers over an element. They are used to have quick access to hidden (because of lack of space) information e.g. full list of Sectors and Areas or Partners with their application status (when hover over CFEI status);
Menus (three dots) to show available menu items, hidden to reduce clutter on a screen. It allows to add more functions here in the future if needed, without changes in layout;
Buttons - raised buttons to indicate primary action on the screen (e.g. in headers to create new CFEI) and flat buttons for other actions available (e.g. on cards);
Colors used: blue for Agencies (unicef color) and purple for Partner. This palette matches the colors used on Landing Page.
UNPP shares a similar UX on both the Agency and Partner portals.
Similar elements behave in the same way for consistency reasons. For instance, creating a new CFEI (Agency) and creating new Unsolicited Concept Note (Partner); placement of buttons in header; tabs on workspace; cards containing information etc.
Elements
Colors used:
Blue for Agencies (unicef color)
#0099FF
Purple for Partner
#685EA0
This palette matches the colors used on Landing Page.
UNICEF (UI) Style Guide
Last updated