A Design Exercise Work Piece
Designing Project Dashboard “Home” Screen
Addressing different user needs in the same dashboard
Time: November, 2018
Role: Researcher, UX/UI Designer
Tools: Pen & Paper & Post it, Sketch
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
Simple analysis based on requirements:
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.
UX DESIGN —
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.
UI DESIGN —
Keywords: Focused, Efficient, Clean, Productive, Creative, Well-designed
Dashboard Color and Font
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