HPE-THUMBNAIL.jpg

HPE

Hewlett Packard Enterprise

As a visual designer on the Helion User Experience Team my objective was to create a flexible and holistic pattern library and style guide to support HP Helion’s rapidly growing product base. This included expanding and adapting a pre-existing design system to the growing and specific needs of various platforms and products.


The initial pattern set contained brand-defined color choices, typestyles, iconography, as well as some common interaction elements like form fields, headers & footers, menus, buttons, and links.

grommet-helion-general_basic-01.jpg
grommet-helion-general_basic-02.jpg
grommet-helion-general_basic-03.jpg

Helion products required a responsive grid focusing on +960 breakpoints. This system was designed to enhance the operator experience in these states by providing persistent UI elements and details important to the current work flow.

Responsive_Stop_Proposal2.jpg

The expanded pattern included various treatments for lists, a sliding detail pane, gauges and graphs for displaying a multitude of product specific datasets, notifications, alerts, a six stop responsive grid, filter/sort functionality, modals, error screens, several navigation options, and tool tips.

Expanded_sticker_sheet_Artboard 5 copy.jpg
Expanded_sticker_sheet_Artboard 5 copy.jpg
Expanded_sticker_sheet_Artboard 6.jpg
Expanded_sticker_sheet_Artboard 6.jpg

In addition to designing the visual treatment for the expanding pattern set, I was also responsible for documenting HPE Helion designs standards in a living styleguide. Through research I decided on Frontify, cloud-based brand management software designed to accomodate growing pattern libraries, collaborative workflows, and painless distribution. Some samples of the documentation can be seen below.

Styleslice1_02.png
styleslice3_02.png
Styleslice2_02.png
Styleslice4_02.png

As a visual designer on the Helion UX team I also designed several shirts, posters, and stickers.

Stackato_Hackathon_Shirt_Mock.jpg