Lumin Digital

Overview

Lumin Digital is a digital banking company that has been growing rapidly over the last few years. As a result of that growth, components between design and development were starting to become more and more inconsistent, and there was no way for developers, designers or product managers to determine which version was the most current.

  • Duration

    9 Months

  • Work

    Design System
    Research

Research

In order to understand the unique needs of each team, I interviewed members of the product management, development and design teams to get an understanding of their current process, pain points and what they needed from a design system.

From there, I summarized my findings and provided a list of needs for each team as well as key factors for launching a successful design system at Lumin Digital.

Recommendation

Because the new design system would be replacing the design and development teams' UI kits (both separate at the beginning), I knew that the right solution would require buy-in and collaboration from both sides, and that the new solution had to also work better than the existing system.

Based on my research findings on how new requirements went from design to development, I provided a visual proposal of how each of the teams could work together in a more integrated, collaborative and efficient manner.

Previous design & development process
Proposed design & development process

Inventory & Audit

Once the proposed solution was approved, my next step was to get an inventory of all the components being used in our Sketch Library and the development team's component library. I went through all of our Sketch files saved in Abstract and started to document our components, and then did the same for the development side. Doing this helped me get an understanding of what components were duplicates, unused, or missing.

Using Notion, I created a document that organized our components by category, variations, states, mobile/desktop version, action(s) needed and file location.

Rebuild

Once I had all of our components documented and prioritized, I began to reconcile and update our design components to match what we had in the product and the development team's UI kit.

At the time, our Sketch Library was seldom used, not built for scale and had a lot of components that were out-of-date. As I updated the library, I also built a scalable color, typography and component system that allowed us to make updates to our design system at a much faster pace.

Previous Sketch Library
Updated Sketch Library built for scalability
Example of using master symbols + presets

Launch

After reconciling our Sketch Library with the development team's component library, we were ready to launch the new design system for full use.

Because we were already using Invision for prototyping, review and handoff, Invision DSM made the most sense for us as a low-cost/low-effort solution that allowed designers and developers to collaborate on documentation.

Next Project

Lumin Digital
Ongoing product design

Lumin Digital - Product

Continuous product iteration and innovation for a fintech startup through research, ideation, prototyping and usability testing.