Design System Addition

Chapter Component

Overview

The Problem

For the Long Form Content Hub Project, we needed a way to expose the content within an article series. Users typically access SAP news articles from organic search and are not able to easily navigate between related content in the article series. Users are not aware of the additional articles within the series and therefore leave the site.

My role
Design Lead for creating this new AEM navigational component.

Technical Requirements

Long form content migration from the Insights platform to AEM platform.
Ability to navigate between articles + scroll very long articles
Change backend SEO, for example: Text is H4 but want SEO to be H3
Account for translation and syndication: language character counts limits

My Responsibilities

- - Discovery and Research
  - Information Architecture and Wireframes
  - Branding reviews/sign off
  - Hi-fidelity mockups
    - All breakpoints including mobile
  - IT handoff of designs
    - Create detailed specifications for components
    - Monitor JIRA and Figma comments
  - Final UAT (User Acceptance Testing)

The Design Process

Step 1: Discovery

We began this phase by assembling content, and analyzing the constraints. Some article titles were very short, some were very long and we need to account for german language translation which often times will double the character count.

Discovery also included a competitive analysis of enterprise software companies who feature article series, to stay abreast of any industry design trends or patterns.

Step 2: Wireframes

The wireframes were used as a tool to socialize and discuss the navigation needs and how to address this in the various responsive views. Questions for IT:

What grid variations are available to us?

What content layouts are possible?

Can we create a component to be used across any AEM page, or will this need to be its own article page template?

Step 3: Mid-Fidelity Mockups

This was the exploration phase and process of elimination phase. Mid-fidelity mockups were meant to quickly pull together visual concepts using a variation in our current grid system. For example, as shown below we could explore layout of text in the different breakpoints.

↳ Considering the long character counts of many of the articles, the horizontal formatting (dark background) was not a feasible option.

Step 4: Hi-Fidelity Mockups + Interaction Design

The Hi-Fidelity Mockups were pixel perfect within the grid of each breakpoint.

Interaction design is a key element to consider with navigation components since it directly affects how the users engage with the website.

Elements we had to account for:

Logical placement
Responsive behavior
Sticky navigation
Dropdown interaction
Active, in-active and hover state of the navigation entries
Scroll bar

By prioritizing user preferences, interaction design enhances usability, reduces friction and fosters positive user interactions leading to improved satisfaction and retention.

Step 5: Implementation & UAT

Meetings were scheduled with the product lead and assigned IT developer to review and hand over the final development specifications.

Design System Documentation

Frontify is where the SAP Digital Design system is documented. It was created to guide UX designers, developers and content authors to adhere to SAP brand and web standards.  The Frontify documention (or product requirements document) was updated once the final mockups were approved by all stakeholders. This documention was then delivered to IT,

Navigation_Chapters_sapcom.pdf

Blueprint Documentation

The blueprints offer Digital Experience guidance for everyone who builds and maintains AEM pages on SAP.com. They also offer content and IA+UX guidance for the content editors who build pages in AEM.

Frontify-Blueprint-screencapture-sap-frontify-document-222643-2024-03-19-10_33_05.pdf

☀️ The Result

This Chapter Component UX enhancement reduced bounce rate, improved SEO and increased user retention. This improvement led to increased page views and interactions.

Reflection

An anchor navigation component was also developed with this project, but was considered a "nice to have".

A SUS questionairre (Likert scale) would have given us important user feedback about the anchor navigation:

Would a progress bar helpful?
Is the back to top link item useful?

A Moderated test or Beta test would give us more feedback about how users feel about the Chapter component's ease of use.

Additional use cases

To allow for more flexiblity for content managers working in AEM, the component will also have the ability to switch out content within the same component.

The Chapter component was also used within the SAP Sapphire News Guide as well!
See my SAP Sapphire Project for more info.

Page updated

Google Sites

Report abuse