Design System Exploration

Tasks:
Layout/Component Inventory, Design System Evaluation, Visual Design

Which design system to choose?

I was hired to lead an exploratory phase to set a clear direction for the redesign of SCE.com. SCE stakeholders narrowed down the design system choice to two options: IBM Carbon and SAP Fiori. In my exploration, I first inventoried SCE’s layout and component needs. Before my contract, SCE stakeholders had decided that Comed.com offered the most desired design direction due to its Information Architecture, layout, and user benefits. After evaluating SCE’s component needs, I explored Carbon and Fior, SCE’s branding guidelines. I created selected Comed.com pages (home, two landing pages, and a detail page) with each design system’s components, evaluating which design system needed the most rework.

 
 

The Inventory

The current version of SCE.com has approximately 900 pages and, due to multiple redesign efforts, offers 4 different design styles. To start out the inventory, I have created a site map with screenshots of the Home, second, and third-level landing pages.

…enlarged content from the above inventory:

The current site design offers 4 different design styles.

Part of the component/component group inventory.

Part of the layout inventory.

Part of the inventory of content that is currently below the fold.

 

SAP Fiori Design Exploration

Using SAP Fiori’s components and SCE’s brand guidelines, these design comps illustrate the flexibility of Fiori’s component groups.

IBM Carbon Design Exploration

Using IBM Carbon’s components and SCE’s brand guidelines, these design comps illustrate the flexibility of Carbon’s component groups.

 

The Resulting Component/Organism Analysis

SAP Fiori component analysis with Comed.com IA, part one.

SAP Fiori component analysis with Comed.com IA, part two.

SAP Fiori component analysis with Comed.com IA, part three.

IBM Carbon component analysis with Comed.com IA. Carbon clearly lacked the components needed for the redesign.

 

Conclusion

This study showed that SAP Fiori has more components necessary to redesign SCE.com, while IBM Carbon clearly lacks them. In addition, SAP Fiori has far more documented updates to its design system than IBM Carbon. SCE stakeholders were convinced to use Fiori.