Case Study — Web App

DataCenter Management
— conceptual approach to managing system

1.Project Overview.

My Role ⥿ Tools ⥿ Goals

Duration: 10 days - (Two week) Sprint.

My Roles: Discover

Research
Clustering Insights

Others Role:

SME - Data Ceneter
UI/UX Manager

Targeted User:

Administrator

Start Date: Aug 10, 2022

Define

UX Process
Persona
Empathy Map
Information Architecture

Team Size: 03

Ideate, Prototype & Test

Low - Fid
High - Fid
Test & Report

Tools Used:

Figma

Chrome

MS OneNote

MS
Teams

Google
Sheets

Goals:

2.Background.

Remote management of DataCenter infrastructure is a critical requirement for most of the server administrator in the modern-day IT setup. Server administrators need to perform remote restarting, power-off/power-on, diagnostics, and similar actions on servers. There is, therefore, a need to have a dashboard/facility which enables the administrator to carry out such actions and also monitor their progress/status.

3.Problem Statement.

Smart management of data centers is a critical need in today’s fast-paced IT environment. Providing administrators with an immersive and centralized portal to manage tasks will streamline processes and enhance efficiency for the organization. A solution that integrates both actionable controls and real-time information will enable administrators to maximize operational effectiveness and reduce downtime.

— A portal to control and know basic task of data center management.

5.Discover.

Competitors ⥿ Clustering Insights

Discovery was heavily dependent on competitor product features analysis. Among many products, 10 products were explored.

■ Competitors.

Ten product data insights are captured with screenshots. The top 5 or 6 critical features identified are listed.

Solarwinds Orion

Out-of-the-box reporting.
Automated configuration and change management.
Network health and performance monitoring.
Physical and virtual infrastructure management.
Manage data center environmental monitoring.

ManageEngine OpManager

Proactively monitor physical & virtual servers.
Keep track of applications & bandwidth with the Manager.
Monitor flow-based traffic.
Check the data center environment.
3D data center flooring views.

PRTG Network Monitor

Monitor applications and services hosted in your data center.
Keep track of your data center environment.
Unified monitoring for thousands of different vendors.
Receive automatic alerts and notifications.
Generate in-depth data center reports.

NLyte Software

Computing infrastructure management.
Asset lifecycle management.
Comprehensive dashboards and reports.
Capacity planning.
Real-time data collection.

Datacenter Clarity LC

Get high visibility with a floor layout and rack distribution.
Real-time monitoring for Power Distribution Units (PDUs)
Cable connectivity management.
Leverages Siemens PLM technology to deliver lifecycle management.
Real-time reports and analysis of the data center.

Kaseya VSA

Network and endpoint management.
Audit and asset inventory.
Deploy policy-based automation.
Proactive remediation.
Automate software and patching deployment.
Anti-malware and antivirus.

Optimum Path Visual Data

3D visualization of infrastructure.
It has advanced power management.
Environmental monitoring.
IP camera management.
Change and configuration management.

Device42

Insights into the computing environment.
Application dependency mapping.
Software license management.
Agentless and continuous device discovery.
Power and environment management.
Data center room and cabling.

Zabbix

Distributed Monitoring: Monitor remote data centers or branch offices.
Agentless high-performance monitoring. Keep track of different elements in your data center without any agents.
Integrations: Out-of-the-box integration of popular vendors,
like Cisco, D-Link, Juniper, HP, Netgear, Huawei, etc.

Nagios

Monitors single points of failure.
Finds and monitors SLA faults.
Manages servers and their connections.
Monitors environmental factors; temperature & humidity.

■ Features Comparison Chart.

Comparison table highlighting the features of various data center management tools, indicating available features with a ✓ and unavailable features with an ✗.

Note: This table is based on available information and may not cover all features of each product. For the most accurate and up-to-date details, please refer to the official websites of each product.

■ Competitive Analysis and UX Insights.

Discover:
The competitive study for available Datacentre Infrastructure Management tools provides insight on the current state of cloud/remote management of data center infrastructures.

The study intended:

