TRINITY The complete Choose Energy UI design and development library

This pattern library started out as a means of solving some of the workflow problems that the were plaguing our design and development teams.

As with many other technology companies, mutiple iterations of site redesigns and re-architecting had left us with a UI that was out of date, unwieldy, and unloved. Because of its neglect, it was quickly becoming a painful bottleneck for our engineers and a confusing mess of conflicting visual elements for designers.

Difficulties for Designers
  • No good reference for all the things designed so far
  • Designs were not modular / easily reusable
  • Everyone was designing in their own style
  • Too many variations on basic elements
  • Design decisions being lost in implementation
Difficulties for Developers
  • Dependency between shopping and content styles
  • Very complex process for syncing and deploying styles
  • Disorganized code and lack of standards made it hard to find styles
  • Hard for non-experts to understand css code
  • Little reusability in UI code
  • Very time consuming to build UI components

When given the opportunity to start fresh with a brand new redesign of the site, we took the opportunity to also completely rehaul the our UI development workflow in a way that would be flexible, expandable, and maintainable. This pattern library is the result of that effort to change how we approached the design and development of our user interface.

In order to address these issues, we decided to create a living style guide or pattern library to help us keep track of the details of the designs and maintain consistency across our online & offline brands.

This should be living document that provide enough structure to speed up work without strangling creativity. Crucially, it should also provides context to when certain designs are used and why.

This pattern library should be a collaboration between the designers and developers to help ensure everyone is on the same page.

Goals

The primary goals were to create a complete UI design and development library that would speed up development time and serve as a one-stop reference for anyone working with our brand or on our site, but there were also a series of secondary goals that would benefit from this project.

Speed up UI design & development work

In order to be more efficient, we really needed to be able to speed up the UI design and development process. The best way of doing this without loosing quaility was to make the design as modular and reusable as possible to reduce the need to constantly develop new components. We could do this by creating:

  • Standard elements that can be used across all our sites
  • Reusable modules & components with clear examples
  • An abstracted & consistent visual language
  • An easy to maintain set of global styles that can be imported into any project
  • Well documented UI code & tools
  • Common resource for designers & developers to reference
Make a one-stop reference for brand guidelines

Previous iterations of our site suffered from a lack of consistency in style, driven in large part by the lack of single reference source or guidelines for designers to use when creating new components. This pattern library would help address this issue by:

  • Clearly documenting brand guidelines for any designers to reference
  • Maintaining a consistent visual language across all domains (site, ads, widgets, etc.)
  • Providing downloadable resources for external partners
  • Acting as a single reference for core design & brand decisions
Describe our design philosophy & inspiration

As we continue to expand and diversify the product offerings, it will be helpful to have a single reference point for our core goals and design philosophy to reference when creating new experiences. We want to make sure to:

  • Articulate the goals of company and pattern library for internal and external parties
  • Provide examples of best practice in the industry to help guide work
  • Promote a philosophy and approach to design & UI development that will attract future employees
Simplify onboarding for new staff

As we grow, it will become more and more of a burden to onboard new staff, and with a complex, constantly evolving product it is easy to miss important information. Maintaining this pattern library as a update reference of our latest design and development work will make it easy for new staff to understand our design and development principles. To this end, the pattern library should also:

  • Act as a single point of reference for new designers to understand our current styles and design patterns
  • Make it easier for new developers to find and understand our UI code
  • Reduce the need for hands-on onboarding by current staff by acting as a repository for key information