Work/ Case Study
IAA Design System - Beta - V1.2
Client: Insurance Auto Auctions
Role: UX Designer
Background:
IAA is a trusted global marketplace for insights, services, and transaction solutions for commercial assets and vehicles. Leveraging leading-edge technology and focusing on innovation. There were fractured experiences across their portfolio of external and internal applications and needed a system of components and patterns to unify and help product teams to scale features and acquired software faster.
The Challenge
To build out a NEW design system with a small scrappy group of UX team members while still working on inflight projects and low initial adoption. With the team already being stretched how were we going to find time to build an internal product to serve all teams? Maybe less of a challenge and more of an opportunity.
Lets build something that will scale the business
“Design systems also save time and money. Just by eliminating code redundancy, more than 20% of a developer’s time can be regained. For a team of 100 developers, this means around $2 million per year.” – projekt202 Managing Architect Drew Loomer
Starting with a definition, what is a Design System?
I think Christopher Alexander said it best in A Pattern Language.
“The elements of this language are entities called patterns. Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.”
Design System – the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.
Pattern Library – A subclass in the design system, this is the set of design patterns for use across a company.
Style guide – Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.
A Collaboration
While at IAA I had the privilege to work with others on the UX Team to precisely build a robust Design System to cover current and future needs of the digital products built by IAA. We took an examination of current digital products in production and also inflight work for patterns and components we wanted to reuse. In a years time, we launched two sustainable versions of the system. We also integrated into several legacy platforms, product rewrites, and new applications.
…
How Did We Get There?
We started out by dedicating time as a team to examine the patterns and components that were already existing. Collectively we made hard choices around what do we keep and what do we let go. As well we discussed what was our philosophies around how we used various elements of the components from an Atomic Design perspective. Side note Brad Frost developed this approach, I highly suggest reading his material here.
As we continued into the process, we standardized our design language around color, font usage, frameworks, layouts and more. We studied how other great design systems were built. Gleaned great advice from UX pioneers in the systems space. In the end, our success was built on a strong foundation of design and code that was scalable and maintainable. But the biggest takeaway was we understood that to be successful, we had to collaborate.
The end is never the end in good product design
We pulled together a robust set of foundations and components and packaged them into a system that could be inserted into any application whether it needed isolation or full-blown starting an application from the ground up. In addition developed out a robust set of rules, examples, and instructions on a doc site that colleagues could reference. Pairing this with libraries in respective design and engineering tools built a scalable and sustainable design system.
As I reflect I think to myself, there is always something I or we would could have changes, and we did. But I am happy with the outcome. Why, because all the right players were involved. “Design” was considered first in the process vs waiting to the tail end of the product design process after the debt was gained.
The system has matured since I worked on the project as any product should. But I am proud to have worked on a thing that would benefit so many other applications. Feel free to check it out in its current version. https://uxcomplib.iaai.com/
Key Aspects:
- User-centric design
- User validation
- Design thinking workshop
- Systems thinking
Technologies Used:
- Confluence
- Sketch
- Miro Board
- InVision
Are you ready to move the world together?
If you are looking to expand your team or even need support on a single project lets schedule time to chat.
To comply with my non-disclosure agreement, I have omitted and made unclear confidential information in this case study. All information is my own and does not necessarily reflect the views of Insurance Auto Auctions.