interaction designer, creative technologist
Imac2.jpg

Project Dashboard

 Project Dashboard

A Design Exercise Work Piece

Imac3.jpg

INTRO —

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.

 

PHASES —

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

 
 

UX RESEARCH —

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

 

References

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

 
 

UX DESIGN —

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.

 
 

UI DESIGN —

Mood board

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