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.
⢠SpeciďŹc 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 ďŹows e.g. inquiry ďŹow,
booking ďŹow.
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 ModiďŹer) 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.