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
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.
- 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.
- 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.
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. Apply Styles
Authors use the ‘Styles’ tab to apply any combination of individual styles to their component.
The system includes ‘predictive-text’ for users that already know the classnames they want to use.
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. Interactive Elements
Selectable interaction classes allow authors to apply hover effects to their components.
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.