–Karri Saarinen, Building a Visual Language A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.
Problems to solve • What patterns/components do we need to build? • How can these components be combined to create distinct experiences? • How can we create a unique look & feel for 300+ sites using one visual design system?
Start with fast, unified platform Be scenario-driven when creating variations Find key moments for visual brand expression that serve our audience 1. 2. 3.
Fast, Unified Platform • Our platform should load quickly, be accessible, and work well across devices • We should have a unified core user experience • All components that we build should be available to all brands
Scenario-Driven Variations • Scenarios, not layout, should drive variation • All patterns should solve a specific problem • We’re not creating a one-size- fits-all solution
–Alla Kholmatova, Design Systems Keeping this map in my mind helped me think in families of patterns joined by a shared purpose, rather than individual pages.
Identify core workflows and the patterns that need to support these workflows. Understand the role each pattern plays in a user’s journey. Define how the patterns work together to create a cohesive experience.
Workspace Facilitates user collaboration on records Board For items that are advancing through a linear workflow Reference For when users are primarily jumping to related records Salesforce, https://www.lightningdesignsystem.com/guidelines/layout/
Address Cost Rating out of 4 stars Book a Table Platform(s) Publisher Score out of 10 points Release Date Product Image Pro/Con List Score out of 10 points Buy Now Buttons
• What’s the value of the homepage today? • Who’s our homepage audience? • What are they looking for? • How are our current homepages performing? Research Phase
• Higher content density so users can see more content at a glance • Reverse chronological order • Priority is quick consumption of content to serve the engaged homepage audience of repeat visitors STORY FEED
Key Moments for Brand Expression • We must create a platform where brands can feel distinct • We need to express strong editorial voice and identity • Brand expression is more than just colors and logo
Good Variation • If there’s a specific problem that we need a new pattern to solve • Determined by user scenarios and content needs • Strengthens brand voice in a way that serves our audience
• The Language of Modular Design — Alla Kholmatova • Design Systems — Alla Kholmatova • A Pattern Language — Christopher Alexander • Thinking in Systems — Donella Meadows References
yeseniaperezcruz
akwkm
tapidokes
uxaustralia
loglass2019
uxevents
aicocco
spindle
48yukyia
solmetts
hjmkth
uxaustralia
malarkey
akosma
jennybc
stephaniewalter
destraynor
jonyablonski
bkeepers
edds
phodgson
panda_program
cherdarchuk
paulrobertlloyd