Understand high-level features of the product.
Current UI – UX of the product.
Scope for deep analysis on more suitable product.

Conclusion:

All the products provide essential functionality, including power management, network optimization, and utilization reports. However, the variations in features and usability across products can make it difficult for users to decide which product best meets their needs.
Based on my observations, the products are functionally robust, offering advantages like 3D infrastructure visualizations (for better system monitoring) and productive dashboards (delivering actionable insights). However, significant UX issues hinder their potential. These include inconsistent UI patterns, cluttered interfaces, and navigation challenges, which increase the user learning curve and reduce overall efficiency.
A deeper analysis of products like Device42, Optimum Path Visual Data Center, Zabbix, and Data Center Clarity LC is recommended. These tools are feature-rich and align well with the persona but require targeted UX improvements. Efforts such as standardizing UI elements, simplifying navigation, and reducing cognitive load can significantly enhance user satisfaction and adoption.

6.Define.

Persona ⥿ Empathy Map ⥿ Information Architecture

Persona was hypothetical role based; insights are collected from internet, random conversation to gain some viewpoints from other designers (UX community) basic physiological/predictable variations human could have in the interests, behaviors and other points that picked up.

Empathy map will help teams develop a shared understanding of target audience's and others; thoughts, feelings, and actions.

Information Architecture is key driving factor for the overall product and analysis been done.

■ Persona.

Hypothetical role based persona created to understand the Server Administrator role.

Daniel Matthews
Server Administrator

35 Years Old ⥿ Married ⥿ Engineering
Urban area, works for a mid-sized IT company ⥿ Introvert

Personality:
Active / Self Motivated

Technical Level:
Advanced

Experience:
10+ Years

Nature:
Manage Portal

Education:
Bachelor's in computer science

Environment:
Stressed / Busy

Tools Used:

Primarily uses laptops and desktops, occasionally mobile devices for quick updates.
Comfortable with industry-standard tools like VMware, Windows Server, and monitoring platforms like Nagios or SolarWinds.

Bio:
Daniel Matthews is fascinated about the technology mainly in cyber security, always keeps track of new available technologies in cloud management sector. He is self-motivated and team as well as individual performer.

Pain Points:

Manual Tracking: Current tools lack a comprehensive view of action history, making audits cumbersome.
Real-Time Feedback: No immediate feedback on action status, leading to delays in troubleshooting.
Complexity: Existing dashboards often have cluttered interfaces, making navigation difficult.

Behavior:

Frequently switches between different tools to manage servers.
Relies on email and ticketing systems to coordinate with team members for troubleshooting.
Works in high-pressure scenarios where downtime impacts business operations significantly.

Goals:

Efficiently monitor and manage server operations remotely.
Quickly identify and resolve issues without physically accessing the data center.
Maintain a clear, auditable history of all server-related actions to ensure accountability.

Motivations:

Ensure uninterrupted server operations to meet organizational SLA commitments.
Maintain trust with team members and management through transparent and accountable processes.

Needs from the Dashboard:

Clarity: A clean, intuitive interface that simplifies monitoring and task management.
Action History: A detailed log with key attributes like:
What: Action performed (e.g., reboot, diagnostics).
Who: Administrator who performed the action.
When: Timestamp of the action.
What Changed: System status before and after.
Action Status: Successful, failed, or in progress.
Real-Time Updates: Instant feedback on server status and action results.
Customizable Filters: Ability to sort and filter logs by time range, server, or type of action.

■ Empathy Map.

Visualizing user attitudes and behaviors in an empathy map helps UX teams align on a deep understanding of end users. The mapping process also reveals any holes in existing user data.

■ Information Architecture.

The below hybrid IA provides the detail on the key features and pages of the application and also it encompasses with application flow or user flow map.

Overview:
A hypothetical application flow provides a high-level overview of the feature and its navigation paths, helping to identify key areas of the application where the user experience can be enhanced. This visualization enables a deeper understanding of how users interact with the application and highlights opportunities for streamlining the journey to meet user needs effectively.

Goal:
Ensure a seamless process that allows users to accomplish their desired tasks with minimal friction. The key goals for the Data Management feature include:

