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, Figjam, Google Meet, Jira, Figma Slides
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?
SaaS needs to be oversee app activity with ability to intervene as necessary.
Hierarchy and structure needs to support the bottom up user flow.
Product feels intuitive and human-centered, as the product is now closer connected with the provider and client users.
Discover + Define
In order to determine how to restructure the architecture of The Portal, I needed a clear idea of the primary goals and integrations of the three products. Below, the top flow was the user journey for Haled, of note the flow begins and ends with the SaaS product, and the apps serve as supplemental to that service.
In the bottom flow, you can clearly see that most of the user journey happens in the apps, with primarily record keeping at the end of the user’s journey. Although there was still a need for the SaaS users to be able to edit and manage all stages of the fulfillment process, the ideal appointment fulfillment flow would be that the SaaS user never does a thing.
Developing for a new flow
Bringing humanity to the language, hierarchy and organization for an optimal function and flow.
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.”