interaction designer, creative technologist
Imac2.jpg

Project Dashboard

 Project Dashboard

A Design Exercise Work Piece

Imac3.jpg
 

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

Time

November, 2018

Role

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.

 
 

PROCESS

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

 

References

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.

IA.jpg
 

Wireframe

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

moodboard.jpg

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

Desktop-HD-Copy-2.jpg