Comprehensive design system unifying three VPN brands into one cohesive experience
Sector: Internet security
Challenge: Our company (ExpressVPN) was merging with two other VPN companies and we were dealing with multiple branding guidelines and codebases. The goal was to streamline communication between designers and engineers while reducing design and development time by creating a cohesive design system and UI library.
Role: As frontend team lead, I conducted internal UX research, managed stakeholders, created and recruited teams, gave presentations, and provided consulting.
I had a few key questions I wanted to explore with the brand, design, localization, content, engineering, and QA team leads:
As I spoke with the different teams, it became clear that while some had specific pain points, others were content with the current setup.
For example, the content team was quite satisfied with their existing processes and didn't feel a need for change. On the other hand, the localization team expressed a need for better ways to test localized text, and they saw value in having an interactive UI library database. Tools like Zeroheight, Storybook, or Frontify were options we explored that could help them address this gap.
The most surprising insight came from the engineering side. While the idea of a unified component library for all platforms was initially appealing to the Android, Mac, and Windows leads, we quickly realized that the actual cost of migrating to such a system outweighed the potential time-saving benefits. It simply wasn't worth the effort for them.
In the end, it became clear that only the web engineering teams would truly benefit from a centralized UI library. The others would see more challenges than advantages in making the switch.
I began by sharing my UX research with the marketing tech lead, highlighting how a UI library paired with our design system could save development time. We evaluated tools like Zeroheight and Frontify but ultimately chose Storybook for its balance of functionality and cost.
Next came staffing. I tapped a frontend engineer who is passionate about Tailwind and cohesive UX as our team lead, then brought on a project manager and our sole web designer in a consultative role to bridge design and development. We also recruited a senior engineer with great attention to detail and an interest in project management as well as another engineer with the bandwidth to get us up and running.
Upon launching the team, I faced a few challenges:
Confusion around the team's purpose, roadmap, and ultimate goal. This was brought up to me by a couple of my reports in our 1:1's.
I held a meeting with the entire frontend team to explain the big picture roadmap of the team. I understood the transition was tricky because the team had to take on “leftover” frontend tickets that did not belong to any other project team in the company.
In my role as frontend team lead, I took a step back to allow the staff developer to gain valuable experience leading the team and managing the project. My goal was to help him grow his leadership skills, so I provided support and guidance in the background (we had weekly 1:1's setup already) while he handled the day-to-day management of the UI library initiative. I attended key meetings to offer input when needed, ensuring he felt supported while still allowing him the space to take ownership of the project.
Beyond team development, I continued to serve as a consultant for cross-functional teams across the company. I advised on how to implement the design system and UI library within their projects, collaborating closely with engineering, design, and product teams.
Whether through workshops, one-on-one sessions, or ad-hoc consultations, I remained available to help troubleshoot, clarify processes, and ensure that the transition to our new system went smoothly. This approach not only helped the senior developer grow but also ensured the entire team benefited from ongoing guidance and expertise.