Vega Accomplishments

The Beginnings

Over the past almost a year, the Vega Design System has grown from a concept into a fully realized entity. We spent the earlier months of this project in conceptualization mode. We defined what we wanted this system to be and to try and get something together that would work to help designers and developers maintain a central brand, look, and feel for Heartland.

As we began this project, we quickly cobbled together several components based on an existing package in Figma, and tweaked these to fit the overall goals for developing a system that would work for Heartland. We knew from the start that what we were creating would not be “perfect” out of the box, however we needed to throw something at the wall to see whether it would stick.

We established a set of design tokens, which were then passed to the Tiger Team, who built web components using Stencil.js and Tailwind.css, which consisted of 18 components, 2 containers, and 3 recipes which formed the basis of the first form of Vega, and got an alpha version (what we might consider to be v. 0.1) up and running.

With the help of some enterprising external teams, the designs were smoke-tested, which helped us identify what works and what does not.

The Website

One of the factors that will determine the success of a design system is solid documentation and a central place for hosting it. As a result, and after several iterations, the Vega Chimera team came up with the beginnings of the development site (which is where you are likely reading this article).

We started sharing the documentation while the design was (and still is) in progress. Use and feedback from external teams has resulted in pushing us to move faster to be able to meet expectations. We are still learning from this process.

We ran into several design challenges along the way. We started working from elaborate designs, which then needed to be reduced to low-fi wireframes to get a clear infrastructure for the site. Eventually we created what we considered to be “mid-fi” designs which would effectively communicate the information we need in a utilitarian manner.

Vega Lite

In response to the needs of existing systems who wished to make use of Vega’s styles without having to redesign all of their current components, we launched Vega Lite. While this was not an initial plan for the project, and not necessarily an ideal long-term solution, the Tiger team was able to create a workaround where they can create custom SCSS files which will work for many teams to get the look and feel of Vega, if not the full functionality. This approach is available to many teams wishing to re-skin their existing sites.

Successes

Members of the team are continuing to make personal growth as we learn more about different tools that are continually being used in the project. Learning about the nuances of different design-systems has helped educate members of the team on ways of making the system better.

Another big success was the decision to use a template-based static website, namely using Jekyll in a Microsoft Azure environment. This solved the security challenges that would have been introduced by using a database-driven CMS. We were able to maintain a dynamic feel through the use of templates, and updates to the site can be made through easy-to-use markdown format.

Challenges

One of the largest challenges we have had to face has to do with the fact that Vega was built on top of an existing design package, and the structure forced us into some out-of-date graphical representations. Mainly, the biggest issue was that many of the components were rendered somewhat larger than most teams wanted. As we move forward, we will be refactoring Vega so that the sizing is more suitable for current design patterns.

We look forward to hearing more feedback from different teams as Vega moves forward into its next phases. We encourage any feedback or contributions to the project. If you need to contact us, please reach out to us through our Slack channel.