Building Unicorn Design System v1.0

Behind the scenes of embracing every twist and turn into crafting our design system from concept to completion

Remember those childhood dreams of building towering sandcastles, only to have them crumble with the next wave? Yeah, that’s how it felt when we started building our design system. We envisioned a majestic design system, a shining beacon of consistency, but the path was far from a walk on the beach.

Hold onto your pixels, folks, because we’re about to embark on a design system adventure — the story of the Unicorn Design System, UDS 1.0. It’s not a fairy tale with unicorns and rainbows but rather an eventful journey, complete with missteps on muddy boots, surprising turns, and ultimately, a treasure chest of learnings.

Why a Design System?

“Every designer crafted interfaces like solo space cowboys, each with their own unique aesthetic and code dialect.”

Imagine a vast digital landscape where every product was an island, its design a lonely castaway. 10+ designers working on the same product, and each crafting their own digital islands, using different colors, font weights and sizes, buttons, layouts, etc. It was like a cacophony of clashing styles that was slowing down development.

Inconsistent buttons, contrasting colors, and navigation patterns that left users scrambling to find their way out — was our reality and we knew it wasn’t sustainable. We needed a single source of truth for our designs to bridge the gap between our brand and the user experience. Enter UDS 1.0, our knight in shining armor, ready to vanquish design chaos and establish a harmonious kingdom of consistency.

From Sketch to Reality: Building the Bridge One Block at a Time

UDS didn’t happen with the snap of our fingers! It was a collaborative tapestry woven with threads of competitive research, ideation, and relentless iteration.

Competitive insights, our compass, guided us through the labyrinth of possibilities. Ideation, the sculptor’s chisel, shaped each feature with empathy. And with each revision, a user experience haven emerged, not a towering palace yet, but a haven crafted with meticulous care.

In July 2021, with a never-ending feature list and the product’s launch mere weeks away, two intrepid souls were tasked with birthing UDS 1.0. One month. Two of us. An entire design system to be created from scratch. A recipe for chaos, right? Wrong. We were digital MacGyvers, ready to transform this mess into a masterpiece.

We dove headfirst into the tangled web of our design mess, deciphering undocumented practices, and unearthing inconsistencies. Like forensic experts at a crime scene, we meticulously audited, inventoried, analyzed, and documented every pixel and every practice. From tangled wilderness to user haven, we transmuted chaos into design principles with accessibility as our guiding light, and user-friendliness, our unwavering sword.

Next, we built the fortress: a foundation and a component library, a smorgasbord of UI atoms, each gleaming with purpose. Think of it like Legos for designers, but infinitely cooler and more pixel-perfect.

Navigating the Rough Waters: The Challenges

Did we underestimate the sheer scope of this beast? You bet. Did communication breakdowns lead to rogue design decisions? Oh yes, the horror. Did technical limitations force us to bend our beautiful principles? Let’s just say we got creative with duct tape.

It wasn’t a development fairytale built with pixels and code. There were times when our self-belief wavered, and the future appeared shrouded in mystery. And let’s not forget the occasional (friendly) design brawl over the perfect shade of blue .We stumbled upon challenges that tested our resolve. Documentation fatigue, competing priorities, and the perpetual fear of “getting it wrong” were just a few of the many roadblocks we encountered.

We faced some challenges like:

• Scalability and token usage: Wrangling token usage and making the designs scalable was a design tightrope walk.
• Adoption: Convincing the team to ditch their beloved go-to designs for the “system way” required diplomacy and killer demos.
• Porting all the existing designs: Converting every single element on the designs to a design system component or foundation element. Ah! It was the most time consuming and tedious task ever.
• Buy-in blues: Convincing everyone to embrace a new design system wasn’t easy. We had to scream from the rooftops about the efficiency and the beauty of UDS.
• Maintaining Consistency: Keeping a living, breathing design system consistent across teams and projects required constant vigilance and collaboration.
• Documentation Dilemmas: Keeping docs in sync with evolving components was a constant struggle. Versioning and feedback loops became the key to streamlining this critical but cumbersome task.

And finally it was Evolution — How do you keep a living, breathing design system relevant in a constantly changing tech landscape?

We learned the importance of agile adaptation, the power of community feedback, and the need to prioritize user needs above all else. We gradually learned to embrace iteration, continuously tweaking and updating UDS 1.0 based on user feedback and real-world usage.

Learnings: The Wisdom of the Maestro

Every bump in the road, every heated debate, yielded a glittering gem — a lesson learned, a process improved. We learned the importance of iterative development, not diving headfirst into assumptions. Instead of clinging to rigid design principles, we thrived on flexibility. We viewed them as guiding lights, not limitations.Most importantly, we discovered the power of collaboration, building bridges between design, development, and all points in between.

Our key learnings were:

• Start small, iterate fast: Incremental progress is the way because even Rome wasn’t built in a day.
• Community inputs, collective effort: Ownership and shared responsibility, ensures everyone has a voice in the design symphony.
• Collaboration is key: Design systems thrive on teamwork, not solo acts.
• Continuous improvement: UDS is a constantly evolving organism. Embrace change and adapt to new technologies and trends.
• Documentation is your friend: Clear, up-to-date docs are the lifeline of your system.

From Dust to Diamonds: Transforming Learnings into UDS 2.0

UDS 1.0 wasn’t the architectural marvel we initially envisioned, but it functioned as a sturdy bridge, leading us to exciting possibilities. We’re building upon this foundation, not demolishing it. After all, even a shaky bridge can lead us to breathtaking views. It paved the way for a smoother, more efficient design process, improved brand consistency, and ultimately, a better user experience. And now, with those learnings in hand, we’re embarking on the next chapter: UDS 2.0.

It was not about starting from scratch, but about iterating on the foundations we laid, leveraging our experience and learnings into a robust, scalable, accessible, and user-centric system. We’re incorporating our learnings, expanding our component library, and automating processes, so designers and developers can spend less time wrangling components and more time coming up with creative solutions. And, most importantly, we’re democratizing design, empowering everyone to build amazing experiences using the UDS 2.0 toolkit. It’s like taking the original design symphony and adding a whole new orchestra of possibilities!

The path to design Utopia is rarely straight. So, what’s the takeaway? Building a design system isn’t a fairytale ending. It’s a messy, exhilarating journey filled with stumbles and triumphs.

But with each step, we learn, we adapt, and we build something stronger, something more human-centered. Embrace the stumbles, learn from the falls, and keep your eyes on the horizon. Because even if your design system isn’t born perfect, with a little grit and a lot of learning, it can become your magnum opus.

P.S. The story of UDS isn’t over yet. Each success and misstep is a stepping stone, propelling us forward in a never-ending cycle of development. We’ve faced challenges, celebrated victories, and learned a heap of valuable lessons. And with UDS 2.0, we’re ready to warp speed into the future, crafting more cohesive, user-centric experiences.

So, fasten your seat belts, and get ready to join us on the next leg of the UDS adventure!

I extend my heartfelt gratitude to Ramakrishna V and Anoop Sethumadhavan for entrusting me with the ownership of UDS. Kudos to Vishnu Ko for being a great and reliable team mate to help build this design system in just 2 months. Thank you to Swathi shree raja for her diligent proofreading and unwavering support in refining this blog to its best. 😄