EnterpriseAlumni Design System

Introduction

EnterpriseAlumni produces a variety of B2C and B2B platforms. To ensure consistency throughout this diverse product suite, I collaborated with a Front-End Engineer to establish and maintain a design system and component library.

A design system is a comprehensive set of guidelines, principles, and reusable components to ensure consistency and efficiency in the design and development of digital products. Uniformity across all products helps us build a strong brand identity and provide users with a familiar experience. Additionally, the creation of a component library streamlines the design and development process.

I played a crucial role in establishing and maintaining the EnterpriseAlumni Design System. My responsibilities included: creating and documenting design guidelines, designing reusable UI components, and refining and expanding the design system as necessary.

Overview

  • Company: EnterpriseAlumni

  • Role: Design systems operations

  • Timeline: 3 months

Key Accomplishments

  1. Established and maintained design system.

  2. Improved consistency through EnterpriseAlumni product suite.

  3. Increased speed and ease of design and development.

Atomic Design

I relied on the atomic design methodology, developed by Brad Frost, to guide the development of the EnterpriseAlumni Design System.

Atomic design is a methodology for creating design systems that breaks complex user interfaces into smaller components by drawing inspiration from chemistry. Atomic elements are utilized as a metaphor for the structure of user interfaces.

There are five stages of atomic design: atoms, molecules, organisms, templates, and pages. Each stage works together to build an effective user interface.

Business Goals

Creating a design system is a significant time investment. Regardless, I advocated for the devotion of time and resources to this effort, as I firmly believed that this initial commitment would result in long-term benefits.

A design system streamlines design and development processes, reduces redundancy, and ensures consistency across products. Internally, this would accelerate decision-making and facilitate scaling. Externally, a cohesive design system would fortify brand identity and foster a positive user experience across the EnterpriseAlumni product suite.

Ultimately, the initial investment of establishing a design system would save time and resources in the long run, contributing to the development of a more cohesive, polished, and successful product ecosystem.

AlumniPortal Careers Module

EnterpriseAlumni’s primary consumer-facing platform is AlumniPortal. Within AlumniPortal, alumni utilize the Careers Module to explore job opportunities at their former company.

This case study focuses specifically on the components included within the Careers Module homepage of AlumniPortal.

Atoms

Overview

Atoms are elemental building blocks that comprise all user interfaces. These components cannot be broken down any smaller without ceasing to be functional.

CTAs

CTAs (Call-to-Actions) prompt users to perform actions, such as “Post a Job” and “Search.” There are multiple versions of the CTA, which allows for customization of molecules.

Action Icons

Action icons are located within Career Card molecules and allow users to either save job listings or share them with others.

Thumbs Up/Down and Company Avatar

These two atoms, Thumbs Up/Down and Company Avatar, are also included within the Careers card molecule.

Meta Text

Meta Text is shown on the Careers Card molecule to indicate the job location and when it was posted.

Hub Icons

The Profile, Settings, and Job icons are shown in the Careers Hub molecule.

Careers News Card Image

This image is featured within the Careers News Card molecule.

Thumbs Up/Down and Company Avatar

Various form fields are included within the Search Bar molecule.

Miscellaneous

Lastly, a miscellaneous collection of other atoms comprise the molecules and organisms within the Careers Module.

Molecules

Overview

Molecules are simple groups of interface elements that function together as a unit. Though individual atoms may be abstract, they serve a clear purpose once they are combined.

For the EnterpriseAlumni Design System, I prepared two versions of each molecule: one with and with and without padding. Padding indicates how much space should be between various atoms within a molecule.

Careers Card

The Careers Card is comprised of several atoms, including Company Avatar, Meta Text, and Action Icons. These cards build the Careers Card Grid organism, which is the primary focus of the page.

Careers Hub

The Careers Hub molecule consists of several atoms: Hub Icons and a Secondary CTA

Careers News Card

This component includes the Careers News Card Image atom and is featured prominently at the top of the Careers page.

Careers News Card

Perhaps the most complicated element of this page, the Search Bar is comprised primarily of Form Field atoms.

Organisms

Overview

Organisms are complex components that are composed of groups of atoms and/or molecules and/or other organisms. These tend to be relatively complex UI components which form distinct sections of a user interface.

Careers News Card

This page only includes one organism: the Careers Card Grid.

Templates

Overview

Templates are page-level objects that demonstrate how all components function together. This helps contextualize molecules and organisms, which can be relatively abstract on their own.

Careers Page Template

All of the atoms, molecules, and organisms come together to build the Careers Module template.

Pages

Overview

Pages are specific instances of templates that show what the user interface looks like with real, representative content. When a template is populated with content, the effectiveness of the underlying design system can be reviewed.

Careers Page

Once the Careers Module template is populated with real content, this creates the final version of the Careers Module homepage.

 Next Steps

A design system is a living document. It is not a static set of guidelines; rather, it is an evolving resource that must be continuously updated. Whenever a new component is added or existing features are improved, the design system must also reflect those changes.

Moving forward, EnterpriseAlumni can maximize the benefits of the design system by ensuring that is is maintained and by encouraging its adoption company-wide.

 Reflection

The EnterpriseAlumni Design System has been a culmination of months of dedicated work and collaboration, and seeing it come to fruition brings me great satisfaction. The establishment of our design system has already elevated the consistency and cohesiveness of products within the EnterpriseAlumni portfolio, and the devotion of time and resources to this initial effort has undoubtably paid off.

Additionally, this resource has increased speed and ease of both design and development. This promising first step serves as a springboard for future improvements and advancements, highlighting the importance of continued dedication to our design system's evolution. Witnessing the positive impact it has already had on our design processes and overall user experience fills me with pride and fulfillment.