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

https://drive.google.com/drive/u/0/folders/0B_xuNFtW-f8weXloUW1yRTB4RGM