Documentation to foster cohesion between AEM authors, developers, marketing teams and product designers
The Project
Role | Responsibility
Title: Product Designer II
Develop a documentation system that can be used by cross-functional teams to create unity in Boost Mobile’s customer facing webpage.
Tools
Figma, Figma Slides, Figjam, Google Meet, Jira
Scope
Competitor research, cross functional team interviews, design standard research, user testing, design system influence, component spec development and workshop development
About Boost Mobile
The fourth largest wireless carrier, Boost Mobile is an Echostar company which has 6,700 employees globally with roughly 43,000 visitors daily to their website, www.boostmobile.com.
The Problem
In July 2024, Boost Mobile and it’s postpaid spin-off Boost Infinite unified under the single rebrand: Boost Mobile. With this merging, the user’s experience on the website suffered from a lack of alignment across design and development teams, resulting in fragmented user flows and inconsistent patterns.
The Style Guide initiative is to create a rule set with examples that can be used across cross-functional teams (product designers, marketing, AEM authors and developers) to gradually launch and re-work a cohesive, considered and user experience driven website, intended to foster trust and investment with our users.
How Can We Measure Success?
We will first attend to the user feedback gained from UXR regarding UI and user comprehension.
We will second attend to the internal pain-points across teams with information gathered in a cross-functional workshop.
We will see user testing improvements including but not limited to retention on website and reduced cart drop-off.
Discover + Define
I began with competitive research, attempting to find public solutions similar to our needs, greater than a design system, but a system of rules that extent to tone, content and digital brand direction.
I used Adobe’s Style Guide, Salesforce’s design system documentation, and our own Boost Brand Guidelines and Boost Design System to use as an inspiration to pull from.
I first organized a structure for how I would build the guide, grandly organized into subsections: The Brand, The Look, The Function and The Substance. I opted to build the guide within Figma Slides- that way the documentation could be shared in PDF format with cross functional teams, in addition to having live links to our design system for those needing it.
Applying UXR and internal workshops
Identifying the biggest impacts with least amount of effort
From our UXR team, we started with the user feedback regarding branding, typography, color and clutter. The product team and myself also planned and ran a cross-functional team workshop to discuss what we (internally) felt were the biggest problems with our existing site. From here, I was able to identify where the rules from the style guide first need to be implemented in order to create the biggest impact.
Title components as defined by the style guide
Documentation Applied
We identified too much variety in typography to be a large pain point:
Alongside marketing, we defined our approved typography instances and their specific usages, and I added them to the style guide for reference and to the design system using a context-specific organization structure.
From here, I was able to break down primary components that are primary typography (titles, subtitles, promo banners) and define those components down to the detailed specifics.
Once I had a spec sheet on a component, I shared it with the authoring team and dev team, discussing what needs to be fixed (colorways, letter spacing, paragraph spacing, style) by the dev team, and what can be editable (titles, restricted sizes) by the authoring team.
Page from the Digital Product Style Guide regarding typography used, and parameters for usage.
Spec sheet from the style guide provided to Dev and Authoring for consistent components site-wide.
Guideline Rules Applied
Prior to style guide defined typography
After typography guidelines have been defined and put into action. Note consistent letter spacing, size and height in addition to accessibility standards.
