Interface Design Bootcamp

INTERFACE DESIGN BOOTCAMP
FUTURE OF WEB DESIGN
Monday, May 16, 2011

Aarron Walter
aarronwalter.com
@aarron

The Big Picture

What is an interface?

This is an interface ...

so is this ...

and this too ...

An interface is a visual
language of action

It’s what’s between you
and other humans

Qualities of a Good
Interface Designer

Empathetic

Thinks Like MacGyver

Stays Focused on
Outcome, not Process

Process:
It’s how we make stuff

deﬁne
design
develop
deploy
APPROVAL APPROVAL APPROVAL
WATERFALL METHOD

deploy
release
APPROVAL
AGILE METHOD
designdeploy
develop
define
designdeploy
develop
define
designdeploy
develop
define

School of Hard Knocks
Small teams can work faster, be more agile, and
require less entropy of communication and
management
Diverse skill sets keep you ﬂexible and on time
Process and documentation are helpful, but
remember what you’re really trying to accomplish
Think modular, reusable, ﬂexible

Respect Between
Design & Dev

Inside MailChimp UX
Only 6 people that combine research and front-
end development
Close, respectful relationship with developers
Keep in close contact with support and customers
Post ideas in common space and invite
conversation
Dedicated to interface consistency

What’s your process?

The Workshop

Learn the Basics

Try What You’ve
Learned

Rinse & Repeat

Project Brief:
Event App That Connects

Project Goals
Help conference attendees connect before, during
and after the event
Bring people together by helping them learn about
other attendees and the activities of events

Stakeholders
Carsoniﬁed
Attendees (that’s you)
Speakers (hey, that’s me!)

UNDERSTANDING USERS

User Research:
Gathering Data

Who do I talk to?
Stakeholders: who do you think your users are?
Customer Advocate: People who speak to
customers directly
Customers: real people using the product
Usage Stats: Google Analytics, etc.
Someone You Know: A person you know fits the
target profile (validate your findings)

Research Methods
User Interviews: one-on-one conversations (in-
person or remote)
Contextual Inquiry: on-site visit with participants
(in-person)
Surveys: multiple choice questions (remote)
Focus Groups: group discussion (in-person)

Types of User Research
In Lab Testing
Focus Groups Online Surveys
QUALITATIVE
BEHAVIOR
QUANTITATIVE
ATTITUDE
Web Analytics

Which methods to use?

Which ever ﬁt your time
and budget

Consider type of project,
and what is already known

The Power of Twitter

Personas:
Artifacts of user research

Keeps Us Focused on
Humans Not Features

Make Them Visible

What’s In a Persona?
A photo (it can be stock)
Name
A short bio
Age
Location
Occupation
Other optional info

Motivations

persona
My internship provided me with the
opportunity to work in Times Square.
I just love all of the lights, action, and
excitement!
Julia has been taking Spanish since high school and is excited to study abroad in
Buenos Aires next spring. She’s traveled a little in the past—to Great Britain for a
vacation with her family and to Mexico for a missions trip—but this is her first time
going abroad alone. Though she has other friends who also plan to study abroad, she
wanted to go at a different time so she would be forced to make friends with the locals
and truly immerse herself in the culture. She’s heard from friends that the maturity
level of some of the students plummets the moment they step on the plane to study
abroad. She hopes they don’t make her look like a “stupid American.”
She’s also heard that the dorms in Buenos Aires aren’t great, which solidified her
decision to do a homestay. However, she’s concerned about commuting to classes,
which she hopes to take at the NYU campus as well as a local university—if the credits
transfer. She doesn’t have a lot of extra cash and is interested in a work study to pay for
souvenirs and some travel around Argentina. Speaking Spanish on the job would also
be great practice, but she isn’t sure what sort of opportunities there are, or even if she’s
allowed to work.
Julia
Age: 19 - 22; Sophomore; Journalism & Communications
Goals: Get a “Big City College” education, cosmopolitan
experience; Build resume with internship; Take new/different
courses; Make new/different friends; Experience different
cultures
Pain Points: Limited courses offered; Costs; Organization
(too much or not enough); Advantages are hidden;
Challenging to transfer credits
Knowledge Lifecycle
THE INFLUENCER
TECHNOLOGY
DOMAIN
EXPERIENCE
1 2 3 4 5
NOVOCTSEPAUGJULJUNMAYAPRMARFEBJAN DEC

design studio
souvenirs and some travel around Argentina. Speaking Spanish on the job would also
be great practice, but she isn’t sure what sort of opportunities there are, or even if she’s
allowed to work.
Activities and Interest
Knowledge Lifecycle
Inﬂuencers
INTERNSHIPS
FULFILLING CREDITS
TAKING ELECTIVES
EXPLORING
SOCIALIZING
NYU TRIAL RUN
SPECIALIZED COURSES
CLASS OFFERINGS
INTERNSHIP
FINANCIAL AID
NYC EXPERIENCE
FULFILLING CREDITS
PARENTAL SUPPORT
NYU REPUTATION
TECHNOLOGY
DOMAIN
EXPERIENCE
1 2 3 4 5
1 2 3 4 5
NOVOCTSEPAUGJULJUNMAYAPRMARFEBJAN DEC

