CLIENT

STORY

This Case Study was part of my interview at Redgate Software as UX/UI Designer, the hiring manager asked for a Dashboard redesign.

ROLES

UX Designer

DURATION

One week.

TOOLS

Adobe XD
Adobe Photoshop
Corel Painter X3



CHALLENGE

Rows - Each row represents a project for managing the deployment of one or more databases.

Columns - Each column represents a stage of the deployment that the database(s) pass through as part of the deployment process.

Cells – Each colored cell represents a database currently deployed to a given stage in the deployment process.

This is currently fine for ~5 environments and ~5 projects (first image). However, the second image is an example of what the dashboard looks for an organisation that has 10s of projects and 10s of environments.

Check the two images below.

5 environments & 5 projects, things are fine.
10s of environments and projects, things are messy.



The challenge was to redesign the monitoring area for both regular users and devop team members, the new design should omit the huge amount of white space were given in the task and at the same time, allow easy, simple, and direct access to any action a user might take.

PROCESS


The process started with an understanding of context, what a dashboard may looks like and in what conditions the user will use a dashboard and using what type of devices. The second stage I dove deeper into synthesizing the data and map them out using Empathy Map.

I later built on it to write concise problem statement that will guide me during the process. In order to bring wide range of solutions to the table, I built How Might We questions before going to the Ideation session. Finally, a solution with two iterations, started with Wire-frames then a High Fidelity Prototype.


CONTEXT

Analysis

Time
‍‍

The ultimate goal of any dashboard should be to increase productivity.

A strong information scent for each UI pattern to win time. increase efficiency, and reduce confusion.

Work pressure
‍‍

Display and layout should show an understanding of the user`s short term memory.

The dashboard should allow small learning curve.

Usage

Dashboard should be aesthetically appealing and at least eliminate boring factors.

Dashboard should promoting the most important insights upon user's needs and should be customizable


CONTEXT

From analysis to synthesize

Pain points

User can not detect directly and quickly where and when action should be taken.

Users are not able to prioritize projects upon the state of the database included.

DevOp user usually needs to see all-sets of a project.

DEFINE

I will take the Empathy Map I already built and define a User Story and Jobs to be done to complete the puzzle of The Problem Statement.

Visual Hierarchy
‍‍

Since the majority need to check a Red state for critical DBs, I built the visual hierarchy based on the priority of an ordinary user not a devOp one, therefore.

Priority 1: Maintain clear, direct, and simple display for critical DBs within a project.

Priority 2: Reduce white space between different stages of different projects.

Priority 3: Allow more details for DevOp user to capture the entire situation.

HOW MIGHT WE

By taking The Problem Statement, I can initiate the How Might We phase that will allow wide range of questions in which I can inform the design decisions with more accurate, informative, and innovative input.

HMW make the monitoring exercise appealing to users?

HMW make users take accurate actions as possible?

HMW enable a collaborative environment between DevOps and Ordinary users?

HMW meet DevOp user`s expectations?



IDEATION

Deciding wich patterns to use based on what type of experience I am trying to deliver.

DESIGN

Concepts

Layout
‍‍

1. Navigation bar to select, search, and categorization. (Persistence Navigation).

2. Allow user to group DBs in an environment to ease the use, track, and taking actions.

3. Using collapsible panel for each environment, environment with 0 DB will not take much space.

4. Quick Add Call To Action to easy add new DB to a specific environment.

Card design

1. Stat label, indicates whether its Green or Red along with description.

2. Database`s name syntax: DB`s name Environment/Project`s  Name.

3. Red moving bar add extra layer of experience to make it easy to identify where actions should be taken. (A gamification concept push user to fix issues to reach the Green stat).

4. Most important metrics (I choose random metrics based on article I read on Internet).

Secondary navigation
‍‍

1. Name of the project where the environment and DB are located.

2. Horizontal scrolling, DevOp team can detect easily the enrite DBs in a project along with the environments.

3. Filter upon the stat of DBs. (Healthy, Critical, or N/A in case there is no DBs in that particular environment.

FIRST ITERATION SHOTS

SECOND ITERATION SHOTS

FINAL THOUGHTS

What I learned

What I enjoyed the most is the part where I had to ideate new UI pattern to identify where actions should be taken (Moving bar). In contrast, I was looking for more research outcomes that definitely will push the design into new levels. The overall challenge however was exciting, and I am happy with the initial outcome and look for more challenges in this regard.

THANK YOU!

 UX CASE STUDY

CATCHBEE
MOBILE
APPILCATION

 UI DESIGN

HUMOR STORY
BEHIND
DESIGN THINKING

 UX CASE STUDY

MY
PORTFOLIO'S
STORY

RAFAT ALKHATEEB
ux designer

WORKABOUT

REDGATE Dashboard

CatchBEE
Mobileapp

DEKINGS
Company

ABOUT