Overview
What is OpenVPN? OpenVPN is a private tunnel on the internet that allows computers or entire networks to connect securely. It can be used to link different locations together or to give remote users a safe way to access their home or work networks.
Web site: openvpn.net
Team: 159 people
Revenue: $5.9M
Countries: USA, Canada, Spain, Sweden, Great Britain, Netherlands, Poland, Ukraine, France, Germany, Switzerland, Brazil, Australia, South Africa, Japan, Malaysia, Livan, India
Role & Duration
Sr. Product Designer
Nov 2021 – Feb 2023
Design System Team
5 Product Designers
2 Product Managers
UX Researcher
4+ Developers
My Role
As a Product Designer, I played a pivotal role in every stage of product development, from ideating groundbreaking product concepts to refining the tiniest details before release.
Delving deeper, I spearheaded two major initiatives:
Developing a unique Design System. This foundational system ensures consistency and unity in product design across various platforms.
Overhauling the entire product’s design.
Achievements
In a transformative redesign of the design/code workflow, we’ve slashed the creation time from a cumbersome 45 minutes down to a swift 10 minutes. By reimagining the framework within our design system, we’ve empowered a cadre of designers to consistently produce cohesive and unified designs. This not only frees them to tackle broader design challenges but also drastically mitigates potential error points. The outcome? A product that is the epitome of consistency and streamlined efficiency.
Applied Skills
Workshop Facilitation, Design Thinking, UX Research, User Interviews, User Journey Mapping, User Stories, Wireframing, Rapid Prototyping, Usability Testing and Visual Design, Establishing Priorities, Web Content Accessibility Guidelines.
Learnings
The cornerstone of successfully implementing large-scale products is a clear structure and a solid foundation. In this realm, discipline, systematic approach, consistency, and a well-coordinated team effort are paramount.
Applied Skills
Workshop Facilitation, Design Thinking, UX Research, User Interviews, User Journey Mapping, User Stories, Wireframing, Rapid Prototyping, Usability Testing and Visual Design, Establishing Priorities, Web Content Accessibility Guidelines.
Discovery
OpenVPN, having evolved from open-source technology, has grown into a massive service utilized by major companies like Tesla and Robinhood. In 2022, we held our annual meeting attended by the entire team, where founder Francis Dinha informed us of the plan to go public in the next three years. To achieve this, we need to improve metrics across all indicators.
Why did the company need a design system?
Inconsistency in products, not just across platforms but also within the product itself.
Weak branding.
Inconsistency in code.
Designers and developers address routine tasks without standardization, significantly increasing the time taken for coding, designing, and frontend testing. This, in turn, reduces the time available for creating new features and evolving the product.
A lack of documentation, leading to extended onboarding times for new employees.”
Stakeholder Interviews
Foundation
You can’t build a great building on a weak foundation. You must have a solid foundation if you’re going to have a strong superstructure.
Gordon B. Hinckley (Quote)
I used best practices of the following design systems in my work
Research of other companies design systems
I used best practices of the following design systems in my work:
1. Atlassian.design
2. Shopify Polaris
3. Material Design
4. Nutanix Design
5. Contour Guides – Контур Гайды
6. Mail Chimp
7. IBM Design Language
Reading books and articles about design systems
1. Design Systems by Alla Kholmatova
2. The Actionable Guide to Starting Your Design System by Uxpin
3. Creating a Design System Quickly With UXPin by Uxpin
4. Why Build a Design System? by Uxpin
5. The key lessons I learned creating a popular Design System by Matt Bond
6. Measuring the Impact of a Design System by Cristiano Rastelli
7. Spotify design system
Key Decisions
Workshop on Design Principles
Our journey to develop a design system began by establishing design principles. These principles act as foundational guidelines that our designers adhere to when crafting a product. They maintain consistency throughout the design team and can even be applied beyond the scope of design alone.
The formulation of these principles was a collaborative endeavor. As such, several workshops were set up. After joint discussions with the entire design team, we distilled the core design principles for our organization.
Research summary
I cataloged all components currently used in the product, and based on this, I grouped the components, ranging from the simplest to the more complex ones that comprise multiple components. The results are presented in the image below.
Process
While four designers worked on the system, it was essential to divide tasks amongst ourselves. We adopted a two-week sprint methodology. On the first day of each sprint, we designated tasks for the upcoming period and gauged the hours each task might require. By the sprint’s end, we showcased the components we created and relayed them for testing to an alternate design team.
Beginning with the second sprint, we instituted an additional workshop led by the design testers. This was to provide feedback on the components. If there were discrepancies or flaws, the concerned components underwent revision in the subsequent sprint. These workshops became especially crucial in the system’s second design phase. By this juncture, the foundational system was established, and we evolved from elemental components like status and text to intricate ones, such as tables and inputs. Our ensuing task was penning down documentation for every component, illustrated with examples.
The primary challenge in this design system revolved around the extensive workload, coupled with the systematic procedure and sequencing of component creation. Given our transition from basic to intricate elements, rigorous and precise planning was paramount. This was especially true for larger components like tables, which encompassed multiple other elements – statuses, avatars, search functionalities, and more. It was imperative that these constituents were primed and evaluated by the time table development was in progress.
Using colors as an illustration, I wish to showcase my contributions to the design system’s foundational elements. Our work on colors encompassed three pivotal aspects:
❖ Colours
↳ Accessibility guidelines
↳ Colour examples
↳ Tokens
From Simple to Complex
After crafting all the atomic components, we conducted a series of tests and then transitioned to the primary components, built upon the foundation of already tested tokens. This approach aided us in averting significant errors within the design system.
Final Steps
The concluding steps involved the development of extensive systems, such as tables, which encompassed several components
Implementation
Before
After
Outcomes
When I left the company to move to the USA, production of the Design System had not yet been completed, both in terms of design and code. But despite this, the team’s achievements thanks to the Design System were already visible:
Benefits for front-end developers and designers
Development speed
In development, using the Design System with all user interface elements divided into components, it becomes much easier to add new functions and screens to one or more projects because the main parts will be ready, the only task will be to assemble them – a kind of collecting ready-made blocks into a Lego.
Shortest learning curve
In an environment with well-defined components and clear style rules, any new developer can start working with a code much faster using the Design System than without it. It’s much easier to figure out what part they are doing and just combine it with the other parts to form a new feature.
Benefits for front-end developers
Re-use instead of repetition
For companies with more than one application – for example, OpenVPN which has applications for search results, client dashboard, Payment, Content Management System (CMS) and blog – having a design system reduces or eliminates code repetition by sharing components and style rules in all projects.
Team building
Developers can split tasks to improve, change or create new things and they do not need to worry about interfering with another developer’s work. This makes setting goals much easier.
More “testable” code
Having a specific component for each part of your interface allows you to test more accurately and ensure that each part is much more stable than if you are testing a series of mixed actions. At the first glance, ensuring that a component does one thing correctly may seem tedious, but it guarantees that when interacting with several other components it will work. This reduces likelihood of errors.
Benefits for designers
Consistent design
If you have not one, but two or more designers in your team who work on one product, a Design System greatly reduces the likelihood of making an inconsistent design throughout the entire product, since the Design System already contains prescribed design principles and a set of design rules; besides, the design foundation is also established: colors, fonts, padding and so on.
Freeing up your brain and hands for more serious things
With a Design System, designers no longer need to focus on interface elements, nor on writing the same design truths and principles of the company in different documents. Instead they have the opportunity to completely concentrate on the needs of the user and the business.
Reducing error probability.
A Design System reduces likelihood of human error. For example, if everyone knows that the system uses 8px vertical step and the designer by mistake makes 7px, the programmer who knows the rules for building the design system will automatically apply 8px thereby preventing inaccuracies.