Design System: RAFI Indices

Building and implementing a class-based design system within an AEM authoring environment.

Client: RAFI Indices, LLC
Project Role: Lead Designer
Team: 1 Lead Designer, 1 AEM Developer, 1 Business Analyst

Product Background

RAFI Indices (a wholly-owned subsidiary of Research Affiliates Global Holdings, LLC) constructs, publishes, and licenses indices based on Research Affiliates insights and strategies. After facing significant challenges in the AEM implementation of Research Affiliate’s own website, the RAFI Indices site was an opportunity to completely redesign the authoring experience for the benefit of both the site’s authors and end-users.

Product Requirements

  • Site authors need flexible components that aren’t tied to a single design and layout.
  • Site authors need to be able to control how layouts adapt between devices.
  • Site authors need to be able to implement basic user interactions without needing to spend time and money on developing new components.

Technical Limitations

  • Site authors don’t have access to source HTML or CSS files; all authoring is done via AEM’s in-browser GUI.
  • A new authoring experience needs to be built in a way that can scale easily in the future. Company resources for future AEM development is limited and costly.

Building the Design System

The core feature driving the authoring environment is a modular design system, implemented via a lightweight CSS framework (see samples below).

The design system is built on an 8pt modular scale, using Google’s Material Design specification as the starting point for its thinking.

Authors have the ability to combine any number of styles in order to create their desired layouts.

1. Design System Samples

The Authoring Experience

1. Insert Text Component & Enter Text

Components are dragged onto the page, and clicking ‘edit’ reveals a dialogue box for the author to enter their content.

2. Text Component Setup

2. Apply Styles

Authors use the ‘Styles’ tab to apply any combination of individual styles to their component.

3a. Text Component Styling

The system includes ‘predictive-text’ for users that already know the classnames they want to use.

3b. Styling with Predictive Text

3. Grid Layouts

Authors have control over grid layouts via the ‘Section’ component, allowing them to select a number of columns and gutter size. They can also choose how they want these columns to scale on devices (shrink or stack). They can use as many section components on a page as they want.

4. Control Columns Layouts with the Section Container

4. Interactive Elements

Selectable interaction classes allow authors to apply hover effects to their components.

5. Control Interactions with Classes

Sample Layouts

These simplicity of the system gives authors a great deal of flexibility. The following layouts were built with a total of four components (Text / Image / Container / Section).

NOTE. Layouts do not use final content and are for illustrative purposes only.

4a. Sample Homepage Prototype
4b2. Additional Sample Page Prototypes