A healthy design consist of adaptable, re-usable chunks and a clear vision. The benefits of developing a usable & living designguide is often overlooked. As a result, many products fail to deliver consistent designs efficiently and loose time-to-market. In large corporations, with many ongoing projects, designers and developers continuously working on the same product, how can UX practitioners prevent delivering an inconsistent user experience leading to less intuitive interactions and duplicate code slowing down page-speed? From a large corporation viewpoint, this session looks at the steps towards creating a consistent and efficient design.

1. ➔ www.steria.no
trim your design
KEEP IT HEALTHY
From a large corporation viewpoint, this session looks at
the steps towards creating a consistent and efficient design
and
How to

2. ➔ www.steria.no
How to trim your design and keep it healthy
@jflusund@jflusund
The steps towards creating a consistent and efficient design
Flickr - Ruth Hartnup

4. DESIGN
re-usable

5. DESIGN IS MORE CONSISTENT AND
re-usable
intuitive

6. We are not designing
pages, we are designing
systems of components.
-Stephen Hay, from Brad Frost´s blog post on Atomic design June 10, 2013.

7. Flickr - Ruth Hartnup
THE MAIN
challenge...
THE MAIN
challenge...

8. TO KEEP THE DESIGN SYSTEM HEALTHY,
DUPLICATE DESIGNS
DUPLICATE CODE HARMING PERFORMANCE
INCONSISTENT USER INTERFACE
used and maintained
The main challenge:

9. Creating the
design system
DEVELOP

10. MOTIVATE
Be clear on challenges
and benefits

11. Flickr - John Jordan
Content:
Needs matrix
Common goals
Challenges
Activities:
interview stakeholders
Developer meetups
Designer meetups

12. TIME
AWARENESS
CORRECT USE
CONNECTIONS
IDENTIFYING
challenges

13. TIME
AWARENESS
CORRECT USE
CONNECTIONS
IDENTIFYING
challenges

14. TIME
AWARENESS
CORRECT USE
CONNECTIONS
IDENTIFYING
challenges

15. TIME
AWARENESS
CORRECT USE
CONNECTIONS
IDENTIFYING
challenges

16. TIME
AWARENESS
CORRECT USE
CONNECTIONS
IDENTIFYING
challenges

17. TIME
AWARENESS
CORRECT USE
CONNECTIONS
IDENTIFYING
challenges

18. Needs & benefits
matrix
Communication
Customers Creators Managers
Operational
efficiency
Usability &
Performance
TTM

19. healthy design faster is the sweetspot
OPERATIONAL
EFFICIENCY
creators
customersmanagers
USABILITY
PERFORMANCETTM

20. from LO-FI to launch

21. DESIGN IS MORE CONSISTENT AND
re-usable
intuitive+ improves performance
+ less cognitive load

22. If I have learnt anything
from working in large
distributed teams, it's that
communication is key.
- Paul Robert Lloyd

23. Creating the
design system
MOTIVATE
DEVELOP

24. adapt the content
to fit your needs...
Content:
CSS conventions
Design rationale
Vector archive
Design Chunks
Activities:
Developer/designer pairing
Designer Days
Design studio
Design Critique

25. Develop
DESIGN SYSTEM STRATEGY
code structure design strategy

26. Teacher designed by gb from the Noun Project
DESIGNER DAYS

27. .play

28. DESIGN STUDIO
DESIGN CRITIQUE

29. Always design a thing by considering
it in its next larger context - a chair in
a room, a room in a house, a house in
an environment, an environment in
a city plan.
-Eliel Saarinen

31. A beautiful design system is about
finding the same balance of consistency
and variety. Too systematic and the
design becomes predictableand repetitive.
Too much variation and the system is
confusing and overwhelming.
-Allison Wagner

32. Integrating the
design system.
MOTIVATE
DEVELOP
STICK
make it

33. Content:
Present new Design Chunks
Show new Design results
Share the Design System
Train new users
Activities:
Presentations
Meetups
Designer Days
Video conferences

34. Document and
integrate the process
of iterating on
designs.
MOTIVATE
DEVELOP
STICK
REPEATABLE
make it
make it

35. Flickr - Lesley Fryer
Content:
Findings from revisions
Changes in trends and business
Usability findings
Emerging trends and needs
Activities:
Measure progression in design revisions
Design Managment
Identify re-usable chunks
Iterate on design chunks

36. Flickr - Jasmin Hussain
ON DESIGN CHUNKS
ITERATEON DESIGN CHUNKS
ITERATE

37. OptimizeDevelop
Make it
stick

38. Optimize based
on feedback
MOTIVATE
DEVELOP
STICK
REPEATABLE
OPTIMIZE
make it
make it

39. 5 10
7
Content:
Challenges
Needs
Goals
Activities:
Collect feedback
Adjust strategy and process
Designer meetups
focus groups with developers

40. The 5 steps towards
creating a consistent
and healthy design
MOTIVATE
DEVELOP
STICK
REPEATABLE
OPTIMIZE
make it
make it

41. @jflusund
www.steria.no
Thanks!