Activity: Personas
Create small teams
Interview stakeholders for the event app
Identify user needs, motivations, and business
goals
Create two to three personas describing
archetypal users of your app

45 minutes

Personas:
Presentation & Discussion

Design Personas:
Emotional Engagement

functional
reliable
usable
pleasurable

Products are
People Too

Design Persona
Brand Traits
Voice
Personality Map
Overview
unfriendly friendly
dominant
submissive
MailChimp
Freddie Von Chimpenhiemer IV is the face of the MailChimp, and the embodiment of
the brand personality. Freddie's stout frame communicates the power of the application,
and his always on the go posture let's people know this brand means business.
Freddie always has a kind smile that welcomes users and makes them feel comfortable
and at home. The cartoon style lets people know that MailChimp offers a fun, and
informal experience. Freddie likes to crack witty jokes, but when the situation is serious,
the funny business is out the window.
MailChimp often surprises users with a funny easter egg, or a link to a goofy YouTube
video. Fun is around every corner, but never in the way of the workﬂow.
The voice of MailChimp is familiar, friendly, and above all human. The personalities of the people behind the brand shines through
with honesty. The voice of MailChimp cracks jokes (ones you could share with your momma), tells stories, and communicates with
the folksy tone that might be used with an old friend.
MailChimp uses contractions like "don't" instead of "do no" because that's how real humans speak to one another. MailChimp uses
sound effects like, “hmmmmm....” to make it sound like youʼre thinking hard, or “Blech, thatʼs awful!” to make it sound like you
empathize. Or is it sympathize? Hmm, too lazy to Google it. Bah, you get the gist. Text for form and button labels are kept lowercase
to reinforce the informality of the brand.
MailChimp likes to start blog posts and other longer copy blocks with a quick story, like “I remember when...” Everybody likes stories.
When people get upset, or make a mistake, MailChimp is always compassionate and sympathetic, and the feedback messages
reﬂect that.
1 Author: Aarron Walter
Fun, but not not childish
Funny, but not goofy
Powerful, but not complicated
Hip, but not alienating
Easy, but not simplistic
Trustworthy, but not stodgy
Informal, but not sloppy

Voice
Hi, Bob. You could be a part-time model.
Oops! Looks like you forgot to enter an address.
High fives! Your list has been imported.
One of our servers is temporarily down. Our engineers are already on the case and will have it resolved
shortly.
Success Feedback
Error Feedback
General Message
Copy
In-App Greeting
Context
We've got all kinds of social features that help you get to know your subscribers and share your
newsletters. Integrate your signup form with Facebook, share your campaigns on Twitter, track subscriber
activity on social networks, and more.
Marketing Copy
Bummer, we don't have any info to report just yet.
Critical Failure
Visual Lexicon
The bright colors in the MailChimp palette convey a sense of
fun and humor, but are slightly desaturated to make them feel
more refined, and not romper room. MailChimp is fun, but it's
also powerful and refined. Neutral colors soften the palette
and strike a healthy balance between the informal and
functional sides of the MailChimp personality.
The voice of MailChimp is familiar, friendly, and above all human. The personalities of the people behind the brand shines through
with honesty. The voice of MailChimp cracks jokes (ones you could share with your momma), tells stories, and communicates with
the folksy tone that might be used with an old friend.
MailChimp uses contractions like "don't" instead of "do no" because that's how real humans speak to one another. MailChimp uses
sound effects like, “hmmmmm....” to make it sound like youʼre thinking hard, or “Blech, thatʼs awful!” to make it sound like you
empathize. Or is it sympathize? Hmm, too lazy to Google it. Bah, you get the gist. Text for form and button labels are kept lowercase
to reinforce the informality of the brand.
MailChimp likes to start blog posts and other longer copy blocks with a quick story, like “I remember when...” Everybody likes stories.
When people get upset, or make a mistake, MailChimp is always compassionate and sympathetic, and the feedback messages
reflect that.
In critical situations like when a server goes down, or a credit card is declined, MailChimp drops the humor and speaks directly.
Copy Examples
Color
MailChimp is easy-going, efficient, and easy to use, and it's
typography reflects it. Simple, sans-serif headings and body
copy appropriately varied in scale, weight and color to
Typography
Interface elements are flat and simple, keeping things easy to
understand and not intimidating. Soft, subtle textures may
appear in places to warm up the space and make it feel human.
Freddie should be used sparingly, and only to interject a bit of
humor. Freddie does not ever give application feedback, stats,
or help a user with a task.
General Style Notes

