Team
Project Management – 2
User Experience – 1
Design – 1
Development – 4
Partner
Dell Blue Creative
Project Duration
1 year 8 months
Location:
NYC
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.
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.
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 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.