Using Sketch, Abstract version control, Anima toolkit (flexbox), and InVision. This talk was held at the SHARE NOW offices in Hamburg, as part of the Moinworld design meetup.
4. Switzerland’s largest
relocation platform.
Providing quality-tested
relocation and cleaning
service quotes from trusted
providers.
The platform is in English,
German, and French.
MOVU’s mission is to reduce
the stress of moving. Mine
was to create a stress-free
user interface experience
for its customers.
4
10. • Rapid growth + high designer turnover = inconsistencies.
• Increased friction for:
• Users
• MOVU’s team
10
The challenge
What is clickable? Only “Weiterlesen”. Interactive elements and
non-interactive elements were sometimes styled in the same way, giving
an unclear signal of how a user might be able to use the product.
13. 13
The solution: a design system
“A design system is a set of interconnected patterns and
shared practices coherently organized to serve
the purpose of a digital product.”
– Alla Kholmatova, Design Systems
14. 14
Design systems are
• A strategy for complex digital products, or products that will
rapidly scale.
• Specific solutions for simple features, freeing the team to focus
on solving complex challenges.
• Decision-making knowledge so individual team members make
consistent informed decisions.
• Less, higher quality, reusable design.
• DS are different from team to team. My experience mainly centers
around 1-2 designer teams and 3-10 frontend developers.
15. 15
Our goals
• Categorize and normalize the UI.
• Create a pattern library that serves as the single-source of truth.
• Use common design patterns.
• Improve the design/development handover.
• Reuse components as often as possible.
• Implement improvements across the entire platform rather
than in each feature separately.
22. 22
Divide and conquer
Map components to main user journey.
Subdivide main user journey into smaller flows e.g. inquiry flow,
booking flow.
23. 23
Atomic Design
“A mental model to help us think of our user interfaces as both a
cohesive whole and a collection of parts at the same time.”
– Brad Frost, Atomic design
24. 24
MOVU’s model
FOUNDATION ELEMENTS COMPONENTS TEMPLATES PAGES
Design
tokens/variables
Typography,
color, and space
Smallest
functional units
e.g. Atoms
Don’t make
sense in isolation
Complex interface
modules e.g.
Molecules +
Organisms
Make sense in
isolation
Layouts with
responsive
behavior
Templates with
real content
29. North star ⭐
• Clarity and simplicity over style
• Only one prio 1. No needless parts.
• Design with a perpetual beginner user in mind–simplify tasks
and present meaningful information when it’s most useful
• Unbreakable in every language (localization)
• Know when it’s time to move on. Pragmatic quality at 90%
• Create with reusability in mind, aiming for crafting as well as
possible given existing restrictions.
• Test internally for quality in a timebox.
29
MOVU’s Design Principles
30. 30
Naming
Mix of Atomic Design + CSS BEM ( Block Element Modifier) naming
methodologies. “/” = 📁 e.g. “element / button / primary / active”
Words to use:
• Semantic HTML or Material Design
• Purpose-based naming & real-world inspired naming
A good name is memorable, describes the use and purpose of an
interface module, and explains its visual hierarchy (how loud it is
compared to similar components).
34. 34
9 states of design
The Nine States of Design by Vince Speelman
Nothing Loading None One
Some Too many Incorrect
Correct
Done
35. 35
Step 4: Sync to InVision
Sync the Sketch page to InVision and make sure nothing breaks
(e.g. Anima can be buggy on InVision sync).
36. 36
Another designer opens the branch on Abstract and inspects
changes.
They check that everything was designed as expected, and follows
guidelines established.
Step 5: Internal QA 🔍
37. 37
Step 6: Merge
After Internal QA success, the branch is merged back to master.
Mark as “done” and review with developers.
