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.

1. D E S I G N C A S E S T U D Y
using Sketch, Abstract, Anima, and InVision
Starting a
design system
with MOVU

2. 2
H E L L O ! I A M
Mar High
UI/UX System Designer
hello@marhigh.com
Design systems circa
🌱 2014
🏁 2015

3. 3
Previous projects

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

5. 5

6. 6

7. 7

8. 8

9. 9

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.

11. 11
MOVU’s styles before the Design System

12. 12
MOVU’s colors before the Design System

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.

16. 16
The setup: Sketch + Anima (flexbox)

17. 17
The setup: Sketch + Anima (flexbox)

18. 18
The setup: Abstract (version control)

19. 19
The setup: InVision

20. 20
The setup: Google docs

21. 21
Let’s dive in!

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

25. 25
Step 1: Interface inventory

26. 26
Step 2: Create branch in Abstract

27. 27
Step 3: Reduce and refactor checklist
✔ Foundations
✔ Design Principles
✔ Naming
✔ Accessibility
✔ Interactive states
✔ Restrictions (e.g. max character count)

28. 28
First step: Foundation (design tokens)

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).

31. Naming promotional components
•
StickerBillboard hero Poster banner

32. 32
Accessibility at AA standard

33. 33
Interactive states
Buttons in Design Systems by Nathan Curtis

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.

38. 38
Foundation (design tokens)

39. 39
Elements

40. 40
Components

41. 41
Templates

42. 42
Pages

43. 43

44. 44
Our challenges
Dependencies & performance
• Syncing issues, unable to upgrade Sketch version, memory issues.
Optimism
• 4 months = 3 products
• 4 months = 1 product
Integration of Design System “UX Designer consumers”
• Setup became a hurdle instead of helpful, switched to Balsamiq.

45. 45
Our wins
Mapping elements and components to user journey flows
Version Control (Abstract)
Internal QA
Naming
Slack design systems community

46. 46
http://design.systems/slack/

47. 47
THANKS!
Mar High
UI/UX System Designer
hello@marhigh.com