IBM w3 Design System

With the w3 Design System, we set out to streamline the process by which teams across IBM design and develop websites and digital products — empowering IBMers to focus on their users and their products rather than on constantly reinventing interaction patterns and UI components.

I was one of a team of designers, developers, product owners, and users working in an agile methodology. We built a lightweight user interface framework composed of code patterns, a Sketch UI kit, and a documentation website that showed how it all works. We released a new version of the framework every two weeks.

We adopted an atomic approach. Robust, nested symbols and overrides in the Sketch UI kit gave IBM designers structured flexibility, and mapped directly to atoms and molecules of code.

We focused on our users by engaging them in constant conversation and translating their feedback into the user stories that guided our work and improved our product. We iterated, tested, and continually refined and expanded upon the framework.

Documentation website

_desktop.png

UI design kit

02 Design.png
 
03 Navigation.png
 
04 Content.png
 
05 Data input.png
Next
Next

Kurbo