Northern Lights

Building a design system

Design systems

People are at the center of design systems; they equip teams with effective means of communication by establishing a shared language. Serving as a key reference point, design systems provide guidelines that foster UI visual consistency. Using reusable components allows development teams to expedite UI creation. A collaborative effort involving various stakeholders across the organization is required to create a design system.

My personal interest in the fundamentals of design led me to create the Northern Lights design system. I recognized the importance of fully understanding key concepts such as color theory, typography, layout, and hierarchy in order to create effective designs. Therefore, I developed Northern Lights as a platform to experiment and explore these principles. Through meticulous research and experimentation, I was able to establish a solid foundation in design, which has since enabled me to create more sophisticated and impactful designs. Ultimately, the Northern Lights design system has become an invaluable tool in my ongoing journey to achieve my full potential as a designer.

Foundation

Documentation is key

Effective documentation plays a crucial role in ensuring the successful implementation of a design system within an organization. This involves conducting UI audits, gathering relevant information, and establishing design principles that will govern the various elements of the UI. Additionally, designing reusable assets like elements, components, and patterns will help leverage consistency across the system.

Creating comprehensive documentation provides a vital communication tool that promotes universal understanding and promotes access to the design system. It creates a central hub that facilitates ease of use and promotes accessibility for all stakeholders.

UI brand audit

 This audit utilizes CSS Stats to visualize a website's UI (stylesheet). The goal is to get started with a UI audit to identify areas that require optimization. 

Framework

Bring the design system to life

My motivation for naming the design system "Northern Lights" stems from the fact that energized electrons cause this natural phenomenon. With this system, we aim to tell a captivating brand story that enthuses and inspires the users.

Design Principles

1. Accessible. Making products accessible involves making them usable by everyone, including individuals with impairments and disabilities. 
2. Transparent. Information needs to be relevant and valuable for the user. This means the experiences should be straightforward, trustworthy, easy to understand, and transparent. It should make people's lives easier and help people.
3. Consistent. Consistency is a key to simplicity. Users rely on things to be understandable and recognizable, rather than being memorized.
   

Design system documentation

View the completed design system documentation on zeroheight.

Laying the foundation

1. Style guide. Includes the foundation of the UI like color, type scale, layout, and spacing. Everything that is defined in the style guide is applied to buttons, headers, and backgrounds.
2. Elements. Are the smallest tangible piece of a UI. They have minimal structure for buttons and icons. 
   
3. Components. Are a central and structural piece of the designs. They consist of grouped elements with more specific structure like cards and dialogs.
4. Patterns. Are repeatable solutions to recurring design problems. They can be forms, content, or navigation. 
   

Building the UI

• The UI Kit for the Northern Lights design system was created in Figma.
  

Figma artboards

View the Figma UI Kit.

Scope & Constraints

As a part of an online course, I took on the challenge of creating a design system project that proved to be an indispensable element of my learning journey. The project allowed me to dive deep into the nitty-gritty of designing and utilizing a design system that assisted me in optimizing my concentration and grasping of the course content. I gained a comprehensive understanding of zeroheight, an innovative resource that proved to be a game-changer in my design system creation efforts. Due to the time constraints, I was unable to incorporate the documentation of design tokens into my project. Nonetheless, the experience has been transformational, and I am excited to implement my learnings in my future design endeavors.

• Timeline: 4 weeks (identity, develop, document, and deploy)
• Deliverables: UI, wireframes, and documentation

Tools

• Figma, zeroheight, Adobe CC

Retrospective

What I learned about building and documenting a design system.
Design systems encourage development teams (design/code) to efficiently communicate using the same visual language. 

• Documentation is at the heart of a design system. 
• Design systems should be treated as a product.
• Evangelizing a design system is key to ensuring everyone understands why the design system was developed and how it will be adopted across the company.
  

Next steps.
This project does not include the design token documentation. It will be the next step in my documenting process. My goal is to test the elements and components to enforce accessibility issues and iterate as needed until they are compliant with Web Content Accessibility Guidelines (WCAG) 2.1.