One of our servers is temporarily down. Our engineers are already on the case and will have it resolved
shortly.
We've got all kinds of social features that help you get to know your subscribers and share your
newsletters. Integrate your signup form with Facebook, share your campaigns on Twitter, track subscriber
activity on social networks, and more.
Marketing Copy
Critical Failure
Visual Lexicon
The bright colors in the MailChimp palette convey a sense of
fun and humor, but are slightly desaturated to make them feel
more refined, and not romper room. MailChimp is fun, but it's
also powerful and refined. Neutral colors soften the palette
and strike a healthy balance between the informal and
functional sides of the MailChimp personality.
Color
MailChimp is easy-going, efficient, and easy to use, and it's
typography reflects it. Simple, sans-serif headings and body
copy appropriately varied in scale, weight and color to
communicate information hierarchy make MailChimp feel
like a familiar, comfortable cardigan that is both functional
and beloved.
Typography
Interface elements are flat and simple, keeping things easy to
understand and not intimidating. Soft, subtle textures may
appear in places to warm up the space and make it feel human.
Freddie should be used sparingly, and only to interject a bit of
humor. Freddie does not ever give application feedback, stats,
or help a user with a task.
General Style Notes
Engagement Methods
Surprise & Delight • Themed login screens commemorating holidays, cultural events, or a beloved individual
• Easter eggs: unexpected moments of humor that may have an overtone of nostalgia referencing
kitschy pop culture of the past.
Anticipation • Random funny greetings at the top of each main page (not in workflow)
Rewards • Giveaways at the end of a major task workflow. Example: T-shirt give aways after completing
campaigns

Design Persona
Brand Traits
Voice
Personality Map
Overview
unfriendly friendly
dominant
submissive
WSOL
WSOL takes on the role of the helpful outsider. Known for our ability to efficiently devise
solutions to complex problems, we're often brought in when an organization needs help.
As outsiders we must be prepared to overcome skepticism – especially relevant since
many WSOL clients have in-house marketing, design and IT teams. By demonstrating
expertise early on (through actions more so than words) the outsider gains the
acceptance and support of the group. The stranger is valued as much for his outside
perspective as for the knowledge and experience accumulated through his travels. With
a bit of clever detective work, and with the support of innovative technology, the outsider
champions the principles of good design and helps clients tackle the challenges of
competing within the technological landscape. Is there one man who can be the
embodiment of such a brand? There is...his name is Michael Knight.
The voice of WSOL should be calm and cool. The voice of an expert who's seen it all, and lived to tell. When clients panic or situations become
tense, WSOL remains strong and collected. The overall tone is casual and personal, so we use contractions and light slang instead of more
formal terms. Trying to sound too formal comes off as stuffy...it's the personal connections we make with our clients that we want to nurture. We
aren't a large faceless agency after all. Call to actions should be assertive but not pushy. We don't need to brag, we let our actions and beliefs tell
our story instead. Copy should also be more about our customers than ourselves.
Copy should be playful when discussing creativity, design and process. When it's time to take care of business, tone should be direct. Michael
Knight does not play games. When we need to make strong recommendations, we take on a "tough love" tone.
WSOL is empathetic and understanding. Reliable and smart. In communications, we want our skills and services to take a back seat to our
wisdom and perspective. Speak first about why we do things, before discussing how or what we do.
1 Author: Dennis Kardys
Witty, but not snide
Confident, but not cocky
Wise, yet humble
Tech Savvy, but not geeky
Charming, but not creepy
Cool, but not aloof
Tough, but not mean

Activity: Design
Personas
Work in small teams
Consider the brand you’re designing for
Create a Design Persona to guide the voice of
your app

30 minutes

Design Personas:

SKETCHBOARDS

Sketchboards Are ...
Collaborative, they let you bring in the whole team
early on
Fast, you can iterate through ideas quickly with
little time invested
The big picture, they help you see a broader
process

Know When to
Protect Your Work

Sketchboards Include ...
Steps in a process
Information about your users
Simple sketches of interface templates
Notes and ideas

How to Work Through Ideas
Move quickly using the 2-up template
Evaluate then combine the best ideas into one
interface in a 1-up template

Activity: Sketchboard
Round up the troops
Create a sketchboard to ﬂesh out tasks, process
ﬂow, and interface concepts for your app
Consider lessons learned from stakeholder
interviews & personas

60 minutes

Sketch Boards:

WIREFRAMES

Simple, fast sketches of
your interface

Wireframes Are ...
Low resolution, they struggle to simulate
interaction
Not about aesthetics, they communicate hierarchy,
elements, organization, and design patterns
Supposed to be fast so you can iterate on ideas
quickly

Konigi
konigi.com/resources

Wireframe or
Prototype?

DESIGN PATTERNS

A Solution to a
Common Problem

The Lingua Franca of
Interface Design

Pattern Tap
patterntap.com

Time Tripper
time-tripper.com/uipatterns

Yahoo Design
Patterns
developer.yahoo.com/ypatterns

Card Stack

Edit In Place

Interface Design Bootcamp

Recommended

Recommended

More Related Content

Similar to Interface Design Bootcamp

Similar to Interface Design Bootcamp (20)

More from Aarron Walter

More from Aarron Walter (6)

Recently uploaded

Recently uploaded (20)

Interface Design Bootcamp