IBM COGNITIVE SYSTEMS
Power Systems is one of the last remaining hardware groups at IBM with over 3,000 engineers but only 14 designers. Our engineers needed a way to build software effectively and efficiently, taking into account the user experience and accessibility, without a design team.
To accomplish this, we built out a component library with UX Research, UX Design, Visual Design, and Front End Development to provide guidelines and code to the engineers.
Active colors aren’t for decoration, they’re used to place emphasis on important parts of the interface. Choose between one of the colors for your theme rather than using both.
There are three buttons styles to choose from: Primary, Secondary and Flat Link. Used for Primary style for the main or most important action on the page. Secondary and Flat Link styles are used with a primary button or can standalone as a less important or destructive action. There are two button sizes to choose from: large 40px high button and small 30px high button. In general, buttons have squared corners, but there is an option to have a circular button.
Search fields are a combination of text field and drop-down list. You can provide search fields alone for simple search or include autocomplete to shows users likely results as they enter a simple search string. All of the examples on this page include autocomplete.
It is the font of science and the information age, with a precision and objectivity that commands respect. We lean on Helvetica Neue to do the hard work of conveying information, specifications and the basics. Its clean confidence makes it ideal for our product design.
Deliverables + Role
Color, Typography, Grid, Iconography, Buttons, Search, Fields, Check boxes, Radio Buttons, Modals, Notifications, Pagination, Loader, Navigation, Tabs
Visual Design Lead. Collaborative work with Alissa Lee, Patrick Lowden and Susan Jasinski on Visual, UX + Research. 2017.