Loading...

Dell BIOS

Dell BIOS Visual History
  • Categories: Interaction & Visual Design
  • Role: Lead UX/Visual Designer
  • Released: September 2017
  • Client: Dell Technologies

Description

When a PC is turned on, the basic input/output system (BIOS) is the program it uses to start the computer. My task was to improve the navigation and overall user experience.

Process

Start with competitive research. Create an Information Architecture document to determine weak points and simplify site nav. Wireframe potential layouts and review with multiple stake-holders.

User Study & Competitive Analysis

The first steps included a user study that included competitive analysis. We discovered pain points in our own software, namely user-disorientation. They did, however, enjoy the more modern look-and-feel.

IA Investigation

Dell BIOS IA Investigation

I started with an IA investigation. Each highlighted section in the document above has fewer than 3 lines of content, but requires three clicks to access it and its help information. This document clearly visualized an issue with the software architecture: the navigation system is overly-complicated and requires many clicks to perform simple operations.

Landing Page

Dell BIOS Landing Page Original

Dell BIOS Landing Page Explorations

Based on user studies, we knew we needed a consistent, centralized left navigation. We also discovered confusion around the significance of the different size and color of the tiles. Accessibility was also a consideration in the redesign, specifically users with dysfunctional touchpads or mice. The visual design also needed an update to Clarity 4, the latest design language from the Dell Experience Design Group.

Current Build

Dell BIOS Index Page Original

Dell Index Landing Page Explorations

The current build has obvious issues with navigation scalability, see Security in green. Some sub-nav pages had two tiles, while others had 10+ tiles.

Dell BIOS Wireframe Explorations

Dell Wireframe Explorations

The wireframe explorations above illustrate the lack of scalability of anything tab-like, and the necessity of a traditional left nav.

FINAL NAV & FORM DESIGN

Dell BIOS Performance Exploration

The final design landed on the traditional left nav. Without the tiles, the subsections are of equal visual weight and easily accessible.

CLEANUP & CONSOLIDATE

Dell BIOS Performance Landing

Dell BIOS Landing Page Explorations

In the current build, the Performance section of BIOS is 6 pages, requiring 15 clicks to open and close each section and view all help text. The first page is an index of all subsections, each represented as a brightly colored tile of varying shade and size, of which there is no significance. Once inside a subsection, the user must click the help icon for any hint at often complicated content, and then the "x" icon to return to the index page.

Dell BIOS Performance Exploration

The exploration above shows the same Performance content, including help text, on 1 page accessed with just 1 click. Other UX improvements: hidden help text exposed, "Exit" in a consistent, familiar location, and legibility was increased by adjusting color contrast. Form actions were reorganized by priority, and appear disabled if functionally inactive.