Upgraded Legacy Design System

Project Introduction:

It is widely acknowledged that an outdated design system can have a significant impact on a company like PenFed. Their lack of a solid design foundation has resulted in inconsistent user interfaces, which, in turn, has taken a toll on their branding, user experience, and market standing. This has led to a cascade of issues, including development roadblocks, pesky UI bugs, slower project completions, and higher labor costs.

Business Challenge:

The challenge was clear: PenFed needed a serious makeover. Their lack of a solid design foundation was holding them back big time. With inconsistent interfaces causing chaos, they were falling behind the competition. Something had to change, and fast.

Our Goal:

In such situations, the solution is crystal clear: Establishing a robust design standard can work wonders. It's not just about keeping up with the competition; it's about setting a new standard. We aim to boost PenFed's competitiveness, quicken project timelines, and, most importantly, create an experience that users will love.

My Contribution

In this project, I led the charge alongside two fellow designers to overhaul our existing design system. My key roles included:

• Research Lead: Gathering requirements for our initial release through in-depth research.

• Design Expert: Crafting foundational components with creativity and precision.

• Usability Tester: Ensuring our designs were user-friendly through rigorous testing.

Solution Outcome:

With a newly implemented design system specifically tailored to PenFed's needs, we are anticipating a significant and transformative change. This updated foundation will not only enhance efficiency but also elevate the user experience across all platforms. Bid farewell to wasted hours spent on bug fixes and welcome quicker project deliveries. The key is to align our efforts with the organization's overall objectives.

• Design System Glow-Up: We revamped the outdated system, aligning it with PenFed's style while improving functionality across platforms. The result? A 21% boost in brand appeal and enhanced usability.

• Speedy Design Times: Simplifying design rules led to a 40% reduction in project turnaround, saving 36% of our time. More efficient workflows meant more time for creativity.

• Smooth Development Ride: Mobile optimization and streamlined components reduced bounce rates by 15% and increased mobile engagement by 32%. Additionally, technical enhancements slashed tech-related issues by 25%.

The Process of Revamping the Legacy Design System

1. System Examination and Analysis: We began by thoroughly examining PenFed's current design system, organizing it into clear catalogs, and identifying components that required updates to meet modern UX standards. We also analyzed ongoing projects to identify areas for improvement, breaking down pages into smaller components to address the shortcomings of the outdated system.

2. Redesign with Team Collaboration: We brought the whole team on board to brainstorm fresh ideas for transforming PenFed's design system. Armed with atomic design principles, we revamped each component, ensuring they were both sturdy and stylish.

3. Implementation and Education: We rolled out the new design system, ensuring a smooth transition by providing comprehensive training to PenFed's UX, Dev, and business teams. Equipped with a deep understanding of the new system, they were able to work smarter, collaborate better, and deliver a seamless user experience every time.

1.Research and Audit

Start from the legacy Design System 1.0

While reviewing the legacy design library, we noticed that the Design system foundations were lacking from the legacy library. To address this, we dedicated time to incorporate our color systems, brand logos, iconography, typography, grid systems, and spacing scales. Shut out to our Marketing team who played a crucial role in helping us finalize color schemes and brand logos.

💡 Key Findings

• Inconsistency: The audit uncovered inconsistencies in the design system, such as varying styles, colors, and layouts across different components and pages. This lack of consistency can lead to a fragmented user experience and confusion for users.

• Accessibility Issues: The audit identified accessibility issues in the design system, such as poor color contrast ratios and lack of consideration for users with visual impairments. Addressing these issues is crucial to ensure inclusivity and compliance with accessibility standards.

• Lack of Documentation: The audit revealed a lack of comprehensive documentation for the design system, making it difficult for designers and developers to understand and implement the components consistently.

• Outdated Design Patterns: The audit identified outdated design patterns, which can lead to a dated and inconsistent user experience. Updating these patterns will help modernize the design system and improve user satisfaction. </aside>

2.2 Base Components

Work smart, not harder. That's the approach we took here by visiting ongoing redesign projects and breaking down the page into base components. This enabled us to catalog them, as the previous library was lacking in this aspect.

2. Ideate and Design

Based on our findings from the Research and Audit phase, it's evident that the inconsistency and absence of UX standards in the legacy component library are causing issues in ongoing projects and production environments. Our next step involves evaluating and rectifying these inconsistencies and usability issues by developing components that adhere to UX design and accessibility standards.👇

2.1 Design System Foundation

The previous library lacked design system foundations. We needed to allocate time to add our color systems, brand logos, iconography, typography, grid systems, and spacing scales.

2.3 Functional Components

Next, we examined our functional components, such as the account cards on the account summary or transaction table from the recently designed account details page. Creating these functional components promotes reusability and helps reduce technical debt.

2.4 Patterns and Page Standards

The redesign required the greater UX team and the dev teams to learn a new design language. By establishing new patterns and page standards, we can easily adapt to the new language and effectively implement it in our projects, while maintaining a cohesive UI and user experience.

The design system cohort has created examples for pages at every stage of a flow, as well as stand-alone screens. We have analyzed the padding for each page and provided examples of how the padding would appear for desktop and mobile devices. This can serve as a reference point for designers and the dev team.

2.5 Accessibility

PenFed members are mostly retired veterans, so it's important that our design and member experience are easy to use. We make sure that our colors have good contrast or offer alternative colors for different backgrounds to meet WCAG compliance. We also check that our components work well with accessibility tools.

To ensure a smooth adoption of the updated design system, we provided comprehensive training to the UX, Dev, and business teams. This empowered them with a deep understanding of the new system, resulting in increased efficiency, improved collaboration, and a unified user experience across all projects.

3. Implementation

Implementation Challenges:

• Change Pushback: Some folks weren't thrilled about swapping to the new system. We smoothed things over by laying out all the benefits and giving plenty of training.

• Tech Hurdles: The Dev gang hit some snags with compatibility and platform limits. We lent a hand with tech know-how and guidance.

• Communication Snags: Mixing up lingo between UX and Dev slowed us down a bit. We cleared things up with better communication and defining our terms.

• Tight Resources: With limited time and funds, we had to get creative. We squeezed every drop of value out of what we had.

• Old Meets New: Blending our shiny new system with the old setup took some finessing. We teamed up with Dev to make sure everything played nice together.

Take a look at Transformation

💡 As a team, we are making great progress in revamping the entire design system. Here are some of the tasks we have completed. Please note that this project is a team effort, and my role involves both taking the lead and collaborating with my fellow teammates.

Reflection, and Next Steps

Although the project successfully addressed the initial challenges and achieved our set goals, there are valuable reflections and lessons learned that can guide future improvements. Moving forward, our focus is on:

• Continuous Improvement: Ongoing refinement and optimization of the design system based on user feedback and evolving needs.

• Expanded Adoption: Encouraging broader adoption of the design system across all departments to maximize its impact and benefits.

• Future Innovation: Exploring innovative design solutions and technologies to further enhance PenFed's digital experience and maintain competitiveness in the market.

• Education: Conduct workshops with the UX and development teams to promote and educate about the design system.