Needs
Conexia Educação has several products with complex back offices, people management systems, classes, series, schools, groups, lessons, and content. As a pain point, both Conexia's employees and school employees (clients) had similar systems but with slightly different uses. The development team also struggled to maintain a consistent standard, both in terms of technology and components developed by each team across different products. The design team proposed the creation and adoption of a design system, and thus YGG was born. The name is an abbreviation of Yggdrasil, which in Norse mythology is the axis of the world, a colossal tree located at the center of the universe.
Principles
We have defined three basic principles for our design system that aim to assist the team from decision-making to clarifying doubts during development. They are:
Be consistent
Being consistent helps with usability, efficiency, and how users perceive the software (trust and professionalism). We should strive for consistency in our projects, the language we use in interfaces, our code, and data. Modular design helps us identify common elements used throughout the system, remove unnecessary duplication of elements, and allow team members to iterate on the design without compromising quality. We create design patterns and follow usability conventions that help users become familiar with the interface and navigate the system.
Attractive and usable
A usable interface allows users to achieve their goals without friction. We also care about the look and feel of our applications because attractive interfaces have an impact on perceived usability and user trust.
Lean and efficient
We dedicate our effort to efficiency and eliminate any waste when communicating an idea, solving a problem, or creating the product. Our focus should be on the effectiveness of the result. We also prioritize the most valuable areas of the product and reuse elements whenever possible, creating reusable components and following conventions.
Technology
During the alpha phase of the project, all components were programmed using React, an open-source JavaScript library focused on creating user interfaces for web pages. React is maintained by Facebook, Instagram, other companies, and a community of individual developers. It is used by websites such as Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, and others. Due to its widespread popularity and existing adoption within the company's products, React was chosen as the initial technology. However, there is flexibility to program components in other patterns in the future, such as AngularJS.
To expedite the process of testing the design system, the initial components were implemented using the Storybook platform. Storybook is an open-source tool for developing isolated components for React, Vue, Angular, and other frameworks.
Zeroheight Process
Zeroheight is a platform designed to help teams document, manage, and maintain their design systems.
Before we put it into code, a quick style guide was created for the designers working within the teams. This initial style guide also served as a starting point for the components that would later be developed in React and added to the Storybook platform. For the style guide, the Zeroheight platform was used.
5 - Storybook Process
Storybook is an open-source tool for developing UI components in isolation. It is often used in conjunction with design systems to facilitate the development, testing, and documentation of individual UI components in a systematic way.
Below are some images of the final result of our design system, which is not initially open for public use like other design systems, such as Shopify Polaris, Google Design, and Atlassian Design System.
Icons
Table
Sorting Table
Multi-selection input
Grid
Calendar
List
Project conclusion
The Ygg design system was designed to provide more scalability, development speed, and maintenance. Up to the date of this project, Ygg has been used in three different platforms, including Conexia LEX featured in this portfolio.
Ygg design system serves over 200,000 users, including school directors, teachers, parents, and students.
Contact
Get in touch!
