Orbit Design System

A Design System with two levels called Andromeda and Chamaleon to power a Page Builder interface.

Design System • UX Design • UI Design • Product Management • Agile Methods

Content 📖

1. Background

2. My Role

3. First Steps

4. Inventory

5. Why two levels?

6. Andromeda

7. Chamaleon

8. Next Steps

9. Learning

Background 💬

Orbit Pages is a page builder that aims to create Landing Pages in a simple way through a visual interface and with a low investment. With this, we make Digital Marketing more accessible so that people can transform visitors into customers and consequently their lives!

With the receipt of a financial contribution and the will to scale a product with technological and usability limitations. So a squad was hired to create this new version and a Design System that allows it to scale with consistency.

My role 👨‍💻

Act as the person responsible for design decisions and execute them. Communicate with technology and business heads to keep the product in balance.

First Steps 👶

I started with desk research looking for references of page builders that documented their building process.

Source: UXPin

I presented the research to the team and we defined, based on the process referenced above, how we would work, starting with the building blocks , moving on to the components, validating them, and finally, defining the rules.

Inventory 📄

After the research, the inventory was the first action we took, because it allows the evaluation of the current interface and the analysis of each element individually, making it possible to identify positive and negative points and guide the new construction, without any key element being forgotten in the new version, I performed this task together with the person responsible for the front-end, Alex Wolff. This also familiarized us with the details of the current interface and we later passed on this knowledge to the squad.

With this action, we have already identified many inconsistencies, laws and usability heuristics in disagreement, and accessibility problem in the contrast of colors, the example below illustrates the amount of different buttons and inputs found in the interface.

Why two levels? Andromeda and Chamaleon ✌️

We defined a separate building order in two levels, named after galaxies, Andromeda, which would hold all the interface and interaction elements of the Orbit Pages platform, and Chamaleon, which would be something extensively adaptable to be able to generate the visual components used in the sites built by our users, making it possible, if necessary, to pilot and launch one of them without having finished the other.

Andromeda 🌌

We started the build with Andromeda right after the inventory was completed, as I mentioned earlier, this separation was strategic is to give us the flexibility to pilot and launch the dashboards interface, integrations and onboarding separate from the page builder.

Building Blocks 🧱

The Building Blocks are the basic elements that will be used to generate the interface guaranteeing consistency, drawing a parallel to Atomic Design, they are the atoms. The order of construction was: color palette, then typography, grids, and finally, icons.

Colors 🎨

With the colors, our goal was to ensure the strengthening of brand identity, system status vision with semantics and WCAG accessibility levels of at least AA, the basis of the construction was based on the color variations of the Material Design System with adjustments to suit our needs.

Typography ✍️

I kept focused on translating the brand identity and accessibility through the legibility and personality of the chosen typography, and Montserrat was chosen for the headings (titles) for combining modernity and sophistication in a balanced way, transmitting security and modernity to the interface. For the paragraphs, Open Sans, for its high readability and also being a modern font, generating a consistent pattern to the whole.

Then the variations were built:

Grids and Spacing 📐

The grid chosen was the 12 column grid for the containers and the 4pt rule for spacing the other elements. The versatility and consistency of these rules allow us to cover all interface situations and implement the components created in a fluid and easy way.

Icons 👾

We based ourselves on two main points for the choice of the library, we had little financial resources and an interface with a great amount of possible interactions and functionalities, therefore, we needed a library of readable and intuitive icons, so, we chose the free version of the Iconly library, which was very complete for the general use of the interface, and later I created an icon grid and made some more specific scenario icons according to the need (which are highlighted in green on the image below).

Components 🤖

As we started building the components, I revisited the inventory and sorted the order of building the components with the front-end developer to ensure a balance in effort between our interleaved sprints, preventing us from generating any idle time or away from our goal.

All of them were developed prototyped in Figma with auto layout and nested components to guarantee the greatest flexibility in the maintenance of all assets, ensuring efficiency in refactoring and new creations and developed in React.

Buttons

Inputs

Toast Notification

Checkbox and Radio Button

Side Menus

Headers and Tab Menu

Tooltips

Datepicker

Card

Loader

Guidelines

WYSIWYG Cards

Chamaleon 🦎

The base and order for the construction were the same as for Andromeda, with the additional of this great challenge of making something that besides being simple, is extremely customizable, in this moment, I counted for three months with the help of Daniel Rocha in UI Design.

Spacing 📐

The spacing has been adapted from the Andromeda rules, but we have added breakpoints and simplified the amount of spacing tokens to make it easier for our users to build.

Typography ✍️

After the spacing, we have separated the typography into families, sentiments, sizes , and variations to offer versatility to those who want to experiment and a suggestion to those who want help.

Buttons 🔘

The buttons had to respect the maxim of being customizable while maintaining good usability practices such as having their states well defined regardless of the color chosen and maintaining the good practices of Digital Marketing, such as the button having main text and supporting text.

Next steps 🐾

With the economic crisis and the initial investment running out, the co-founders were afraid to take a second financial contribution, and after a very friendly talk, the squad broke up and we ended our work on the Design System. For the next steps, finalize the components and the validation in usability tests, followed by a pilot validation of the product with the components created, including designers specialized in creating Landing Pages in the sample to generate, during testing, new templates and reproduce the bank of templates that already exists, and finally, start the third step of documentation and rules

Learning 🤓

Working on building a Design System was very rewarding from the standpoint of developing strategic and product management skills. It rekindled my love for UI and honed my discipline and improved my contextual communication when doing a handoff to a developer.