Novice to Pro illustrations
A continuous learning framework aimed to orient, onboard, explain, educate, and cultivate novice users into high-functioning power users.
Visual storytelling that aims to decrease our users’ cognitive load and support their continuous learning in a complex, ever-changing domain.
Challenge
Create a cohesive illustration strategy for IBM Security that aligns with brand principles, communicates product value instantly, and enhances user engagement through clear and emotionally resonant visuals.
Focus
Create documentation for new Novice to Pro Components
Explore an illustration style that’s consistent across Security
Explore an illustration content that supports our content and helps users understand complete concepts within the Security domain
Documentation
Novice to pro component-based documentation enables designers across IBM to bring delight to every client, customer and user.
Published as of December 22, 2022, on the Carbon for IBM Products site, the Core Experience team has delivered extensive documentation for the Novice to Pro experiences to be utilized by every product at IBM.
My role in this deliverable was to provide guidance on the specifications for illustration experiences across three core components: Interstitial screens, Guide Banners, and the Coachmark. In addition, I crafted templates to download within the documentation, enabling designers across IBM to create illustrations in a unified way for each component.
Visual Vernacular
The Visual Vernacular for IBM Security assigns abstract objects within an illustration to meaningful connections for the content they represent.
These symbols are used to create compositions for various topics across the various, complex domains across Security.
Components
The interstitial screens introduce users to a new experience and sets their expectations for the key value they will encounter.
This is why it’s essential that these illustrations within interstitial screens visually enhance the content of the page and aid in highlighting the value of any given experience. They serve as the initial introduction to an experience a user is accessing for the first time.
These interstitial illustration for XDR Connect were closely tied to the content they were paired with. Utilizing the ever-growing visual vernacular, these illustrations used simple symbols to help articulate complex concepts that are high-value items for our users in their security solution.
Components
Guide banners are used to give a bird’s eye view of information users need to know before diving into the page’s workflow
Illustrations within the guide banner function to visualize the value. They are paired with relating content to draw attention to key subjects of importance.
Utilizing the Visual Vernacular, this illustration for XDR Connect was crafted to tell the story of how enriched data is correlated from alerts (using the hexagon to represent alerts, and the white diamonds to show correlated data). This illustration helps to tell the story of showing the bigger picture for how a case is created.
Components
Coachmarks are just-in-time messages used to draw a user’s attention and explain new functionality or concepts they might not otherwise notice or understand.
Variations of the coachmark that have an illustration are used to guide users through a teachable moment. Illustrations should be used to familiarize users with what they will experience in the product or to explain complex concepts.
Utilizing the Visual Vernacular, we are able to create illustrations with unified symbols as visual cues for the complex concepts these illustrations represent.
Collaboration wins
“Sarah, I'm grateful for your stewardship of the brand and shaping how it influences product experiences. For rallying, organizing, and inspiring a talented group of illustrators.”
Cameron Calder, Design Principal, IBM Security
Broadening the digital journey
From when our users discover our products to when they become paid-use customers, it’s up to us to ensure consistency.
We owe it to our customers to provide a consistent experience from start to finish. Driving visual consistency starts from the top.
At IBM, product teams and branding and marketing teams can sometimes feel disconnected from each other. It’s up to us to reach out and bridge the gap, connect with who we need to and work together to provide an optimal experience for our customers.
Collaboration wins
This is great, Sarah, what you’re doing with the context of Security. It feels very holistic, it stands apart nicely, it’s very well integrated and well thought out.”
Sadek Bazaraa, Global Creative Director and Design Principal, IBM Blue Studio