Building A Design System From Scratch
Truly is a tool built for top performing sales teams, focusing on reps who handle multi-million dollar deals.
The Problem.
Truly was born out of a hackathon project. Its evolution to a tool used by top sales teams like DoorDash and Square necessitated a fresh look at how the product came together as a whole.
Product Debt: Incrementalism was creating an unwieldy, bloated product in some areas. For example, at one point we had three media players for different functions, all using a separate backend.
Inconsistent User Experience: Across mobile apps, desktop, and admin panels, Truly users encountered a fragmented experience that didn’t add up to using one single product.
I had to build a case for carving out some time to focus on delivering a consistent experience for our users, while addressing product debt that had built up from our hackathon project days.
Making The Case
In presenting the case for a design system, I needed to build a business case for the executive side. At the same time, I needed to get engineering on board. I worked with them to better understand their goals:
Cut Down On Duplicate Work: Features were sometimes duplicated across different areas of the product for slightly different functions.
Documentation: Just as coding standards should have clear documentation, so too should the standards for design at Truly. Some engineers spoke to making guesses for design choices that should be automatic.
Automatic: Engineers shouldn’t have to go to some resource every time they need to consult spacing guides. Instead, this should be embedded in their existing workflow.
Iconography
Truly’s nature as a specialized tool for top sales teams made icon design important. There aren’t many icon sets with a conference phone in them...
Avatars
Avatars could be used to represent users or entities, and had to work across various form factors.
Successes
Engineering Hours Saved: Through deep collaboration with engineers we build a system that had design best practices embedded into the way they already worked.
One Experience: Between mobile, desktop, and admin panels there was now one single “Truly” experience.
