Dellfer ZeroDay Guard Website Portal

Website portal that provides a user interface for monitoring firmware reliability

Client

Dellfer Inc

Roles

Lead UX/UI Designer Contractor

Tools

Figma | Adobe Creative Suite | Photoshop | Gitlab | HTML | CSS

Project Overview

BRIEF BACKGROUND

Dellfer Inc specializes in aiding device makers to detect, address, and prevent intrusions and runtime anomalies. They are at the forefront of firmware monitoring tools for the automotive industry. Their innovative application, DICE, offers a user-friendly interface for monitoring firmware reliability and detecting intrusions. While currently in prototype stage, DICE has yet to be deployed for customer use.

THE PROBLEM

Dellfer Inc's current website portal presents usability challenges with its outdated layout and features. In response to user feedback, Dellfer Inc aims to address these issues promptly to ensure continued customer satisfaction.

INTERFACE BEFORE

Exploring the work space

COMPETITIVE ANALYSIS

Studying similar companies to Dellfer Inc for design inspiration will aid in developing solutions that align with their requirements. I conducted an analysis of three comparable firms to identify effective and ineffective strategies they employed.

COMPARISON

Mocana has a great grid based layout

PROS:

Mocana grid base layout helps keep their content organized and balanced.

CURRENT:

In Dellfer Inc's current dashboard, the grid layout is confusing and disorganized, often missing essential content that users need, forcing them to search for information. By redesigning the grid layout, we can create a streamlined design where all necessary content is readily accessible.

Cisco is very easy to navigate

PROS:

Cisco keeps their navigation simple, intuitive and consistent on every page. There are features such as a search bar and filters to help users navigate throughout their page.

CURRENT:

In Dellfer Inc's current dashboard, users face challenges in locating desired features due to the absence of navigational aids.

BlueCedar shows a lot simplicity

PROS:

Their color, typography, and imagery fit their brand and allows them to influence their customer's behavior toward the message they are conveying.

CURRENT:

In Dellfer Inc's current dashboard, the communication could be improved significantly through adjustments in color, typography, and imagery, enhancing overall clarity and user comprehension.

Gaining a different perspective

1:1 INTERVIEWS

Conducting 1:1 interviews provides me with a fresh perspective and valuable insights into how I can address Dellfer Inc's challenges. For instance, one of the primary motivations for redesigning the website portal stemmed from user difficulties in locating essential information. During these interviews, participants evaluated Dellfer Inc's current dashboard, offering feedback on navigation and overall display. This approach allowed me to understand their perspectives firsthand and gather actionable feedback for improvement. I conducted interviews with five individuals, aged 30-65, who have experience in this field and are familiar with such portals.

Building empathy

USER PERSONAS

Creating user personas has been crucial in gaining insights into user needs, behaviors, and goals to address Dellfer Inc's challenges effectively. The portal is tailored for a specific audience familiar with its technical language, making it essential to empathize with their perspective. For instance, during my interviews, users expressed dissatisfaction with an unnecessary graph on Dellfer Inc's current dashboard, which occupies excessive white space. While visually appealing to outsiders, it hindered usability for those proficient with the portal's language. Based on these interviews, I developed three distinct user personas to guide the redesign process.

Connecting the dots

FINDINGS

Based on my user research, I formulated a robust design strategy using insights gathered from participants, competitive analysis, and user personas. Dellfer Inc's current dashboard lacks user-friendliness, aesthetic appeal in color, typography, and imagery, and suffers from confusion and navigation challenges. This research provides a clear direction for developing solutions that effectively address Dellfer Inc's issues.

Creating a plan

SITE MAP

The site map structure reflects prioritization, labeling, and linking based on insights from the user research conducted earlier. In Dellfer Inc's current dashboard, while maintaining similar navigation, I reorganized content across device, application, and incident pages. This approach consolidates information on single pages, enhancing clarity and ease of use for users. Establishing this foundation is crucial in shaping the proposed solution effectively.

TASK FLOW

When crafting the a task flow diagram, I considered the pain points and issues identified during data collection with participants. In Dellfer Inc's current dashboard, navigating to specific information about items proved challenging. To address this, I propose redesigning the layout and implementing clickable device names to streamline access and improve user experience.

USER FLOW

Using insights from user research, I created a visualization outlining the user journey within the website portal. A key user concern identified was navigation difficulties. To address this in the new dashboard design, I incorporated clear visual aids such as health gauge charts and features like flag icons, enhancing usability. Ensuring a smooth and intuitive navigation experience was a priority for Dellfer Inc throughout this process.

Visual Design

UI KIT

Given Dellfer Inc's role as a software security company, I selected blue as the primary color for its associations with security, technology, and innovation. Their existing logo, created before my tenure, was deemed suitable and unchanged. Opting for a sans-serif typeface, I chose Poppins to align with the company's modern identity. To ensure contemporary web standards, I updated button designs for a sleeker, more user-friendly appearance, departing from the previous clunky style.

Testing the product

LOW FIDELITY WIREFRAME

Drawing from the developed user stories and a deeper grasp of this framework, I crafted a product designed to embody user experiences and constructive feedback. Dellfer Inc's current dashboard required a more cohesive layout, akin to a "Single Pane of Glass," where all information is visible on one page. By implementing a two-column design resembling an "email type" display, users can easily navigate through device names, incidents, and applications on the left side, while organized grid boxes on the right side provide detailed information, ensuring a clean and appealing user interface.

USABILITY TESTING

Prior to integrating color, typography, and imagery, I conducted a usability test to observe the product flow at a low to mid fidelity stage. This step ensured that the planned features, functions, and overall purpose aligned seamlessly with user expectations in real-world scenarios. Addressing Dellfer Inc's current monotonous dashboard, I aimed to design a user-friendly interface enhanced by familiar elements such as search bars, tabs, health gauges, CTA buttons, and charts, but with a distinctive and intuitive appearance.

Bringing it to life

HIGH FIDELITY PROTOTYPE

After conducting the usability test and finalizing solid wireframes for the product, I am now prepared to integrate the UI Kit I developed into my designs. Throughout this process, I've applied everything I've learned about enhancing product appeal and ensuring its success.

Dellfer Website Portal Prototype

Summary

LEARNINGS

Being the sole UX/UI Designer on this project enabled me to prioritize creating a high-quality product complete with detailed notes and documentation. This approach aimed to eliminate ambiguity and confusion for front-end developers, ensuring that the visualizations and concepts I designed translate seamlessly into a straightforward and time-efficient solution.

KEY POINTS

  • Less is more: Users want to have less click actions when trying to get what they need.
  • Organization is key: When a website is organized, it is easier and more enjoyable to the users.
  • Knowing your audience is important: Not everyone thinks the same so seeing from others point of view is significant.
  • Team work makes the dream work: Workings with senior software engineers allows you to see all points of view when creating a product.

THE PROBLEM

THE SOLUTION