HPE : Design system guidelines (the first generation)
Overview
As the separation from HP Inc. in 2015, Hewlett Packard Enterprise (HPE) was launched and a new brand and new worldwide website was created. All resources for the website were created to be a comprehensive user experience across all HPE web assets. The new guideline serves to foster consistency between designers, developers, copywriters, strategists, and publishers.
The Web Style Guide sections contain styles, patterns, components, and elements that are HPE approved. These styles underpin the HPE.com experience and provide a unified and consistent look and feel for HPE branded websites.
ROLL
UI/Visual design
UX/UI for editor pages
PLATFORM
Website
From A Style Sheet To The First Design Guideline
This design system guideline was created for designers, developers, copywriters, and publishers to build HPE’s whole digital products. The WordPress template was developed based off the UI/UX page design. This template contains centralized document/ guidelines, downloadable resources, codes, and live examples for modules. The template is then used by the design team to generate the final content for all pages.
The challenge
<UX/UI challenge>
The guidelines were for the 4 groups of users such as designers, developers, copy writers and publishers. It was needed so as to find the best usability and crucial information for each user group section.
<Guideline and design system challenge>
-
Terminology and nomenclature must be aligned on all pages.
-
Keep consistency within UI elements such as numbering and lining.
-
Specs such as paddings and margins must keep one core consistent rule or use the same numbers among elements and modules.
-
Live examples of all modules needed to be updated frequently since many modules are omitted from the pages in shorter terms.
-
Frequent communication with other teams, especially pubs in order to acquire updated info and creating demo sessions for their proper usage of this guideline.
As a team, we created audit sessions looking for inconsistencies and if any were found would fix them. I was one of the core designers who was kept aware of all the details and maintained the consistency of the guidelines and correct the information on it.
HPE: Design system guidelines (the second generation)
After we created the first guidelines, there were more demands to document meetings and develop other contents. As the first guideline site was created with WordPress, it wasn't suitable for use with multiple teams and outside agencies adding various information with custom security settings in hand.
Using Confluence, we were tasked to reorganize the contents. The guideline for each element, module and page weren't divided by users. All information was depicted on one page . However, the detail information for specific tasks like writing and publishing were added in different section managed by other groups and departments.
