Alight Mobile
My role
Product Designer
Duration
4 months
Tools
Figma
Miro
Team
1 Product Design Director
2 Product Designers
1 UX Researcher
What is Alight?
A company serving over 4,300 global clients, including 70% of the Fortune 100
The Alight Worklife web platform supports 36 million employees and dependents, consolidating HR and benefits into a single portal. This simplifies engagement with health, finances, payroll, well-being, and retirement benefits. The Alight mobile app its a new product that extends these services, offering the full range of benefits right in users’ pockets.
The Problem
With the new design system in place, the Alight mobile app no longer aligns with the company's updated brand and vision
The AWLDS design system embodies the company's new values, mission, and vision, and the main platform, Alight Worklife, has been updated accordingly. However, with the focus on the main platform, the mobile app has lagged behind, leading to an inconsistent experience and a product that no longer aligns with the company's identity.
The Goal
Using AWLDS foundations, we aimed to redesign the mobile app to fully integrate the new design system and close any gaps
The AWLDS team has established a foundation that includes mission, values, principles, brand identity, tone of voice, and basic components like buttons, inputs, and controls. However, not everything was defined, and our goal was to bridge the remaining gaps and create a mobile app that aligns seamlessly with the AWLDS vision.
Constraints
Before starting, we needed to clarify our boundaries
When defining the project scope, the following main constraints were established:
- Align with AWLDS's vision and web platform foundations.
- Maintain current typography sizes and spacing.
- Preserve screen structure and feature flows.
- Avoid major component changes to ensure smooth development.
While some constraints limited optimal solutions for certain components, we secured exceptions by effectively presenting our rationale to key stakeholders.
AWLDS
Our first step was to familiarize ourselves with AWLDS, assess what's defined, and identify the gaps
By conducting a component audit, we compared all components from the current app and AWLDS, identifying how they translated to the new system, recognizing patterns, and determining components that lacked equivalents and needed to be created.
Explorations
After identifying the missing components, we began exploring their transition to AWLDS, holding regular design reviews with the design system team to ensure alignment with the overall vision
We explored various design options based on our interpretation of the system and available references. Starting with small changes,
we then developed alternatives more aligned with the new system’s vision, even if they represented major shifts. By reviewing components
in context rather than isolation, we ensured harmony and consistency.
Once we selected the best options, they were presented to the team for evaluation, final selection, or
further iteration before handing them off to the developers.
Major Changes
Despite the constraint against major component changes, some required adjustments to enhance the overall experience, and we successfully secured exceptions
To enhance the mobile app experience, we made some significant component changes. Some were easily approved with our rationale, others
required testing and data to prove their value, while a few were denied.
One successful approval, after demonstrating its effectiveness, was the quick links.
The quick links section could become too large, making some content harder to access
On landing and deeper pages, the full quick links list is displayed. Depending on the page and client, this section can be too large, sometimes offering little value and pushing content down, making it harder to reach.
After two rounds of testing, we arrived at a solution
To save space, we replaced quick link cards with horizontal chips and conducted usability testing on this approach.
The first round of testing was generally positive, but about 35% of users didn’t notice they could scroll when the chips fit perfectly on the screen.
This challenge was complex due to the variability in chip length and device screen size.
We explored multiple solutions, and decided to address this by adding an animation during loading to visually cue users that the section was scrollable.
The second round of testing showed a reduction in users who missed the horizontal scroll feature.
Accessibility
Along with transitioning the app to AWLDS, a key objective was to address existing accessibility issues
Accessibility became a core value of AWLDS. Fortunately, there were already efforts in place to identify and resolve accessibility issues.
These efforts focused on two main areas: the level access list and dynamic typography.
The app was audited by a11y experts, and we made fixes based on their findings
The experts gave us a list of violations and recommendations.
We prioritized these issues by severity and addressed them with our a11y team.
Some were already fixed, while others needed more effort.
One complex issue was the 401(k) graph, which lacked alt text. Given the difficulty of
conveying all chart data through alt text, we added a table view that describes the
information, making it accessible to screen readers.
Through research and collaboration with the dev team, we defined sizes and behavior for dynamic typography
Few apps support dynamic typography, but by reviewing and testing the available ones, we identified how it works
and common practices.
Since supporting all levels required extensive testing, which the dev team couldn't manage at the time, we grouped some
levels to use the same behavior.
Final Steps
With the final components complete, we shared key templates with the dev team and established guidelines for the design team
Many app screens shared similar layouts but with different content. By providing the dev team with key templates, they could migrate the entire
app without needing mockups for every screen available. For screens that didn't fit a template, the design team created them.
Some key flows were going to be updated using the new design language before and after the app's update launch. To ensure consistency, we created design
guidelines for AWLDS focused on the app, and I reviewed and approved new designs to ensure they aligned with the app's standards.
Results
The collaborative efforts across teams led to significant results in multiple areas
Following the launch of the new version, improvements in user experience, app performance, and targeted promotions have led the app to achieve:
~2M
downloads in the App and Play Store
~1/2M
monthly active users
200%
increase in the use of the app
4.8
star rating, up from 2.3 in the previous version
What I Learned
The importance of having constant communication across teams
- Constant communication between AWLDS, PMs, Devs, and A11y nsured we stayed on track and avoided wasting time on misaligned work.
- Having well-defined foundations and references provided us with a clear direction, making it easier to align our work with the overall vision.
- Some information, like dynamic typography on the design side, remains hard to find, requiring extensive research and some personal interpretation.
