top of page

Modernizing Legacy Systems Through Design Systems, Code, and Documentation

Creating and Developing a Responsive Design System

Scope

Designed, Developed, and Maintained UI components in a nested design system in React.Js, Hugo.io, Bootstrap 4, Sketch, and Figma.

Role

UX Designer/Developer

​

UX

​​

​

Duration

2 Years

​

​

​

​

Industry

IOT

​​

Fin-Tech
​

​

Overview

As a UX Designer/Developer at Innosphere — subcontracted to Bloomberg BNA (BBNA) — half of my mandate was to contribute to the design, development, and maintenance of a library of UI components leveraging the frontend framework Bootstrap in Sketch, and React.Js. The other half was to develop and implement product documentation through Hugo.io markdown framework and JavaScript. During the refactoring of the codebase of the BBNA Advantage suite of products from a dated legacy system, I directly impacted and influenced the ease of use across all products by implementing atomic design principles. These initiatives began when design deliverables were misaligned between mockup and implementation, and user research exoposed difficulty adjusting to implementations.

The Problems

Joining the BBNA Advantage Suite of Products in March 2019, I joined during the middle of the migration and development, and the success of the project faced several UX issues:

​

  • Legacy Implications: Leveraging ancient software with little UX consideration 

  • Accessibility issues: The majority of the products were inaccessible 

  • Complex and unclear workflows: Workflows were lengthy, error-prone, and included many unnecessary steps

  • Minimal user support: There was no easily accessible location for comprehensive product use documentation

  • Minimal Design Resources: There were no design assets readily available to support the product's future

Core Objectives:

Joining in the middle of a project's development makes for a challenge on its own. For my position to be impactful and bring value to the organization, I prioritized:  

  1. Understanding the technologies used and the forecast of the products 

  2. Conduct accessibility audits on existing systems to highlight areas of inaccessible components

  3. Create user archetypes and user journey maps to highlight difficult areas of workflows
  4. Advocate for enhanced user support through the creation of comprehensive product usage documentation
  5. Develop and Create Design Assets in a flushed out design system
The Approach
Objective 1: Understand the Technologies

The Challenge: Development teams were in the process of migrating content from legacy code and systems to modern code and systems

My Actions

  • Conducted stakeholder interviews across departments

  • Engaged in respective technology related courses to further self educate outside of working capacities

  • Produced internal personas to identify cross-functioning teams​

  • Established cross departmental relationships 

Objective Results:

Through strategic communication, I was able to establish an effective understanding of the direction the products were taking in migrating technologies and aligning myself to better fit into the process.

Objective 2: Conduct Accessibility Audits

The Challenge: Initial observation of the suite of products revealed many WCAG2.0 AA accessibility issues

My Actions

  • Implemented accessibility tools - Google's lighthouse and WAVE to assist in identifying accessibility compliance issues

  • Produced comprehensive visual and textual reports highlighting areas of greatest accessibility concerns

  • Created and conducted structured keyboard navigation tests to ensure tab order and focus states were suitable

  • Ensured typography hierarchy and HTML structures were accurate to support screen readers

Objective Results:

Convinced stakeholders that developing and designing with accessibility in mind is developing and designing for everyone and supporting an increased user base.

Objective 3: Create User Archetypes and User Journey Maps

The Challenge: Initial usability tests exposed lengthy, complex, error prone workflows 

My Actions

  • Created user archetypes to identify cross functioning roles in a workflow

  • Produced user journey maps aligned with archetypes to highlight problem areas 

  • Synthesized findings and presented recommendations to key stakeholders

Objective Results:

Gained ownership over the strategic redesign of product onboarding workflows and convinced stakeholders to scope the redesign into the products development.

Objective 4: Advocate for Enhanced User Support

The Challenge: User feedback was continuously revealing long term users were struggling to easily adjust to research backed changes implemented into the product.

My Actions

  • Aligned user feedback with product documentation and release cycles to ensure users can easily access product use guidance

  • Championed user frustrations by connecting with stakeholders and convincing them to improve user support

  • Strategically implemented help documentation links throughout the products

  • Developed dynamic components in documentation that significantly improved documentation navigation

Objective Results:

Product documentation and user support was embedded throughout the various products in an accessible and easy to access method. 

Objective 5: Develop and Create Design Assets

The Challenge: Cross-functional teams were active in developing the Bootstrap-based design system but needed increased development support to catch up to project timelines.

My Actions

  • Developed and maintained various accessible UI components in React.Js and Git repositories

  • Maintained component documentation in Confluence

  • Created design tokens (colors, typography, spacing) and integrated them across React components and Sketch libraries alike

  • Collaborated with front end engineers to ensure pixel-perfect implementation and consistent, holsitic user experience

  • Prototyped new UI patterns while leveraging bootstrap guidelines for usability testing and design validation

Objective Results:

My efforts brought the design system up to speed with project requirements ensuring prototypes would be fully functional and leveraged in user testing prior to implementation.

The Impact & Results
Immediate Impacts:

  • Long term design assets: A fully functional design system in Sketch and React enabled scalable and holistic improvements to all Advantage products

  • Improved SOP: The UX team was integrated in every conversation of product development where changes were considered​

  • User driven impact: Customer feedback was directly implemented into product direction

  • Technical documentation: Comprehensive documentation on UI components ensured widespread knowledge of components and their usage 

Long-term Impacts:

  • Unified vision: The design system ensured the future of a holistic and unified vision across multiple interconnected products

  • Scalability: Foundations of the design system supported continuous development and improvements

  • User focused culture: ​User research continues to be the driving force behind decision making processes

Reflections
Build a stronger understanding of design systems

Since my role I have a much stronger understanding of design systems. In this role I found I was often flying by the seam of my pants and learning on the go. 

Ask more questions

The tax world is very complex with many mathematic equations that are imperative to the success of a financial institution. By asking more questions and gaining a stronger understanding of the tax operations in place - I believe that in turn I would be able to better impact a design. 

Learn as much as you can

Transitioning to a new development language requires a sharp learning curve. By engaging in out-of-work learning opportunities, I believe I would learn quicker and contribute more to the success of the project. 

Conclusion

Working on the Advantage suite of products opened the doors of proper UX process and full fledged design systems to me. Through this project, I was able to find the core of the two things that I love: software development, and people. I have since continued to pursue UX as a UX professional and bring the value UX has to organizations through education and execution. 

​

The creation of the design system that BBNA uses regularly led to organizational restructuring and the shrinking UX team size as the design system was flushed out and easy enough to use that only few members were required to design.

 

Developing the components provided me with foundational understanding of React and seeing how updates cascades throughout websites to ensure holistic updates which in turn reduces development churn and maintains a consistent experience throughout. 

​

Lastly, by introducing user centred processes and taking the ownership of product usage documentation, I was exposed to the importance of supporting users in processes that - regardless of their knowledge - might prove difficult to understand.

bottom of page