Case Study
Design System for the g1 app
Creating a smart, multifaceted system to stand the test of time
Context
g1 is Brazil's number one news coverage platform, with an average of 300 thousand users every day on the app and an additional 6 million users on the web platform. Keeping such a large structure cohesive in a seamless way is crucial for the user experience and brand image. In 2023, the design team began an ongoing redesign project encompassing both the web portal and the app. To support this process and ensure an efficient rollout, we decided to create a design system that could embrace all brand aspects.
The team had already noticed that some designers were facing difficulties due to a lack of comprehensive knowledge of the app's architecture, and the existing visual library in Figma was no longer efficient, particularly because it did not fully utilize updated autolayout/components, neither did it contain all final pages.
To comply with my non-disclosure agreement, I’ve omitted confidential information in this case study. The information that follows is my own and does not necessarily reflect the views of Globo.
My Role
Product Designer | Globo
Design System Creation, Interaction and Visual
Design, Brand Design, Componentization,
Information Architecture
Team of 4 designers
Jan - Jun 2023
The Challenge
Scope
Creating a system that encompasses all brand elements, grouped in a way that makes sense.
Ease of use
The system must be easy to access and understand for both designers and developers.
Efficiency
As the team updates the design system, all products should be automatically updated to conform to it.
Consistency
Ensuring uniformity in the final user experience through a live product that interacts with all other products.
Scope
Creating a system that encompasses all brand elements, grouped in a way that makes sense.
Ease of use
The system must be easy to access and understand for both designers and developers.
Efficiency
As the team updates the design system, all products should be automatically updated to conform to it.
Consistency
Ensuring uniformity in the final user experience through a live product that interacts with all other products.
Research
As a quick recap: a design system is a living entity, not a static guide. It contains all the design principles, elements and variations, outlines how they all work together, and serves as a basis for all interfaces in the final platform. This allows for a cohesive application of design solutions throughout the brand's products.
In the research stage, it was decided that the system most compatible with our needs was the atomic design system, originally created by Brad Frost. The core of this system is based on concepts from chemistry, organizing design elements as atoms, that group into molecules, that group into organisms. These organisms then interface to create templates and, finally, pages. The atomic design system is quite intuitive and allows for easy adoption by all team members, since all elements are clearly designated into categories and the interactions between elements are laid out comprehensively.
I already had some familiarity with the atomic design system, so the research served to better adapt the system to the brand’s needs.
We began by mapping out the current app to plan the execution of the design system. Then, we proceeded to componentize all the app's elements, ranging from atoms to molecules, organisms, and templates. This was a very thorough process through which I became deeply familiar with our entire brand, since it required us to review every page and element of our app and reverse-engineer their parts, breaking them down into their most essential components.
Then, I identified and created the base components. Base components are essentially a blueprint for elements of which we need multiple versions. For example, we have almost 400 buttons currently in use in our products, and they all share similarities, such as color and typeface, while still maintaining unique functionalities. By defining a base component (a base button), and then creating all other buttons in relation to the base, we can implement changes to the base button that then roll out to all variations, instead of changing each button individually.
Base components became the heart of the design system, because Figma at this point did not yet have the variables function. Our system was utilized to ensure that we could have multiple versions of each component, adapted to light and dark color schemes, that updated automatically when any changes were made to the base component. Now, with the variables system available, we are transitioning our base components to better suit Figma tools.
Solutions
As soon as we knew that a redesign was coming up in the near future, it became clear that we would need two versions of our design system. V1 would be composed of all our current brand elements and layouts, and used as our primary source for active products. V2 would be built in sequence, following the redesign guidelines and integrating web and app interfaces.
V1 had already begun with the mapping and componentization executed in the research phase, as well as with the creation of base components. Continuing from that point, the next step was the standardization of all elements to ensure compatibility with the light and dark modes of the app. By having our color scheme neatly laid out and easy to reference, it was much easier to move forward knowing that all our pages would have a consistent look and feel, and that they would also be easy to update during the subsequent redesign.
.png)
V1 - Atoms
This was a long process, made even lengthier by the fact that we didn’t have a dedicated team for the design system, so we had to continue with our usual output simultaneously. To ensure that the project would not lose traction in between deliveries, we made sure to include at least one design system story per sprint. Overall, it took almost four months to complete V1.
V1
Next, it was time for the V2 of our design system. Ongoing structural changes in the brand meant that considerable modifications needed to be adopted into our products. This meant that the main focuses of V2 were to gradually change all the atoms (such as color, typography, and buttons) to match our new redesign, as well as integrate web and app elements to create a more unified interface experience for our users. This reflected a more global and integrated vision of the g1 brand.
The visual changes were straightforward, since we had already leveraged the styles and components created in V1. All the atoms were stored in a separate file, which was easily differentiated from V1 by using a dark, adapted interface inside the Figma workspace. This prevented accidents by making it clear which file designers and developers were accessing at any given time. At first, we used Figma’s branches function to separate V1 and V2, but this tool ended up not matching the team’s needs, since it reset V2 elements every time changes were implemented to V1. We then switched to separate files, as mentioned previously.
V1 <> V2
For now, V1 is still active in all of our products, and V2 is continuously being built alongside it as the redesign process continues. Having a comprehensive, clear and easy to use design system has been key to creating a seamless transition between user experiences as we expect to move on to V2 implementation in the near future.
Results
The design system not only facilitated faster layout creation through its componentization approach but also enabled the efficient management of typography, colors, buttons, and other design elements through tokens. This streamlined workflow significantly benefited the developers as well, as they were able to utilize the design system not only to implement new features but also to create consistent and high-quality experiences across multiple platforms.
The implementation of the design system proved highly successful. All designers were able to seamlessly work within the system, which encouraged them to consistently incorporate new features into the designated files. Our current adoption rate is at 100%, which proves that this system was immensely successful and beneficial to our team.
It was very validating for me to demonstrate my ability to design at scale by addressing challenges through the creation of a design system that ensured consistency, efficiency, and maintained a superior user experience for a large user base across various platforms. I am proud to not only have made the redesign process easier, but to also have created a system that will endure and continue to be useful to the g1 brand.
