Hello Divorce Design System

As part of a dynamic and fast-paced startup, there was a need for quick, elegant, and consistent design library to let stakeholders rapidly develop conversion test pages, ensured brand consistency, and enhanced collaboration across a dynamic, multi-disciplinary team.

In Summary

MY ROLE

UX/UI Designer

MY CONTRIBUTIONS

  • Researched

  • Strategized design and process

  • Wireframing and protoyping

  • Built a design library for rapid design

  • Collaborated with management and engineering

  • Iterated hi-fidelity designs to executives

BACKGROUND

When I started at Hello Divorce, the team wanted to use Figma but there was no library. Every time I needed to design mockups, wireframes, or hi-fidelity designs I had to build all the components from scratch. I wanted pixel-perfect consistency and improved design velocity.

MY CONTRIBUTIONS

Established a cohesive and scalable system for Hello Divorce’s visual language. Standardized the digital product and streamlined the design process and empowered other teams to work faster.

TIMELINE

Ongoing living design system.

“Where can I find our design definitions? Like typography and breakpoints and things like that?”

This was the first question I asked after I was onboarded at Hello Divorce and the answer I received was a little surprising.

“Oh I think there’s some screenshots on the Google Drive, you should be able to find everything if you poke around!”

I did poke around! And I was able to find PDFs of the definitions.

I knew I had to improve the implementation. I knew I would get huge improvements of cohesive, rapid, and collaborative design work if I was able to build out the design definitions in Figma’s powerful ecosystem and leverage the styles and components.

Content assets before I standardized the design language.

My Process

When I first kicked off this project, I was also working on designing and leading a project to implement an extremely complicated child support calculator, so I knew I had to manage my time effectively. I built out my a plan:

  1. Gather all available resources

  2. Implement initial resources as styles and components in Figma

  3. Get feedback from my mentors about the design

  4. Collaborate to share the designs and handoff to developers

  5. Enhance ecosystem with more design components thanks to collaboration requests

  6. Continue to iterate

  7. And document through it all!

Challenges

There were a few challenges I faced as I built out the design system:

  • I was leading the Child Support Calculator which needed its own components and features as well as a complicated information architecture design.

  • We were planning for a website migration from BigCommerce to Hubspot and leadership requested a new UI and Content refresh for the migration.

  • It was hard to receive actionable feedback. My colleagues at the time didn’t share a design background and were enthusiastic but had less targeted feedback for me.

But everyday, as I kept building out the system, I could see my speed, consistency, and output rapidly increase as I added more components, styles, and definitions!

PDF images of a design system

Some of the original PDFs

Implementation Highlights

The button component library in Figma.

Easy to use icon selection.

Our fully defined color palette.

Card designs across breakpoints.

Breakpoints designed with the dev team.

“We so needed your wizardry!”

Current Results

👩‍💻

Marketing and Growth Teams are able to build experimental conversion pages.

“I made major updates to the landing pages today!”

⏰

Time to build divorce flow charts has decreased from 4 hours to 30 minutes!

“Utah is ready and it looks so good!”

🤝

Increased collaboration by spurring creation of weekly meetings from design team with developers and with customer team.

“That will be great to talk about during our first meetings with how to get dev resources working into this real estate piece!”

Reflections

I’m so glad I took the time to build out a Design System. It’s not only provided tangible benefits to the whole entire organization, but it’s made me a better designer as I tackled this project. I had to do a lot of research about best practices and got to practice so much Figma implementation!

Next Steps

I’m continuing to work on my Zeroheight and Figma documentation of the current system to ensure that any new team members we onboard are can quickly and easily get a sense of the system, our guidelines, and our philosophy.