Effortless Navigation: Users should easily locate and access key functions without confusion.
Action History Visibility: Users should be able to quickly view past actions for reference and auditing purposes.
Remote Power Management: Simplify performing critical power-related tasks, such as shutting down, restarting, or monitoring power remotely.
Diagnostics: Provide intuitive tools to diagnose and troubleshoot issues without requiring advanced technical expertise.

7. Ideate.

Low-Fid ⥿ High-Fid

Low-Fid mockups are created to do a quick ideation on features and the understand the user flow, navigation etc... elements without getting in more of visual details

The High-Fid consists of more detailed mock up with emphasis on the color, icon, typography and accessibility.

■ Low-Fid.

Goal: Server Administrator should be able to view activity or action history so that server admin can perform diagnostics.

Steps: Login > Dashboard > Activity History (Hamburger) > List of activities > View detailed info

■ High-Fid.

Goal: Server Administrator should be able to view activity or action history so that server admin can perform diagnostics.

Steps: Login > Dashboard

8. Heuristic Evaluation.

Duration:
30 min

Evaluator:
Abhinav S Nidoni

Date:
Aug 18, 2022

User Group:
Server Administrator

Task:
Server Heuristic Evaluation of the Winner Design Dashboard

Objective:
Evaluate the design dashboard using established heuristics to identify gaps in usability, functionality, and visual design compared to the requirements document before the A/B Testing. The evaluation will also highlight areas for visual and functional improvement for future updates.

Visibility of System Status:

Current Design: Activity history lacks real-time progress indicators for ongoing tasks.
Improvement: Add “remaining time” or progress bars for tasks In Progress. Use visual cues (colors, icons) to communicate states clearly.

Match Between System and Real World:

Current Design: Terms like “Read More,” “Retry,” and generic success/failure statuses may confuse non-technical users.
Improvement: Use actionable and user-friendly language, e.g., “View Details” instead of "Read More" or “Try Again” instead of "Retry."

User Control and Freedom:

Current Design: Users may not have options to cancel or pause tasks mid-process.
Improvement: Provide clear controls for Cancel or Pause alongside ongoing actions.

Consistency and Standards:

Current Design: Inconsistent text styles for “Status Indicators” (e.g., colors for “In Progress” and “Failed” vary in visual prominence).
Improvement: Standardize visual cues across statuses (e.g., yellow for “In Progress,” green for “Successful,” red for “Failed”).

Error Prevention:

Current Design: No confirmation prompts for critical tasks like “Power Off” (irreversible actions).
Improvement: Add a confirmation dialog to prevent accidental clicks.

Recognition Rather Than Recall:

Current Design: Users must rely on memory to track recurring tasks or recently completed actions.
Improvement: Provide a clear search or filter option in the Activity History to easily retrieve information.

Flexibility and Efficiency of Use:

Current Design: No shortcut actions for recurring tasks.
Improvement: Add features like “Favorites” or “Quick Actions” for frequently performed tasks.

Aesthetic and Minimalist Design:

Current Design: The design feels cluttered with repetitive information (e.g., long activity descriptions).
Improvement: Simplify the activity cards by showing only essential details (task, status, and time). Allow users to “expand” for more information.

Help Users Recognize, Diagnose, and Recover from Errors:

Current Design: Generic error messages (“Failed”) provide no guidance on resolving issues.
Improvement: Add error descriptions and actionable tips, such as “Power failed due to insufficient permissions. Contact Admin.”

Help and Documentation:

Not Applicable

9. A/B Testing.

A/B Testing, also known as split testing, is a method of comparing two versions of a app, or any other user-facing component to determine which one performs better.

A/B Test helps for Data-driven decisions, reduced risks, understand user preference and many more quality benefits and also it is quick turn-around for the product or app.

Duration:
20 min

Participants:
08

Tools:
Figma, Chrome/Web, Microsoft Forms, Microsoft Teams.

Method:
In-Person (One-on-One sessions conducted over Microsoft Teams)

Parameters Evaluated:

Icons.
Typography.
Color Schemes.
Layout.
Other relevant UI elements.

