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
In the below image, the reconsidered Dashboard, per the new user. I retained the basic structure of the product, as much of the data collection remained the same through the transition to ensure a rapid and efficient change on the back end. In order to ease the UI rebrand, I provided a detailed Google Sheet of all the exact color code and typography changes so the engineers would be able to simply update the interface.
For our new user in the beauty industry, I wanted to build a product that created ease and familiarity, helping the flow of intuition as they move through the complex data storage and management system.
Widgets become simple and graphic, displaying only the pertinent information per company or independent shop.
I added an interactive filtering calendar. As the primary organization system is appointments, I wanted the user to be able to easily view the week and upcoming appointments without less clicks.
Clearer and cleaner presentation of data.
The Design System
Dubbed “Twiggy” for it’s fashionable color palette handed off by myMedSpa’s graphic designer, this robust and highly organized 20-page design system was the mother-load of all things UI across The Portal, but also into the Client and Provider apps for brand continuity. All fonts and color way combinations were accessibility tested by myself. This design system was the first thing I built for Haled and adjusted to fit myMedSpa, as I understood the importance of consistency across products and having a genuinely inspiring tool kit.
Robust design system has variants of default, active and disabled states for all components in addition to special instances.
Reflection
Main Challenge
Market Profile, accessible through the profile icon in the top right. From here a user can find all associated services, providers and contact information.
Moving quickly while thinking holistically | Haled/myMedSpa made the transition quickly and needed to get high-fidelity wireframes and prototypes to marketing quickly. I pride myself on being a collaborative worker with an eye on the big picture, and understanding that I can design much quicker than the engineers can develop. Simultaneously with my redesign, I updated the design system and created a spreadsheet of all color way/typography updates. This process slowed the design process down a little, but rapidly sped up the development flow and holistically made our team and process more connected and supported.
Don’t take my word for it…
“I worked with Leah at Haled, and I cannot recommend her highly enough! Her designs were always on point and she was able to solve problems with UX that confounded me as an engineer. Additionally, the speed with which she was able to work always impressed me.
Perhaps more importantly is how great of a teammate she was. She took pride in her designs, but not to the point of ego. If things needed to change, she understood where to walk the line in what could change and what was essential for the user experience. She was always professional and communicative and enjoyed working with the engineering team who was implementing her designs.”