Interface Design Bootcamp

INTERFACE DESIGN BOOTCAMPFUTURE OF WEB DESIGN

Monday, May 16, 2011

Aarron Walteraarronwalter.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

define

design

develop

deploy

APPROVAL APPROVAL APPROVAL

WATERFALL METHOD

deployrelease

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 flexible and on time

Process and documentation are helpful, but remember what you’re really trying to accomplish

Think modular, reusable, flexible

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

Carsonified

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

A short bio

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 !rst time going abroad alone. Though she has other friends who also plan to study abroad, she wanted to go at a di"erent 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 solidi!ed 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/di"erent courses; Make new/di"erent friends; Experience di"erent cultures

Pain Points: Limited courses o"ered; 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 5NOVOCTSEPAUGJULJUNMAYAPRMARFEBJAN 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.

Challenging to transfer credits

Activities and Interest

Knowledge Lifecycle

Influencers

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

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

Personality Map

Overview

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

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.

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

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 withthe 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

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 functionaland 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

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

Design Persona

Brand Traits

Personality Map

Overview

Success Feedback

Error Feedback

General Message

In-App Greeting

Context

Marketing Copy

Critical Failure

Visual Lexicon

unfriendly friendly

dominant

submissive

MailChimp

Copy Examples

Typography

General Style Notes

Engagement Methods

Design Persona

Brand Traits

Personality Map

Overview

Success Feedback

Error Feedback

General Message

In-App Greeting

Context

Marketing Copy

Critical Failure

Visual Lexicon

unfriendly friendly

dominant

submissive

MailChimp

Copy Examples

Typography

General Style Notes

Engagement Methods

Design Persona

Brand Traits

Personality Map

Overview

Got something on your mind? Let's work together.

We're sorry. We'll get to the bottom of this immediately.

Our approach to design is simple. It needs to work well, look great and make sense!

We know all about what works (and what doesn't) on the web. We're happy to share our knowledge and talk through your project with you.

Core Messages

Something's wrong

Humble statements

Call to Actions

Context

We've had the fortune of working with some really great clients. Here are a few:

Marketing copy

Visual Lexicon (optional)

Bold saturated colors for creative, design and strategic communications. Think invigorating, vibrant, desirable. Cool neutral colors to reinforce a sense of reliability for hosting and technical materials.

unfriendly friendly

dominant

submissive

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.

Avoid sales and marketing jargon at all cost.

Copy Examples

Semi-bold sans-serif headers. Lots of whitespace. Sans-serif body copy. Avoid dense blocks of text. Always break up large blocks with sub-headings. Quotes should be displayed in an italicized serif typeface. (Exact typefaces to follow)

Typography

Bright images paired with simple concise text. Never use default stock photography.

General Style Notes

Engagement Methods

Scarcity • We have a valuable resource, knowledge. Any email marketing should be permission based: notifications and subscriptions by request only. When we get somebody to ask for the information, they'll be more likely to actually read it, not just skip or delete it.

Surprise • Bury easter eggs in 404 pages, or in otherwise dull site pages. Add small bits of playful copy in unexpected places within our own site and marketing materials.

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:Presentation & Discussion

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 flesh out tasks, process flow, and interface concepts for your app

Consider lessons learned from stakeholder interviews & personas

60 minutes

Sketch Boards:Presentation & Discussion

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

Konigikonigi.com/resources

Wireframe or Prototype?

DESIGN PATTERNS

A Solution to a Common Problem

The Lingua Franca of Interface Design

Pattern Tappatterntap.com

Time Trippertime-tripper.com/uipatterns

Yahoo Design Patternsdeveloper.yahoo.com/ypatterns

Card Stack

Edit In Place

Interface Design Bootcamp

Technology

The Business of Design Bootcamp - Session 1 of 2

Primer on UX Design - Gramener Bootcamp Mar'16

Design Business Bootcamp

Bloc Online Bootcamp: UX Design Immersive

Design Thinking Bootcamp

BootCamp Program Design for Fat Loss

UI Design Mini Bootcamp

Bootcamp Agile: Agilidad, Scrum, Kanban & Design Thinking

Stanford's Design thinking Bootcamp bootleg 2010

Design studio for Dev Bootcamp

exchange Server - Interface Technical Training · 2020-01-14 · EXCH600: Microsoft Exchange Server 2016 / 2013 Ultimate Bootcamp The Microsoft Exchange Server Ultimate Bootcamp will

February - Design Thinking Bootcamp

Interface Design

Fairphone design bootcamp

Design Thinking For Learning: Bootcamp€¦ · Design Thinking for Learning Exclusively for ISV Member Schools, the DT4L Bootcamp explores the NoTosh Design Thinking Process as a

User Interface Design. Introduction Overview of guidelines for user interface design Principles of user interface design User interface design process

Software Engineering User Interface Design Slide 1 User Interface Design

Design Bootcamp

Möbius Bootcamp - Maplesoft · PDF fileMöbius Bootcamp Online Course Development Workshop University of Waterloo + Maplesoft WORKSHOP AGENDA Week 1 UW – CEL Course Design Bootcamp

Web Design Bootcamp - Day2