Empowering tech company’s digital infrastructure
Overview
The existing DCIM landing page was outdated, prompting the stakeholders to seek an upgrade to meet contemporary standards. A centralized platform was required for DCIM team members to access essential documentation for their work. Additionally, the landing page serves as a resource hub for external teams to gain insights into products, services, and submission processes.
Project Duration
4 weeks
Role
UI/UX Designer, Web Developer
Problem/Challenges
The challenge was to streamline information and improve user experience by emphasizing key elements, such as the intro video and points of contact, while addressing user questions about information location. The coding environment presented limitations in terms of CSS functionality, which required finding workarounds to achieve the desired design.
Objectives
- Create centralized hub for DCIM team members to locate documentation.
- Emphasize the introductory video to provide external teams with a comprehensive overview of the team’s functions.
- Implement standardized request submission processes and ensure accurate points of contact for each service or product.
DCIM Team Member
This individual seeks a user guide to ensure adherence to the correct procedures within the DCIM team, specifically for the Alert Manager product they are involved with.
Potential Collaborator
This individual is seeking comprehensive insights into the operational dynamics of DCIM and the specific products they support within the company.
Research
I conducted stakeholder interviews to identify the target audience as DCIM team members and potential collaborators. Based on the insights gathered, I researched industry standards and strategized an efficient and user-friendly approach to cater to both experienced and new users. To stay updated with design trends and enhance user experience, I leverage resources like Page Collective and Dribbble.
Ideation
The design process involved analyzing real-world examples, sketching rough ideas, and leveraging the company’s established color palette to create a blue/grey design system. During this process, I found that the most effective approach to highlight the introduction video and align with DCIM’s objectives was to integrate it with the header. The visual overlap of the header background and video creates a compelling focal point, capturing the user’s attention and encouraging interaction.
A high-fidelity prototype of the website was developed using Figma to provide stakeholders with an interactive representation of the final design. After the final design was approved I used HTML/CSS to build the final product.
Visual Design Elements
I developed a versatile visual design system to support future site expansion and accommodate new use cases. This involved establishing a cohesive color palette, typography, and vector graphics, as well as creating reusable UI components. The vector graphics featured a web-like structure with connecting dots, visually representing the interconnections between data centers. To enhance usability, collapsible sections were implemented, enabling users to skim through titles and expand relevant sections, minimizing information overload and confusion.
The DCIM color palette plays off of the extended company palette, focusing on lighter blues with a powerful dark blue accent.
This typeface family is inspired by early Grotesques, designed to excel in both digital and print media. Chosen for its legibility and harmonious blend of playfulness and professionalism.
Work Sans is available via an open source license. No font weight above bold should be used.
UI Components – Buttons and Links
UI Components – Solid background collapse section
UI Components – Dotted border collapse section
Usability and Accessibility
Unmoderated usability testing was conducted with the stakeholders’ team, collecting feedback and integrating it into design refinements. During the initial prototype stage, we identified readability concerns with the on-call banner due to limited CSS control. I addressed this issue by making adjustments to the banner background. Furthermore, we conducted color contrast and font size checks across the entire site to ensure optimal readability and accessibility of the text.
100%
tasks completed by stakeholders
10.95
contrast
★★★
small text
★★★
large text
Outcomes
01
The feedback from DCIM team members indicated a positive user experience and ease of use, affirming the site’s effectiveness in providing them with relevant information.
02
Potential collaborators engaged with the introduction video and successfully identifying the appropriate points of contact for their desired product or service.
03
The DCIM team now possesses a comprehensive visual design system and a set of reusable UI components, streamlining the ideation process for future designers.