IBM
Design System UX
User experience for the IBM design language website
My starting line
IBM was seeking to position themselves as a design centered company, integrating design thinking across all levels of the company globally. To do this they set out to create a design language and provide tools and inspiration for both internal and external use. They were asking:
“How can we create an experience that both communicates our design language to the world, and equips our internal TEAM MEMBERS with useful design tools?”
— IBM
My team
1 Lead designer (me)
1 Visual designer
1 Motion designer
1 Project manager
1 Product owner
1 Content team
1 Development team
My role
Sr. UX designer
Responsible for the informational architecture, user experience design, and stakeholder alignment.
My process
1
User flows
I mapped the experiences of both internal IBM employees and external users, identifying which sections of the site would be publicly accessible and which would require secure login. This analysis allowed me to structure the site's information architecture in a way that prioritized intuitive navigation for users while maintaining a strong focus on security.
2
Sketches
Through group white boarding sessions and multiple story boards, I was able to explore various ideas and quickly modify them before committing to wireframes.
3
Wireframes
I crafted detailed wireframes capturing, communicating all user flows, and outlining the information architecture of the experience. Working with the design language team, I helped to define interaction patterns and how they are presented to users, resulting in easily digestible UX guidelines, standards, and best practices.
3
Production
Working with a visual designer and a team of developers, I produced assets to bring the site to life.
My solution
Learning, creating, and inspiring
These were the core tenants I defined with the team which drove our decisions about for site architecture.
Guidelines (a) is the were the learning happens. Information for understanding how the design language works, what its philosophy is, and how to use it live here.
Resources (b) is for making and creating. Here lives the tools, font families, iconography, and any materials needed to implement the design language.
Inspiration (c) is where designers go be inspired. It includes creative examples of how to use the design language and allows users to share and be inspire other creators.