UI.Movementlabs // Digital Design System
My primary responsibility in this project was to significantly reduce the time to market (TTM). The outcome resulted in a comprehensive design system that instills confidence in designers and developers. This design system serves as the “source of truth” for UI, ensuring consistency and reliability. For example, designers and developers can rely on the fact that an Outline H1 element will always be perfectly typeset across all screen sizes. This empowerment allows them to focus more on problem-solving rather than worrying about concessions and limitations.
The Problem (gifs incoming)
In the fast-paced mortgage industry, our organization confronted a crucial challenge of being proactive rather than reactive on the digital front. We grappled with slow time to market for websites, with a design process that frequently required component redesigns to align with limitations in the digital ecosystem. This situation not only eroded confidence among designers but also strained the developer-designer relationship, resulting in undesirable delays and inefficiencies in website delivery.
We have the problem…Now what?
Discover’yay
During the discovery phase, the team conducted a thorough search on the site to identify inconsistencies in the UI and uncover potential quick wins. In the process, it was observed that there were multiple instances contributing to a single component. This not only hindered the ability to implement site-wide style updates efficiently but also resulted in a fragmented user experience due to the lack of consistency in the UI slower load speeds.
What does this mean?
It’s time to establish the cross-functional team comprising of designers, developers, and stakeholders to work closely together in designing and developing the new solution. With the current audit and discovery phase finishing up, the team realized that it would be best to start building out the UI elements that already exist in the current digital ecosystem while improving it to be more nimble. While this was being developed, our designers begin building out wireframing components that would then get imported into the master Figma asset library to then branch out to other designers.
By stepping back and rewriting code, creating a Figma component library, and syncing with Storybook, we have effectively reduced time to market (TTM) substantially from conception to development. Additionally, our efforts have significantly improved collaboration between developers and designers, making site-wide changes much easier from a developer’s standpoint. We have successfully implemented a modular system that has reduced friction among stakeholders, designers, and developers, fostering a more streamlined and efficient workflow.
Let’s create something great together.
Made with love in NC.
