Dell Design Library

Product Design, Interaction Design, Rapid Prototyping  | 

As a interaction designer and sole front-end developer, we worked closely with Dell's team through six 2-week sprints to recreate the Dell Design Library from the ground up.

A Unified Styleguide

Dell’s previous design library provided extremely detailed specs and documentation for creating Dell branded digital experiences, but with a majority of the documentation housed in PDFs, the team had a difficult time keeping information up to date, and designer and developers across the world referencing the information were frustrated by the lack of consistency. We rebuilt the design library from the ground up to give Dell the ability to turn their individual components in to live code snippets and easily updatable style guides.

A HTML field in the CMS where Dell Design Library admins upload the component code that appears in the front end. This is also the code that gets copied when a user clicks 'Copy code'.
Some components involve a lot of markup, so we designed a version control system that Dell admins use to easily push updates to component code and notify Dell Design Library users.

Bridging the Gap Between Designers and Developers

By giving Dell the ability to upload individual component code, designers have the ability to easily copy code snippets into Dell’s prototyping environment to build a working website without having any advanced coding knowledge.

Every component in the Dell Design Library can be copied to a user's clipboard to instantly prototype or build with. (Click to expand).
We created a optional color-augment dropdown for Dell Design Library admins to add to components that have multiple colors options, all within the CMS.

Lightning Fast Searches

Due the the large amount of ux patterns, styleguides, and page components documented in the Dell Design Library, users were having a hard time finding what they needed. By implementing an auto-complete search utilizing Twitter’s Typeahead library, we were able to quickly surface relevant results without leaving the page the user is on.

The dropdown search in action.

By prefetching the most common searches, autocomplete searches are fetched instanteously, while remote data from less frequently visited guides are bubbled in quickly after. Combining Typeahead's syntax highlighting with some other customizations, we replicated the keyboard shortcuts and functionality of Google's web search for a search experience that delights users.

A homepage template demonstrating mock content from the College of Liberal Arts. (Click to expand).

When the dropdown search does not meet your needs, the search results page takes a faceted approach to quickly help you find what you need, prioritizing matches in frequently visited components, and then matches within the body of a Guide.

Recent Work

Thanks for viewing my recent client work. If you have any questions or would like to see more of my work, please contact me or return home.