Role: Lead Designer
Tools: Figma - Adobe XD - Balsamiq
Company: Economic Research Institute
Project Duration: Version 2: Feb 2018 - Dec 2019, Version 3: Nov 2023 - Ongoing
Overview
ERI’s early design system was established decades ago when their software was still in DVD format. At the time this system had proven its value in building numerous software products for the Economic Research institute.
As digital software shifted into web and cloud applications, those same software products were ported over as web applications though the design system remained the same.
Over time, those earlier guidelines and documentation became outdated, causing inefficiencies for the product managers and developers. The company faced challenges in keeping up with the evolving design system, and eventually realized the need for a comprehensive overhaul.
This was the time I was hired as a User Experience Designer and my first task was a complete overhaul of the legacy design system and create a new, much more improved system in its place.
As digital software shifted into web and cloud applications, those same software products were ported over as web applications though the design system remained the same.
Over time, those earlier guidelines and documentation became outdated, causing inefficiencies for the product managers and developers. The company faced challenges in keeping up with the evolving design system, and eventually realized the need for a comprehensive overhaul.
This was the time I was hired as a User Experience Designer and my first task was a complete overhaul of the legacy design system and create a new, much more improved system in its place.
This case study explores the transformation of legacy documentation into a dynamic resource, meeting the needs of UX/UI designers and developers while laying the groundwork for ongoing growth and innovation.
Atoms
Molecules
Organisms
Template
Page
The above images show a small sample of how the interface components are organized using Atomic Design Principles for version 3
Goals
1. Replace outdated examples and documentation
I audited documentation and user experience of the current design system and interface, prioritized components for updates, and established a clear structure for each. The aim was to provide comprehensive guidelines that capture all states and variations for an improved user experience.
I audited documentation and user experience of the current design system and interface, prioritized components for updates, and established a clear structure for each. The aim was to provide comprehensive guidelines that capture all states and variations for an improved user experience.
2. Gather insights from current users and initiate internal discussions
Initiated discussions with our users (prioritizing our power users) product managers, data scientists and developers, gathering insights on what could enhance our guidelines. Understanding their practical needs, I aimed to provide more relevant examples, ensuring our guidelines meet their expectations effectively.
Initiated discussions with our users (prioritizing our power users) product managers, data scientists and developers, gathering insights on what could enhance our guidelines. Understanding their practical needs, I aimed to provide more relevant examples, ensuring our guidelines meet their expectations effectively.
3. Streamline collaboration between designers and developers
Drop outdated legacy parameters, work with developers to align terminology and guarantee clarity and consistency between design and development. Establish efforts that result in the creation of a dynamic system for ongoing updates and maintenance, eliminating legacy and unclear decisions to improved efficiency and communication.
Drop outdated legacy parameters, work with developers to align terminology and guarantee clarity and consistency between design and development. Establish efforts that result in the creation of a dynamic system for ongoing updates and maintenance, eliminating legacy and unclear decisions to improved efficiency and communication.
4. Build a unified, scalable design system
Utilize atomic design principles for easier cross-functional comprehension and a seamless integration for new features. Prioritize documentation upkeep and dedicate time for consistent updates. Regularly gather input through surveys, user interviews, and internal discussions.
Modal Interface - Circa 2017
Version 2 Modal Interface - 2019
The above image on the left shows the modal interface ported from the DVD version of the software (circa 2017) while the above image on the right shows version 2 of the modal interface (2019) created using the first design system I built for ERI
Updated Modal Interface - 2023
Challenges
1. Outdated technology and infrastructure did not easily support modern design systems. Working within constraints imposed by existing systems, made it challenging to implement new design standards.
2. Internal resistance to change especially when it comes to disrupting existing legacy workflows and development practices.
3. User Needs vs. Business Requirements. Competing priorities made it difficult to procure necessary resources to establish a new design system.
I overcame these challenges by viewing version 2 as a proof of concept. I focused on what users wanted, developed rapport with the product managers and developers and made sure we were all on the same page for what I was trying accomplish. My presentation and persuasion skills vastly improved and even though I had to work within the constraints of the legacy system, I was able to implement priority design guidelines enough to prove that a user-centered approach to creating a design system warrants a larger slice of the pie.
Main Interface - Circa 2017
Main Interface Version 2 - 2019
The above image on the left shows the main interface as ported from the DVD software (circa 2017) while the above image on the right shows version 2 of the main interface (2019)
Current iteration of Version 3 (2024) created on Figma
Feedback, Results, and Impact
Response to version 2 of the design system was positive. Clients and users expressed their satisfaction with the new user interface, specifically its visual fidelity and ease of use.
The new interface resulted in new customers signing up for our software, there was also an increase in current customers wanting to upgrade their experience mainly because they have found features that were previously not highlighted in the past interface.
The revamp of the design system led to the increased importance of user experience research and design and the company providing more resources to expand the design team.
By 2023, I was able to grow our product design team by 4 (2 seniors, 1 mid, and 1 junior). Steps to scale up the design system ramped up and Version 3 is now on the way in order to accommodate new features we had planned for the future.
An early glimpse of how Version 3's design system is organized and shared between developers, designers, and product managers. As the design system becomes more robust, documentation and use cases will be added and continually updated
Next Steps
With the importance of a modern design system established, we plan on building out version 3 into a more robust design system from the ground up and do away with legacy parameters that held back version 2’s potential.
We plan on conducting a more structured research workflow that includes different phases of user interviews, more internal discussions, and bringing in other ERI software products up to the same standard as the main assessors.