Campfire Design System
OVERVIEW
The objective of this project was to create a library of components and styles that reflects one unified brand, ensuring that our software at Momentus Technologies is cohesive, compliant with accessibility standards, and configurable for our wide range of clients internationally.
BACKGROUND
Recognizing the diversity of our clients worldwide (both in terms of geographical spread and varying organizational needs) we have developed a comprehensive suite of configurable software products to make coordinating events easy.
"Products" refer to the different segments of software used publicly and internally, such as portals for event registration, catering, suite management (sport stadiums), membership management, etc.
Since we have numerous products, we created a design system to set a foundational standard for consistency overall, while still allowing customers to customize their experience to meet their needs and match their brand. For example, we designed and developed common components like calendars and input fields to optimize functionality, accessibility, and overall aesthetics, then updated our products to all source from the same library. Using this library for our current projects as well as future projects not only promotes consistency, but saves time and effort for designers and developers because we aren't reinventing the wheel unless special use cases arise.
16+ Software Products
COORDINATED WITH CAMPFIRE DESIGN SYSTEM
100+ Components & Styles
FROM FONTS TO FILE UPLOAD FUNCTIONALITY
60,000+ Users Internationally
CONVENTION & EXPO CENTERS, HIGHER ED, STADIUMS & ARENAS, THEATRES & PERFORMING ARTS, ETC.
TOOLS USED:
ADOBE XD (PHOTOSHOP & ILLUSTRATOR FOR MOCKUPS), STORYBOOK, ANGULAR MATERIAL
COLLABORATIVE TEAM MEMBERS
Olivia Saldaña
Team Lead - Visual Design
Olivia and I were in charge of gathering intel of current components, evaluating accessibility and success of each component and products overall, and consolidating all of the info for our live site and brand guidelines. As visual design lead, she was in charge of overseeing this project.
oliviasaldana.com
Linkedin Profile
Austin Wildgrube
Front End Developer
Austin was the front end developer in charge of creating the live site for our design library as well as the components contained. He has also been training developers on how to use this library moving forward.
austinwildgrube.com
Linkedin Profile
OBSTACLES & SOLUTIONS
With our large scale and variety of clients, our project requirements can be more demanding than average use cases. In our pursuit of comprehensive accessibility, we have discovered that relying on third-party components, such as Angular Material and Durandal, often falls short of meeting our exact requirements. As a result, we prioritize developing custom solutions to ensure our software achieves the highest level of accessibility and user satisfaction. Creating our own library also gives us the full access and transparency needed to keep our software updated as well as streamline future product development moving forward.
Another obstacle that my team has run into is getting our colleagues on board with the new transition. Change can be intimidating, especially for employees that have been around for over a decade or two. While many developers liked the idea of simplifying the process and having a library of components to use, we had other departments like sales and product managers questioning how much this would affect the users experiences and whether it was worth the effort to update our old products. Once we put together visuals of what the updated products would look like and broke down the process, we were then able to show how having a clear and consistent brand/library made all of the products feel truly connected and easy to use.
With recently transitioning ownership of the company from Ungerboeck Software to Momentus Technologies, we are now updating the branding once again. However, since we've laid the ground work of creating and connecting components, we are able update things like primary colors and fonts used instantly across all of our products rather than updating each product individually.