Installation Framework ReDesign

Role: Manager & UX Lead

Caveat: All images are from documentation available on the internet. Original Design documents are not available due to NDA

Installation Framework Redesign

Scope of the Problem

Managed Team responsible for developing New Installation Framework & UI for Installer

Framework had to be flexible enough to work for ALL 15+ middleware products and accommodate multiple variations of component installation, deinstallation & setup activities.

Old installation wizard was dated and hard to navigate. Customers frequently had to write their own installation guides for their internal users to ensure a successful installation.

It also (despite its name) acted as a DeInstallation & Configuration tool.

Originally scoped as a UI Revamp (aka update the visuals), it was quickly apparent that the entire installation approach needed to be redesigned. This included:

• New Interaction Patterns• Modernized UI• Revamped User Flows• Updated Content• Instructions for

developers on how to create an Installer

• And.. New Icons & imagery

Example of Issues with current UI:

A. Poor Layout / Use of Space

B. Too much textC. Cramped lists of tasks

(2-18) D. Lack of product specific

informationE. Poor ReadabilityF. No communication of

installation progress

Entire Redesign Project spanned multiple years and was spaced over 2 releases.

Installation FrameworkExamples of the Fixes

New Installation Framework was designed in coordination with all 15+ product teams.

Strategy was a combination of a common UI Framework accompanied by web based design guide for developers for utilization

Design Guide Included: Page naming conventions, field label, messaging format, approved icons

New Installation Framework included common ‘panels’

A. Title bar and Page Title sections supported users tendency to run multiple installations; allowing them to quickly find / recognize required tool.

B. Breadcrumbs Panel allowed users to envision complete path through wizard and to immediately see impacts of radio button selection.

C. Error Message Panel designed to hide when no messages to be displayed. Messages (error/alert/warning) have an extensive style guide.

D. Data Panel custom fields defined by team using common UI components.

A. Title bar

A. Page Title

A. Product Specific Icon, Name, V#

B. Breadcrumbs

C. Message Panel

D. Data Panel

New Installation Framework added breadcrumbs/steps to inform users on steps upcoming as well as their current point in the flow. Combination of colors and icons were used to educate users on possible actions.

A. Colors indicate accessible,visited but accessible & pages not yet accessible.

B. Icons indicate simple pagesversus pages where selections will cause branching in the wizard flow

A. Colors

B. Icons

Installation FrameworkSupporting Materials

Supporting Materials

Creation of a common installation framework and UI across divisions and geographies required a lot of collateral which due to NDA restrictions cannot be shared outside of the company. Some of the items that my team and I developed include:

• Base Framework and Code Library to ‘help’ developers to ensure that creating the Installation Wizard according to the style guide is the easiest path

• Style guide & UI Patterns Web Library to ‘help’ developers understand the various options available to them

• Glossary to ensure that all Installation Wizards used the same naming conventions across products (e.g. products vs. releases vs. features)

• Icon Library to ensure common visual language across all installation wizards

• And finally…. Consulting services (provided by a great team)

The End