Design A

Design B

Preferred UI Theme:

User Feedback Summary:
Participants were actively engaged throughout the session, offering valuable insights into both design options. Design B emerged as the preferred choice due to its visually appealing and user-friendly design. Key strengths of Design B include:

Visual Appeal: A colorful and visually engaging interface.
Efficiency: Quick task status visibility, along with Search and Favorites functionality, enhances usability.
Critical Metrics: Important data like CPU usage and Building Statistics are readily accessible

However, participants identified a few areas for improvement:

Color Scheme:
- Simplify the color palette to enhance clarity and create a more cohesive visual experience.
UI Placement:
- Introduce quick call-to-action buttons and shortcuts to improve efficiency.
- Hide unnecessary widgets to reduce UI clutter and simplify Activity History with icons and better visual hierarchy.
Icon and Tile Alignment:
- Adjust icon sizes and tile colors for better consistency and scannability.
- Reorganize widgets to prioritize actions and streamline navigation.
Visual Appeal:
- Refine colors, improve visual hierarchy, and reorganize widgets to enhance overall aesthetic appeal and usability.

Conclusion:
While Design B was generally preferred by participants for its efficiency and visual appeal, refinements in the color scheme, button placement, icon sizing, and overall hierarchy are recommended to deliver a more polished and user-centric experience.

9. Final High-Fid.

The final High-Fidelity mockups are crafted based on feedback gathered through A/B testing, in-person discussions with participants, and a thorough heuristic evaluation. Detailed observations of user behavior, careful analysis of insights, and identified areas for improvement were incorporated into the design to ensure the mockups effectively address user needs and expectations.

This process enabled a well-informed, user-centered approach, resulting in a refined design that prioritizes usability, visual clarity, and task efficiency.

Dashboard.

Dashboard with More details on hover.

Dashboard with Notification.

Dashboard with Notification Opened.

Confirmation before any critical task.

10. Design Documentation.

Overview:
The dashboard design focuses on enabling efficient remote DataCenter management by providing real-time metrics, actionable insights, and quick navigation. The design blends modern aesthetics with functional usability for server administrators.

Design Philosophy:

Modern Design Trends: Use of Glassmorphism style creates a futuristic and clean look while maintaining hierarchy and clarity.
Aesthetic-Functional Balance: The design balances visual appeal with utility, avoiding unnecessary clutter.
Goal-Oriented Design: The design ensures that users can quickly access core tasks and monitor server performance efficiently.
Intuitive Navigation: Critical actions and information are prioritized, reducing cognitive load.

Design Theme and Style:

Glassmorphism: Definition: A semi-transparent, frosted glass effect that overlays blurred backgrounds.
Purpose: Enhances depth, modern aesthetics, and visual hierarchy while keeping UI clean.
Key Characteristics:
- Transparency: Panels use a frosted-glass effect with 80% opacity.
- Blur Effect: Background blur with a 16px Gaussian blur.
- Borders: Subtle borders with 1px white outlines and slight rounding (e.g., 40px radius and 16px and followed by other radius for based on components ).
- Gradients: Smooth gradients for charts and icons for depth.

#00A3FF
Primary Blue

rgba(255, 255, 255, 0.2)
Glass White

#FF8C00
Accent Orange

#37D67A
Success Green

#FF4C4C
Error Red

#B8C2CC
Neutral Gray

#101C2B
Background Dark

Font, Weights and Size:

Font Family: Roboto, Roboto Mono
Font Size: 14px, 16px, 18px, 20px, 24px, 32px, 48px
Font Weights: Bold (700) and Regular (400)

Spacing and Layout:

Grid System: A 12-column grid with 24px gutters.
Between widgets: 24px spacing

Accessibility Considerations:

Color Contrast: Meets WCAG 2.0 AA standards for legibility.
Font Scaling: Supports dynamic text resizing.
Keyboard Navigation: All key actions (e.g., buttons, links) are accessible via keyboard.
Status Indicators: Use both colors and icons to cater to users with visual impairments.

Thank You

Google Sites

Report abuse