Loading...

Dell BIOS

Reimagine the Basic Input Output System
Dell BIOS Visual History
  • Role
    Visual Design (Lead), Interaction Design (Lead), Information Architect (Lead), UX Research (Support)
  • Team
    1 Visual/Interaction Designer, 1 Research/Product Owner, 2 Engineers
  • Timeframe
    June 2017 - September 2017

Challenge

User research and customer feedback reveal experience issues within the BIOS flow. Redesign the flow to resolve these issues while accounting for possible limitations: lack of keyboard/mouse control leading to a reliance on tab navigation, user stress over possibly loss of data and time.

Solution

Study competitive and historical research to determine highest priorities. Investigate the IA to discover opportunities to simplify site navigation. Wireframe potential layouts and review with multiple stake-holders. Prototype and test with users to validate/invalidate assumptions. Iterate until customer feedback is ideal.

User Study with Competitive Analysis

The first step was a user study that included a competitive analysis. We discovered pain points in our own software, namely user-disorientation. The users did, however, enjoy the more modern look-and-feel of Dell's Metro inspired color blocks (see current build below.)

IA Investigation

Dell BIOS IA Investigation

Before pushing a single pixel, the program architecture needed investigating. Each highlighted section in the document above has fewer than 3 lines of content, but requires three clicks to access its information. This document clearly visualized an issue with the architecture: the navigation system is overly-complicated, requiring many clicks to perform simple operations. This investigation allowed the collapse of many pages into a single overview page, often without a scroll.

And just like that, 60+ pages became 20.

Landing Page Redesign

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.

Explore & Iterate

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 (above) 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.

The exploration below shows the same Performance content condensed onto 1 page accessed with 1 click. Other UX improvements:

  • Reorganized form actions by priority
  • Exposed previously hidden help text
  • Relocated the "Exit" function to appear in a consistent, familiar location
  • Increased legibility by adjusting the color contrast of typography
  • Ensured disabled features appear disabled by creating/applying an inactive style

Dell BIOS Performance Exploration

Related Projects