Dell Technologies

Component Design System

Project Summary

The team at Rebellion were asked to participate in a project focusing on full audit and review of the AEM Component Library for DellEMC.com and DellTechnologies.com.

The Challenge

The challenge with this project was conducting a full inventory of the existing component system, identify overlaps, consolidate components, and create a consistent, robust library of components that is easy for authors to use and allows for future updates.

My Role

The team at Rebellion were asked to participate in a project focusing on full audit and review of the AEM Component Library for DellEMC.com and DellTechnologies.com.

Team

Project Management – 2
User Experience – 1
Design – 1
Development – 4

Partner

Dell Blue Creative

Project Duration

1 year 8 months

Location:

NYC

Responsibilities

Component Audit
Wireframes
Component Specs
QA

Tools

Axure RP
Dropbox
Excel/Google Sheets

UX Design Process

The focus was to streamline and reorganize the overall set of components and views available to authors in AEM in order to simplify and prepare for the integration of Dell content and Dell authors to Dell EMC.

Phase 1 - Discovery & Define

The team at Rebellion conducted stakeholder meetings and breakout sessions with Dell to get a better understanding of how authors where using the components within Adobe Experience Manager (AEM). The team gathered requirements and did an analysis based on the audit data to create a new proposed set of component and views.

Component Library Audit

During the component audit, we identified and catalogued all existing component and views across Dell EMC and Dell Technologies.

We determined the frequency of use for each component and their views, then found examples throughout existing pages and took screenshots of each component view at various breakpoints.

Example of the component audit list
Example of the component reorganization list

Component Reorganization

We aligned a new component organization to more recognizable user interface nomenclature vs. existing data structure model and re-mapped current components and views to the new organization.

We then compiled any additional components or views into one comprehensive list. Validating, grouping and categorization were based on component types and usage on various pages.

We held day-to-day working sessions with the team at Dell to review the complete list of views with the Dell EMC brand and IT teams and decide what can be kept, updated, consolidated or decommissioned. We also proposed replacement components for decommissioned ones if needed.

As a result of this audit we found:

33

Total components identified

170

Combine component views

Phase 2 - Design Process

Once the audit was complete, we moved into Phase 2 of the project, redesigning core components that drive a majority of the pages built within AEM. A roadmap was created to design and develop each component of a bi-weekly basis.

Approach & Process

We started with identifying the core components that we could label as the foundation of this design system. We define the foundational elements that span most components, such as typography, spacing, color.

We worked to simplify the authoring experience by:

  • Using an intuitive component and view naming convention
  • Reducing the number of views by adding authoring options
  • Created a rule-based structure so authors wouldn’t be distracted with stylistic choices

Throughout the agile process with Dell, we worked to finalize requirements for each component and develop a governance model to manage on-going component updates.

Foundation Prioritization

We created a consistent global, base font and color system, defining rules for how font sizes are influenced by the layout and number of columns in a row.

Typography

The font system was established to maintain a visual hierarchy and to retain text legibility within various column widths. This system sets the base title font size and line height and adjusts that size as the column width changes.

Text Spacing

Vertical spacing between text elements (no including labels) is equal to the title font size. The padding on the right side and bottom (when on a card) is based on the title font size plus six. When a component is center justified, the same padding is used on the opposite side.

Grids

The responsive grid-view has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window. Six views were defined for the system:

Desktop | XX-Large | 1600px

Desktop | X-Large | 1280px

Tablet | Large | 980px

Tablet | Medium | 768px

Mobile | Small | 640px

Mobile | X-Small | 320px

Column Controls

Column controls works in concert with the responsive grid. It allows for the formatting of the page layout. Text sizing, images and spacing adhere to the foundation guidelines based on the number of columns they span and the breakpoint of the browser window.

Primary Components - Features & Views

The team decided to focus on Text, Promo and List as our first set of core components since they would be the foundation for many of the other content elements on the site.

Text

The Text component is a core component that incorporates the use of an eyebrow (label), headline, body text, an image and optional CTA. This component is the backbone for most components within the foundation.

Promo

The Promo is a self-contained content container. It has fields for headlines, body text, images and CTA’s. It has options for a variety of layouts. It can be used as a single item or in a list of multiple items. As the name implies, the promo can be used to promote content on other pages or used as a stand-alone piece of content.

List

The List component is another core component used for highlighting small chunks of digestible information at a glance. This component has fields for an icon, eyebrow, headlines, body text, text link.

Both teams spent weeks reviewing, fine-tuning and testing these core components. Once we were ready to lock down the core components, we moved towards developing the complete list of components in tiers which includes:

Tier 1

Hero
Foundation components (text, promo, lists)
Layout
Image
CTA

Tier 2

Breadcrumb
Carousel
Collapse
Contact
Subnav
Tabs
Dashboard

Tier 3

Calendar
Card control
Company Info
Dashboard
Divider
Image Gallery
Quote

Development & Testing

We worked with closely with Dell’s Dev team prioritize critical features and development efforts including front-end coding, back-end systems coding and integration of all components based on the UX and Design Style Guide that was created.

We’ve conducted a solid QA test for each component in the responsive states that were defined in our documents. In our testing we:

  • Cross-browser test new designs to ensure proper display and functionality
  • Validate/invalidate hypotheses and develop new hypotheses for testing
  • Testing for device experience (Mobile, Tablet, Desktop)

Design in Real-time

With all the components now complete, authors can now build full pages minimal efforts and less working about design. Below are components used to build a product page on dellemc.com

Component - Hero

Features:
Eyebrow
Headline
Body text

Component - Text

Features:
Headline
Body text
Aligned - centered

Component - Text & Promo

Text Features:
Headline
Body text
Aligned - centered

Promo Card Features:
Image (on top)
Eyebrow
Headline
Body text
CTA

Component - Text & List

Text Features:
Headline
Body text
Aligned - centered

List Features:
Icon (on top)
Headline
Body text
Text link
Aligned - centered

The full page can be viewed on dellemc.com

The Results

With the design and development of a revamped component design system, web producers and authors were able to create cleaner, more consistent designed web pages on Dell EMC/Dell Technologies.

Re-organization highlights

  • Reduced components from ~33 to ~21
  • Removed approximately 80 views out of a total of ~170
  • Introduced “Foundation Components” such as – Layout, Hero, List, Promo and Text
  • Mapped existing component/views to the new components

The design system was then implemented for all of Dell Technology and DellEMC sites. Developers now spend less time fixing avoidable issues with AEM.

Final Thoughts

This project allowed me to approach design systems in a new way. A lot went into this project and it took all hands on deck to make it come alive.

I can honestly say, I’m very proud of the work that was done, the trust the creative partners had in my contribution to this project, and the true collaborative effort between Rebellion and Dell.