I led an internal initiative to create LastPass’s first Design System. I worked both independently and alongside the product design team to audit the old UI, evaluate components, create rules and documentation around usage, and build Tether – the living, breathing design system used internally on LastPass today.
Design Team:
Product Design Lead (me), 2 Product Designers
Skills:
Product Design, Design Systems, Leadership, Collaboration, Visual Design
Project Duration:
4 months
Why a design system?
Design systems are an essential pillar of design organizations these days. Many influential brands are using them to create a consistent design language that can be universally accessed. After LogMeIn’s acquisition of LastPass, it became apparent that the product was in desperate need of a design system. The LastPass design team had scaled from just me, taking on a behemoth product singlehandedly, to a team of five designers spanning three cities (Fairfax, Boston, and Budapest) trying to sort out years of jumbled, live code. We were encountering significant roadblocks in shipping inconsistent designs because uniformity hadn’t been a priority. The issue manifested itself so intensely that I was tasked to perform a UI audit with another LastPass designer to try and formulate a solution. To say we were inconsistent would be an understatement.
The LastPass UI audit. Intimidating, to say the least.
An army of one
After the UI audit, the Director of UX spearheaded a company-wide initiative to have a single designer on each product in the company’s portfolio of products to create a design system for that product. The term “design system” was quite fluid – no system had been built at LogMeIn prior to this, so the requirements unfolded with the project. As you may have guessed, I was chosen to lead the LastPass design system initiative.
One small step for man
By the time the initiative kicked off, we had already taken a feeble stab at an internal pattern library for the day-to-day purpose of creating consistent designs among the designers. It was no true design system, though. It was a single Sketch file with a collection of designed assets that we could rapidly recycle into new designs.
The first attempt at an internal pattern library.
I was delighted because I now possessed executive buy-in and time to improve the pattern library. After starting the project, I joined the Design Systems Slack group at the recommendation of a friend. It was a wealth of resources. It was originated by Jina Anne, formerly of Salesforce. The group had thousands of designers across the world all sharing design system information. Through it, I found many other inspirational design systems, my favorite being Atlassian’s. I also devoured “Atomic Design,” a book by Brad Frost. Frost is another leader in the design system space, and his book is revered as a primer on the subject.
After my research, I talked with the Director of UX about deliverables. The goal would be to build an MVP design system that could be used across the LastPass design team, by the end of 2016.
I started by holding a series of meetings with the LastPass design team. In these meetings, we evaluated the various LastPass UI components, discussed which ones worked the best and defined our canon of law. Next, I built out a master component Sketch file and created usage documentation for each component. The process consisted of designing the component in Sketch, turning it into a symbol, and uploading the Sketch file to Dropbox for seamless syncing.
The MVP LastPass design system – a team resource in Sketch to access all of our established patterns.
At the end of 2016, I had a chat with the Director of UX and showed him my accomplishment. I had created and delivered an easy-to-use, centrally-located, set of core LastPass UI elements and patterns. To my delight, my MVP design system was hailed as the most refined across all of the LogMeIn business units, and it became the template to work off of moving forward. My initial delivery was concluded, but the project wasn’t done yet – it was time to grow further.
Scaling up
The LastPass design system initiative became a massive focus in 2017. A second product designer joined me in scaling the project further. We decided it was time to properly name our system, and we dubbed it Tether since everything was tied together through this single source of truth. While the second product designer coded the work done in Sketch so far, I continued to work on refining and updating both the processes and new UI elements.
Soon, InVision launched Craft, their Sketch plugin with a built-in Library feature for managing design systems. I learned everything I could and immediately started using it. I soon realized just how powerful this tool could be. I could take a series of symbols (such as a text input field with all of its’ validation states), nest them within Sketch, and save them to Craft as a single symbol. Then any designer with access to the Tether library would be able to pull the symbol into their active file and utilize all of the states. If a style changed, the update could be pushed to Craft and pulled down to all of the active files in use. This was a game changer and made Tether immensely more usable.
Tether – the living, breathing design system in Craft.
Next, we utilized the talent of a product designer with a knack for illustration to design the official Tether logo. We had a logo, a name, and a Sketch and coded library – all the pieces were ready. We began socializing Tether to the LastPass engineering teams. It took a mix of time and influence to warm them up to the idea of extra work up front for less work down the line, but we eventually succeeded and started incorporating the framework into their routine, bit by bit.
The coded, development version of Tether.
As with any good design system, the work is never really done. I had successfully piloted the initiative, scaled it to our design team, worked with the same team to grow Tether into a coded library, and launched it within the organization. Moving forward, Tether and LastPass will grow hand in hand.
Evidence of this truth is already manifesting itself. Currently, the team is working on a unified illustration language to be used in both marketing and product. The initiative, Unity, will be the first major addition to Tether since its’ launch.
Future improvements – the LastPass illustration guidelines.
Working on this design system was challenging. Getting buy-in from executives, starting small, adopting both internally and externally, and maintaining as it scaled were all hurdles to be overcome. That being said, there is immense value in having a design system, and I think they should be adopted universally. Design systems can be as complicated or simple as they need to be for any given company. At the end of the day, they just need to create uniformity and save time in the long run.