interaction designer, creative technologist

Project Dashboard

 Project Dashboard

A Design Exercise Work Piece



Project Goal

Designing Project Dashboard “Home” Screen

Design Challenge

Addressing different user needs in the same dashboard

Time:  November, 2018

Role:  Researcher, UX/UI Designer

Tools:  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.



UX Research — UX Design — UI Design

1.1 - Requirements analysis

1.2 - Exemplars and references

2.1 - Information architecture

2.2 - Wireframes

3.1 - Moodboard

3.2 - User interface design



Requirements analysis & User analysis

Requirements given by Momentum

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: Focused, Efficient, Clean, 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