VIA is a multi-platform system created to help designers & developers in our team improve their work process and build beautiful video products more efficiently. With a consistent design language in place, proper resources and guidance, it becomes easier to deliver high quality products at scale.
Our company has been growing for many years now, new employees in our offices all around the world working on providing video solutions for the biggest firms in the industry. During the past years, we've noticed a pattern of problems when working on projects for clients: Lacking time to reach deadlines; Inconsistent quality delivered across offices and departments; Big learning curves for new employees; Lacking design information was provoking wrong implementation; Misusage of time...
Our goal is to provide a solution that will improve efficiency and consistency in our deliveries. A solution that will help us scale our work and quality to all of our global teams, providing the necessary guidance to onboard colleagues (with any level of experience). The solution should help our teammates improve their usage of time in their projects, being able to focus on larger, more complex problem-solving rather than redoing the same patterns over and over again.
As a start, we launched an internal survey to gather insights and information of our team needs and their situation within the company. The survey was a good start point which gave us more perspective of our team, its work methodologies, pain points during projects, analysis of time consumption, and previous experience using libraries or systems.
With the data collected from the survey's we then prepared focus groups and 1:1 meetings involving Project Managers, Leads, Designers, Developers, Strategists and Sales representatives to generate a conversation around building a Design System and how it could solve our needs and help the company. We gathered thoughts and ideas and started shaping the ideal scenario for VIA. We created a project plan with priorities to work on, defined the strategy, and yearly roadmap with quarterly goals.
Libraries containing most common components & patterns seen on video products for a total of six different platforms (the most demanded ones by our users). Having also styles / tokens to be customised according to the user needs within their project.
Components will Initially be released & documented inside Figma. When components and patterns are implemented, they will also be available in a web portal built using Webflow and Zeroheight.
A systems team consisting of: Product Lead & Designer (75%), a Project Manager (50%), a UX Designer (25%), a Solutions Architect (50%), and partnering with Product Engineering Team (for the product development).
Project Manager
Solutions Architect
UX Designer
Product Lead & Designer
2 Web-Based and 4 Native-App products and experiences that are dynamic and can be adapted according to the needs of our users.
Before starting any design, we first had to define a white-labeled multi-platform video product (including all the areas requested by our users) to then extract the components and patterns needed for each platform. The first step was thinking the Information Architecture with the team through a card sorting session. When approved, we then wire-framed the screens of the app for each platform to then identify and list all the components and patterns in it. After reviewing and approving with the team the wireframes and findings, we discussed the best structure and workflows within Figma and where we will be laying the designed components, documentation and screen templates.
To improve component libraries usage, we agreed with the users to implement the following structure: 1 Cover indicating platform it belongs to, showing version, team working on it and status. 2 Getting Started guidelines for designers & developers that want to use it. 3 Theme / Tokens with corresponding documentation to adapt the styles according to the needs of the project. 4 Designed and Documented Components & Patterns including tips and relevant usage guidance (component variants should also contain description to facilitate its usage). 5 Exploration area with any new component or patterns that might be in process.
To facilitate the Design System adoption we created the following team structure inside Figma: 1 Onboarding for Designers & Developers, including video tutorials to setup and start using the DS. 2 Workflows on the Design System Governance and its usage. 3 Six Platforms containing each a Component Library and Screen Templates. 4 Retrospectives & Analysis area where we store results of monthly team retrospectives and analysis related to the Design System implementation and usage.
We used the components to design a complete white-labeled multi-platform video product that the team can use as inspiration, reference or even as templates.
When designing the components, we put special emphasis on making every aspect of it dynamic toenable fluid design.Grid systems are also provided to guide our users when adapting components to different resolutions. However, this are only our recommendations, we want our users to build upon our foundations and explore any new limits when using the DS on their projects.
To improve product performance and avoid issues during the implementation, we always work with nativity in mind, following platform guidelines and using native components for every possible occasion.
Communicating, testing and gathering insights is key in our work. Almost in a monthly basis we have: Online sessions to communicate updates to all the company; Demo's to expand the influence and showcase interesting areas of the DS; Retrospectives to gather feedback and insights from the team; Backlog grooming sessions with designers & developers to add new tasks or improve current ones. Every once in a while we also like to gather the team for a workshop and test the DS with small simulations... beer included!
The first results are promising: A single designer can now handle multi-platform deliveries within less time, meeting deadlines without stressing nor loosing quality. We have reduced learning curves for new employees, onboarding faster and taking more responsibility from the beginning; With libraries, documentation and proper guidelines we have improved the quality standards and reduced bugs or performance issues; The DS is also helping us win new clients by building fast prototypes and concepts...
The Design System has brought new ways of pitching and winning customers. With it we can now build high quality prototypes and concepts in almost no time, enabling fast innovation and letting customers get a taste of our potential.
By the end of the year we want to have a Design System portal created using Webflow and Zeroheight. In here our team will be able to access the code for the components of the Design System. We also want to make of this portal a design space to upload resources, foundations and showcase innovative case studies. Check the MVP concept in My Projects.
