Pecan Design System

Design and develop with speed and consistency

Challenge

After reading Brad Frost’s Atomic Design I started work on EBSCO’s first pattern library within the Sales and Marketing department. It was a simple Adobe XD file with components and design patterns to be used in junction with our CMS (Drupal). With my move into the product space I knew there was an opportunity to align both product and marketing style guides and provide future users a clean experience from sign in/sign up (ebsco.com) to our new product.

Taking a page from Brad Frost’s 2019 Event Apart presentation. My team used this as a guide to
start work on our new design system.

The pilot project

The multi-year and multi-team re-design of EBSCO’s main research product provided the oppurtunity to do this work. We needed to add as needed to a style guide within Sketch and then direct developers to code a tech agnostic design system. From there the guide could be replicated in React using Storybook. Teams from Europe to the West Coast can now use our system as both Sketch files or code.

Design aesthetic

A visual departure was needed from our legacy product. The aesthetics for Common Researcher needed to be simple and airy. Negative space was used liberally to provide a better reading/scanning experience for users. Colors, typography and illustrations are aligned with EBSCO marketing.

The basic building blocks of our design system. Color, type, spacing etc

Emergence of the EBSCO brand

We reduced the amount of customer configurable items within the UI to bring back our brand from the libraries yet still provide some areas where they’re brand can shine.

Voice and tone, Color, Motion, Illustration

Motion

Connect all motion on product to it’s fundamentals principles. “Depth Fast” and “Delightful Discovery”. Have common timing and naming conventions to help empower developers and designers make sound decisions with animation.

Setting:
Snap: 0.10s, 100ms
Fast: 0.20s, 200ms
Brisk: 0.30, 300ms
Slow: 0.50s, 500ms
Sleepy: 0.70s, 700ms
Eternity: 3.00s, 3000ms

Componentry and speed of design

Core components can be quickly assembled to create almost any experience/page with both speed and consistency. Easily mock up ideas or use the HTML/CSS to build a working prototype!

Designs from our junior designer for the eBook viewer. Using spacing, colors, buttons and icons from system

Achievements

Pecan is live! An HTML, CSS, JavaScript sandbox for rapid development to feed the system.
Sketch libraries that can be distributed throughout EBSCO via our shared server and linked within Sketch’s plugins tools. Versioned every PI (Product Increment).
Better alignment of styles from one department to the next.
Deployed into other technologies for remote teams (React).
All components meet WCAG AA accessibility standards.