How good interfaces are built at scale

Talk given at uOttawa on design as a practice: an overview of how Shopify does UX, and what that means for your own side projects.

Transcript

1. Andy Fang How good interfaces are built at scale
2. What is an interface?
10. Learning a new interface is overwhelming
12. • Clear visual identity across products • A source of truth for what “quality is” • Give developers and designers the tools to build faster What we wanted
13. We wanted a UX north star
14. Donella Meadows “A system is a set of things - people, cells, molecules or whatever - interconnected in such a way that they produce their own behaviour over time”
15. Donella Meadows “A system is a set of things - people, cells, molecules or whatever - interconnected in such a way that they produce their own behaviour over time”
16. Teachers Students Buildings Books Management School System Interconnections
17. Teachers Students Buildings Books Management Curriculum Teaching Salaries Maintenance Schedule Education School System Interconnections
18. Design Principles UI Components Voice and Tone UX Team Design Language Design System Interconnections
19. Design Principles Voice and Tone Design Language UI Components UX Team Rationale Feedback Processes Tooling Opinions Quality, efficiency, alignment Design System Interconnections
24. Design principles
25. • ~10% of users with disabilities • Different locations • Low-end devices and different screens • People with diverse identities Which means designing for:
26. 55% of merchants are female
29. Content is the interface
31. • Headings and buttons are in sentence case. “Edit shipping settings”, not “Edit Shipping Settings”. • Buttons follow a verb + noun pattern. “Add product”, not “Add a product”. • Merchants are the focus (it’s not about Shopify). “Offer one-per-customer discount codes”, not “We’ve made discount codes better”. • Nouns and verbs are consistent. Don’t use “remove” and then switch to “delete”. • Culturally specific idioms and metaphors have been replaced (i18n yo). “Wait”, not “sit tight”. • Active voice is used as much as possible. “Dylan ate pizza”, not “Pizza was eaten by Dylan”. • Sentences are short. No unnecessary words. • Content isn’t repeated. Body content shouldn’t repeat exactly what the heading says. • Bold and italics are avoided. When in doubt, don’t bold. • Jargon and big fancy words have been replaced with the shortest and simplest words. • We're aiming for a grade 7 reading level. • Lead with the merchant benefit, then explain what the merchant needs to learn/do to get there.
34. UI Components
37. What does a component guideline look like?
40. Passes contrast, but is mistaken for input This fails, but is clearer.
42. Successful design patterns don’t exist in a vacuum.
43. Thanks!