Elevate Vidio TV Apps Design System
Product Designer
2020
TV Team, Vidio Design Team
Increase the design consistency and make a more efficient product development process with design systems
I am asking several feedback from the engineers, the reusable components and documentations make them even faster when developing the UI.
Project Background
Joined Vidio.com as a UI/UX Designer, I got a challenge and opportunity at once. I'm working on the TV Apps Team that has a responsibility to build a Vidio TV Apps Product. This is my first-time role in designing on a TV platform. As I mentioned before, Vidio has some platforms, and the TV Apps platform is one of it.
Vidio TV apps were first released in mid-March 2019 and got a very good response from users, as represented by the achievements we got for Vidio TV Apps. The target participants in this Usability Testing are the people who are 19-65 y.o that represent our users. Based on the internal data, Vidio TV Apps is a Key product of the company.
How it started?
When I joined on May 2020, Vidio TV Apps has a few design components. But it's so hard to use and it's messy. So many broken components. It makes me confused and I have so much time to re-make the same component when doing the task.
I’ve been learning about the design systems from several resources and I am so excited to make the TV product better. As a designer that has a responsibility to the TV Apps team, I try to communicate with my manager about tidying up the TV Apps Design Library.
Why we need the design system?
Why do we need a design system? Some of the benefits of creating a design system include:
More efficient collaboration between the team.
UI Consistency and increased user trust in our digital product.
Reduced time consumption and make collaboration more efficient between the teams.
Way of thinking
When tidying up the design system, I use Atomic design as a mindset to build consistence UI component
Start with audit
I started this project with some research. I read medium articles, studied the TV guidelines by Google, and got insight from my team. The next step was to inventory every UI element in our application. I open the design assets on Sketch apps, looking the details, rechecking the component. Once I felt I had captured every component, then I grouped them. Viewing them side-by-side revealed exactly why we needed a system. There were dozens of color styles, inconsistency of typography, components and used on whole apps.
Challenge : Migrate tools
With some considerations on the design team, starting on December 2020 we prepare to migrate from Sketch & Zeplin to Figma. And I think it's a good decision, but of course, we have some problems when we migrate the design tools.
Because of it, the design system that uses "nested symbol" is broken and needs to be re-organized. We need to re-naming the component, re-naming, and re-grouping the layer. Also, we need to learn about Figma features like Variants and Naming Conventions. I also have some problems when delivering the project to the engineer when using Figma, but I think I will prepare to write it on another case study.
Evolve
This is the hardest part of the project. I had to make decisions regarding naming conventions, categorization, organizing the component. I spent a lot of time to renaming the components, and layer on the Sketch file and trying to make it dynamic when use it at the design project (I'm using the Anima plugin on sketch).
After migrating tools from Sketch to Figma, I also re-organize the design system using a proper Naming Convention and use the Figma Features called “Figma Variants” to make it easier when using it.
Deliver
In this phase, I try to build the design library using the foundation. The most important thing is to build reusable design components when we design the UI like buttons, cards, and page templates that use many times on Vidio TV apps. There are so many reusable components but I try to explain some of them like buttons and cards. Figma Variants are so useful for building reusable components.
