Design system

LendInvest


...

Our starting point

Our design team operated from a few templates and shared sketch files. Typically, a handoff would happen and development would begin from there.

We wondered how we could enable more collaboration between the team. Design wasn't united, and there wasn't a single source of truth that teams could challenge and improve together.

My role as Product Designer was to contribute to the design system, and challenge the process of how we we developed this system together.

Challenges

  • How do we build a tool that will champion our users needs?
  • How do we design and build collaboratively?
  • What could be the ‘source of truth’ for design?
...

Our first failure

We began with documenting our design components before aligning on the purpose of the project. You could say we knew we needed a system, but the team hadn't formalised the true value it would hold just yet.

The process of documentation was unclear and not very collaborative. A lot of rogue-like work was done.

We were definitely progressing, taking a shoddy trello board of components and forming storybook library. This first phase made the system valuable for front-end developers, but it was yet to become useful for others in the team

Vision and strategy

We began asking ourselves what a design system is, what it means and how it would benefit the people who interact with our product. We synthesised this to form our shared vision and strategy.

Our vision: We want to be our customers’ champion, representing their interests and empowering them to do what they do best.

Our strategy: We’re building a design toolkit to help us all better communicate our brand and create seamless, cohesive product experiences.

Once we had a clear vision and strategy, we knew we had to treat the design system as a product in itself.

Atomic design

We were inspired by Brad Frost’s atomic design approach, so we approached a lot of our components this way. Later on, this became a nightmare to maintain. It was a bit ambitious at first for where we were at the time. Through this lesson, we discovered that documentation was our greatest asset in the onboarding of new members to the team.

... ...

Outcomes

  • This project led the tech team to think in new ways about how we build great products that empower our users.
  • We formed a vision
  • Full component documentation
  • Live code in storybook for reuse and improvement
  • New products built faster, and without designers on the team
  • We established weekly guilds continually improving on the design system
...

Learnings

  • For a while the leadership was passed around during my time at LendInvest, each new leader taking it a bit further. With the incredible direction from Marek and Bob, we realised the design system needed to be treated as a product of its own.
  • It takes great leadership to get even the most important projects to become reality.
  • It takes visualisation and clear communication to enable people to share a common goal.
...

Thanks to the dream team.