In the presentation, you'll learn how digital design requires a systems-based approach employing concepts from Lean UX and Atomic Design. Topics that are covered: - Systems vs. Pages - Input/Output Framework - Influences from Lean UX - Influences from Atomic Design - Tools & Process Tips Slides by Sam Moore Senior Design Consultant at Cantina

1. Design /o:
Creating Visual Interfaces
for Digital Systems

2. Sam Moore
Senior Design Consultant
Visual & Interac"on Design,
User Experience
sam.moore@can"na.co

3. Agenda
• Atomic Design & Systems Thinking
• Design i/o Framework
• Inputs
• Outputs
• Lean UX Principles
• Example Project
• Ques"ons

4. Atomic Design &
Systems thinking

5. Atomic design by brad frost
atomicdesign.bradfrost.com

6. Pages vs. Components

7. context
Loca"on
or Region
User
Permission
Device Type Time of Day

19. Atomic Design Process Tips
• Iden"fy the endpoints
• Consider costs and business impacts
• Focus on component rela"onships

20. Design /o Framework

21. Visual Design
Process
Inputs Outputs
Design i/o
Component Audit
Design Preference Test
Mood Boards
Brand Analysis
Metaphor Questions
Flows Prototype
Interaction Prototype
Full HTML Prototype
Pattern Library
Comps/Page Views

22. Inputs to design

23. Metaphor questions
If your website was a car, what
brand would it be?
If your product had a celebrity
spokesperson, who would it be
and why?

24. Metaphor questions
• Use familiar brands as guideposts
• Generate descriptors and perceived brand values
• Can uncover differences in opinion between various stakeholders
• Help get a discussion started about look and feel

25. Brand analysis

26. Brand analysis
• Iden"fy reusable elements and uncover the backstory
• Understand what guidelines currently exist, and how
much they are adhered to
• Discover opportuni"es to be!er differen"ate from
compe"tors

27. component audit

28. component audit
• Iden"fy the types digital components needed
• Uncover inconsistencies amidst the UI
• Find gaps and pa!erns

29. design preference test

30. design preference test
• Compara"ve either/or survey of styled UI components
• O$en helpful following a Components Audit
• Helps establish data-based decision making
• Good for ge%ng feedback from a large group of stakeholders

31. Mood Boards

32. Mood Boards
• Focused on gathering inspira"on from other sources
• Good for exploring diverse direc"ons
• Quick to create, lots of tools available

33. Visual Design
Process
Inputs Outputs
Design i/o
Component Audit
Design Preference Test
Mood Boards
Brand Analysis
Metaphor Questions
Flows Prototype
Interaction Prototype
Full HTML Prototype
Pattern Library
Comps/Page Views

34. Design outputs

35. comps/page views
• Show how atomic components add up to
template layouts
• Important for seeing the overall look and
feel on broad device types

36. pattern library/style guide
• Explains all the components and their
various states and modes
• Provides the building blocks for future
layouts and features
• Helps promote common understanding
of UI and visual style for teams

37. flows prototype
• Sta"c screens synced together with
clickable hotspots
• Very quick and easily editable
• Helps uncover user flow issues
• InVision, Marvel

38. interaction prototype
• Specific anima"ons and micro-interac"ons
• Helps demonstrate final visual polish
• Flashy, but focused
• Atomic, Principle

39. full html prototype
• The real thing, built right in the browser
• Helps to avoid risk, by working directly in
the final medium
• Especially important for complex or
unproven func"onality

40. Visual Design
Process
Inputs Outputs
Design i/o
Component Audit
Design Preference Test
Mood Boards
Brand Analysis
Metaphor Questions
Flows Prototype
Interaction Prototype
Full HTML Prototype
Pattern Library
Comps/Page Views

41. Lean ux

42. Lean UX Principles
• Frame the vision, be explicit about
assump"ons
• Select lightweight, appropriate tools
• Work collabora"vely, bringing
everyone into the design process
• Share progress earlier, explain
thinking and direc"on
• Test and validate quickly, ensure that
the user is the focus

43. Lean Process Tips
• Work in a war room, at least part "me
• Setup regular checkins - not presenta"ons of deliverables
• Give context, be clear which problems you’re trying to solve

44. example project

45. Multi-Level Assessment App
Flows
Prototype
Version 1.0
Product
Metaphor Questions
Brand Analysis
Design
Preference Test
Style Guide
Component Audit

46. KEy Takeaways
• Clearly define the design problem to solve
• Select and execute the appropriate input exercises
• Emphasis Lean UX principles and Atomic Design methods
• Always be thinking about the system of components
• Focus on gathering user feedback

47. About cantina
• Boston-based digital design and development agency
• Founded in 2007, 60+ employees
• We help clients like Putnam Investments, John
Hancock, CUNA Mutual Group, Epsilon, and Pearson
deliver be!er digital products for their customers
• Can"na’s people turn great ideas into digital reality,
execu"ng with the best design and development
techniques available