interaction designer, creative technologist

Project Dashboard

 Project Dashboard

A Design Exercise Work Piece


Project Goal

Design Project Dashboard “Home” Screen UI

Challenge & Requirements

Addressing different user needs from Executive, Design&Development Lead, Project Manager to Designers and Developer in the dashboard


November, 2018


UI Designer


Pen & Paper & Post it, Sketch

Project Names are from Momentum website - The ownership belongs to Momentum.

Project Names are from Momentum website - The ownership belongs to Momentum.



1.1 - Requirements analysis

1.2 - Exemplars and references

2.1 - Information architecture

2.2 - Wireframes

3.1 - Mood board

3.2 - User interface design


Requirements analysis

Requirements given by Momentum

Simple analysis based on requirements:


Design Questions

  • How to layout active projects

  • For active projects, what Information should be included, how to present it in a way that’s direct and clear?

  • What kind of charts/visualization to represent project Health

  • What should be included in notifications



I searched a lot of exemplars for project layout, project health. Below are some of the exemplars that I mainly draw inspirations from.


Information Architecture

The Sitemap is mainly based on user requirements.



1. General Layout

I tried 3 different layouts to maximize the space for information.

The Active Projects area is the main focus for all personas, and using a grid view makes it more efficient and direct.

2. Single Project View wireframe iterations

I started with putting as much information in it as possible, and do subtraction, only leave essential information on it.

2 —> 3 Using font size, font color, icons and tags to differentiate levels of information.


Mood board

Keywords: Clean, Focused, Efficient, Productive, Creative, Well-designed


Dashboard Color and Font

Screen Shot 2018-12-26 at 16.40.49.png

User Interface Design Iterations

Major iterations: 1. Clean and Plain color —> 2. Using Color block to separate different elements —> 3. Adding Gradient to add vibrations —> 4. Removed color stripe for healthy active projects on the left side, based on the feedback from reviewers that the color block is not friendly to color blind users, and not consistent with the project Health Color

Final UI Design