You may have heard, last year the global Design System team was established, and we’ve been building something that all countries and teams could benefit from. We call it Voca, and we’d like to tell you a bit more about it.
TL; DR
- Why to use Voca?
- What Voca has to offer now?
- How is Voca implemented and how can it be adopted?
Why to use Voca?
There’s a lot of great work done in all countries, often teams face the same problems and spend time solving them in silos. We would all benefit from the international collaboration, sharing knowledge and experience to build better solutions. Voca is the touchpoint for Telia’s product teams, aiming to enhance collaborative environment, define shared understanding and patterns for product development, and have a cohesive brand image across all digital channels.
We want to take the burden of developing basic building blocks and patterns off your shoulders, and let you focus on the important work that you do. Voca is developed in the collaboration with the brand, and DS team is responsible for all the UI components and guidelines, therefore, using it is making sure your product is in sync with the brand.
What Voca has to offer now?
Design
In Figma, you can find Voca’s DS project or simply enable the available libraries in your working file. At the moment, we have all the foundational elements such as typography, colors, icons, etc. + a few components available.
Code
Currently we are building components using framework agnostic approach of Web Components with the help of Stencil. Our package is publicly available through NPM and to minimize bundle size the more static assets like font files are served through CDN. Our current documentation for components lives in Storybook, and if you want to dive deeper and see how things are built, our GitHub repository is internally available to everybody in Telia.
https://www.npmjs.com/package/@teliads/components
How is Voca implemented and how can it be adopted?
Contribution is one of the crucial factors of DS’ success. We’ve collaborated with various designers on defining foundations and accepting components to the library. This helps to speed up the development and there’s already something teams can use without breaking the layouts and flows.
Recently, DS team started organising meetups with design representatives from each country, to see how Voca can be useful for the teams and how we can collaborate. Together, try to find the adoption approach that would fit best, as in this case, one doesn’t fit all.
Most teams already use Figma, and using the libraries would be easy and straightforward. Our designers always try to minimize the friction of switching to Voca’s libraries. Designwise, DS strives to create a coherent image of the brand. To unify the visual appearance, we’d have to sacrifice some style variations developed by the teams. However, we believe that the ultimate purpose of the DS is worth it.
Currently, not too many teams use Web Components, so the adoption and integration might require more work as we don’t even know yet what kind of solutions, frameworks and structures there exist in Telia applications. But we are getting there, and it is important to get the feedback from you, the teams we are building this for! Although we unanimously agree that Web Components are the future, it will take some time that this setup reaches same level of maturity as for example React has. For most of the use cases, Web Components are natively supported, like Vue and Angular. Currently we are providing React wrapped Web Components in our package, so React teams can also use our Web Components.
🗿 Calling all contributors
As the design system grows with more and more teams using it, we would appreciate all the know-how and help we can get. So, if you have new component requirements, bug reports or enhancements to suggest we recommend that you contribute to this growing system, so that all users can benefit from it. We can kickstart this process by having a private discussion or a public one in our #design-system Slack channel.
For any further questions, you can contact us on Slack
Thank you 💜