Design /o: Creating Visual Interfaces

for Digital Systems

Sam Moore

Senior Design Consultant

Visual & Interac"on Design,User Experiencesam.moore@can"na.co

Agenda• Atomic Design & Systems Thinking

• Design i/o Framework

• Inputs

• Outputs

• Lean UX Principles

• Example Project

• Ques"ons

Atomic Design & Systems thinking

Atomic design by brad frost

atomicdesign.bradfrost.com

Pages vs. Components

context

Loca"on or Region

User Permission

Device Type Time of Day

Atomic Design Process Tips• Iden"fy the endpoints

• Consider costs and business impacts

• Focus on component rela"onships

Design /o Framework

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

Inputs to design

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?

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

Brand analysis

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

component audit

component audit• Iden"fy the types digital components needed

• Uncover inconsistencies amidst the UI

• Find gaps and pa!erns

design preference test

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

Mood Boards

Mood Boards• Focused on gathering inspira"on from other sources

• Good for exploring diverse direc"ons

• Quick to create, lots of tools available

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

Design outputs

comps/page views• Show how atomic components add up to

template layouts

• Important for seeing the overall look and feel on broad device types

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

flows prototype• Sta"c screens synced together with

clickable hotspots

• Very quick and easily editable

• Helps uncover user flow issues

• InVision, Marvel

interaction prototype• Specific anima"ons and micro-interac"ons

• Helps demonstrate final visual polish

• Flashy, but focused

• Atomic, Principle

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

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

Lean ux

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

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

example project

Multi-Level Assessment App

FlowsPrototype

Version 1.0Product

Metaphor Questions

Brand Analysis DesignPreference Test Style Guide

Component Audit

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

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