PowerPoint Presentation

Beyond FunctionalityUX

CC

CarolynBrian

CC & BH

CC: We wanted to start our workshop with a picture of the side of a garage. Today we're going to talk about how we perceive human qualities in everything, and why understanding this is critical to designing successful mobile apps and websites.

In this workshop, you will...Develop a design personality by exploring your personal values, using them to ground your decisions Learn design principles that make solutions more human, by considering emotion and providing delightConceptualize an experience in order to find and design for key moments that make or break your users experience

CC

Play Brand-y Land (in the key of Taboo)Divide into even teams. Each person take 5 slips of paper. Without talking, write down one brand on each piece of paper. Fold each one twice and put all in the same container. Flip a coin to see which team goes first. Teams, pick your starter.Each team member has 60 seconds to get their team to guess as many brands as possible - WITHOUT saying the brand name. Think of the experience of the brand, or its messaging. The player keeps each correctly guessed answer slip. If you say the name or pass, the slip goes back in the bowl (dont reveal it! The other team may get it next).Alternate rounds. When slips are gone, the team with the most slips wins!

CC

Usable is No Longer Good Enough

We've dedicated much of our history to making products usable by focusing on the flaws in our designs.

BH: We have entered a new era in our industry. We've reached a certain level of success in preaching the importance of user experience design and selling it as a must-have for designing usable products. But the bar has been raised and companies are now seeing that 'usable is not good enough' and more is needed to differentiate your company or product.

BH: This is Jakob Nielsen's website circa 2005, which is representative of many sites on the web during this time. Delivering information was the primary goal, while creating a memorable experience and forming an emotional attachment with users took a backseat.

"...the emotional side of design may be more critical to a product's success than its practical elements"- Donald NormanEmotional Design

BH: Donald Norman introduced this paradign shift when he wrote Emotional Design, following The Design of Everyday Things. He outlines three areas in which products affect us: Viscereal, Behavorial, Reflective. Viscereal is our gut reaction to a product at a subconscious level. Behavorial includes how the product works and our interactions with it. Reflective provides the emotions we associate to a product based on our experiences who we are as people. In a TED Talk, he describes these as 3 ways good design makes you happy, and cheekily states: "the new me is 'beauty,' and I'm only saying positive things from now on."

Learned helplessness has flipped due to higher expectations

CC: The people using our products have also developed higher expectations. The concept of learned helplessness with technology has flipped from the user feeling ignorant to the product being deficient. The emotional context of mobile 'in the moment' raises these stakes even higher.

"Psychology should be as concerned with strength as with weakness"- Martin SeligmanPositive Psychology

BH: This shift to focus on the positive is similar to another field. Martin Seligman first introduced the concept of "positive psychology." Some of you may be familiar with his TED talk. The field of psychology has changed, where the goal of professionals should not be to only treat mental disorders and make unhappy people less unhappy; but to better understand what creates happiness and how all of us can increase it in our lives.

Products that anticipate needs, inspire trust, acknowledge emotion, and provide delight are often the ones that are not only used, but shared and loved.

BH: Products that go beyond 'usable' to meet these needs are the most successful because they create a personal connection with their users.

"Making websites usable is like a chef striving to make food edible."- Aarron WalterDesigning for EmotionVO:

BH: Aarron Walter wrote a phenomenal book titled Designing for Emotion that describes this extra layer of emotional design that we all need to be striving for. Only when the core of your product is solid--functional, reliable, and usable--can this layer be added.

Adding this essential layer to your design does not come from adding bells and whistles...

It comes from creating a personal connection with your user.

BH

A Personal Connection with People

CC

Personal connections are about building rapport

CC

"...the doctor has to take the time to to explain what happened and to answer the patient's questions -- to treat him like a human being. The doctors who don't are the ones who get sued."

BH: The importance of rapport is evident in Malcolm Gladwell's book, Blink. In the book, he describes how insurance companies uncovered data to analyze the potential risk in insuring certain doctors against malpractice lawsuits. One's first instinct in doing this would be to research the doctor's training, credentials, and work history. But it was found that more could be gleaned from observing the doctor's interaction with his/her patients. The patient's feelings toward the doctor have an overwhelming affect on whether the patient sues the doctor. Gladwell writes that patients do not sue because of shoddy healthcare; they sue because of shoddy healthcare and because they feel they were treated poorly. Patients that sue claim they were ignored, weren't listened to, or were rushed. People do not sue doctors they like. A study analyzed the conversations of doctors/patients across two groups: those who have been sued and those who haven't. Doctors who haven't been sued showed empathy, engaged more in active listening, spoke with a warmer tone, and spent more time with their patients.

What are the traits of a person you trust?

BH

What Are the Traits of a ...

CLOSE FRIEND

________________________________________________________________________________________________________________________________________________________________________________

TRUSTED DOCTOR

________________________________________________________________________________________________________________________________________________________________________________

GOOD BUSINESS PARTNER

________________________________________________________________________________________________________________________________________________________________________________

BH

How does technology build rapport?

CC

A Personal Connection with Technology

CC

When you think of technology that exhibits human traits, what comes to mind?

CC

CC and BH

http://www.newrepublic.com/blog/the-study/87039/the-volkswagen-beetles-formerly-friendly-face

http://www.anthropology.at/people/kschaefer/publications/pdfs/G-Eigene%20Dateien-LITERATUR-Windhager_etal_2008_facetoface_cars.pdf

CC: The Volkswagon Beetle has been in production for 65 years, the longest running single design in automative history. A study was conducted in 2008 to explore the popular belief that different car designs project different personalities. Partipants rated 38 different cars using 19 traits. Researchers identified that the majority of participants view "powerful" as an important trait, whereas the Beetle appealed to those favoring "cute."

VO: TBDhttp://voices.yahoo.com/siri-has-attitude-over-50-funny-comebacks-11696036.html

CC

FAILS

CC

CC

CC

CC

CC

https://www.youtube.com/watch?v=CNdAIPoh8a4

BH

Even if an interface does not contain cheesy anthropormorphic figures,users should feel there is a human behind the design

CC

...but in a good way

CC

Stephen Andersenhttps://www.youtube.com/watch?v=hkAFdIrTR00

CC

This is even more critical for mobile solutions

CC

Starting with Core Values

CC

What would you take a stand for?

CC

CC

Thanks to Jim Cohen of Spark for this diagram and the examples of COFFEE BEAN and TEA LEAF, HERE, and Starbucks.

CC

Heres a sample challenge to build on through this workshop

CC

TooCooks ChallengeToo often cooking can become the lonely job of an individual. Sometimes it seems like kitchens only work for one - or for two people who cook together often. But cooking can be educational, fun, and collaborative. It can bring together people who may not know each other well, or those looking for a new activity to try.

TooCooks is a solution that makes cooking with another person easier and more fun, regardless of their level of skills.

CC

TooCooks Challenge: PersonasLawson, 25 years old Lawson moved to Chicago for work about a year ago. Hes at a point in his life where hes looking for a serious relationship. Hes excited about Jessica, and for this date he wants to plan something more interesting than a restaurant and a movie.GoalsImpress Jessica both with his home, and with his desire to develop a serious relationship.Have a fun date that helps the two of them get to know each other better.

FrustrationsSo many recipe sites call for ingredients or utensils that he doesnt have yet! He doesnt want to buy half his kitchen.Lawson doesnt know if Jessica is a great cook or a pure beginner. An overcomplicated recipe could backfire. He wants to look open and fun, but not ridiculous.

Megan, 36 years old (with Angie)Megan recently married Ben, who has a 10 year-old daughter named Angie. Megan wants to get to know Angie in a way thats friendly and home-oriented. Shed like to be an important and positive person in Angies life.GoalsStrengthen her relationship with Angie.Form traditions for their new home together.

FrustrationsMost nights Megan, Angie, and Angies father end up in front of the television. Its easy but impersonal. Megan wants an interesting way to spend one-on-one time with Angie doing something active theyll both enjoy.Angie hasnt done much cooking before and she can get anxious when faced with a challenge she doesnt understand. Megan doesnt want Angie to get stressed out about making something perfect. She just wants them both to have a good time creating something together.

CC

Discuss this challengeDescribe times youve cooked with others. What was good about it? What was frustrating?If you were on the design team for this app, what values of your own would you focus on related to this challenge?

CC

CC

The French

CC

The British

CC

In the 1970s, Ann C Noble, professor emeritus of the University of California Davis created the aroma wheel

CC

Brand AttributesCorporateCutting-EdgeDecisiveDeliberateDetailedDominatingEducatedElitistEnergeticEssentialEthicalExactingExcitingExclusiveExperiencedAdaptableAdventurous ApproachableAssertiveBusyCandidCaringCommercialCommunalComplexConciseConservativeConfidentConfidentialConscientiousFamilialFearlessFreshFriendlyFunFunctionalGivingGrowingHeavyHonestHopefulHumbleImpactfulInformedInnovativeInspiringModernNostalgicOpenOrganicOrganizedOutgoingPoliticalRefinedRefreshingSafeSelf-awareSimplisticSpontaneousStableSterileTimelessTransparentTrustedVibrantWarmWelcomingYouthful

ADD YOUR OWN:

ADD YOUR OWN:

CC

CC

As a group, pick 3-5 attributes of focus for your TooCooks solution. These are elements of your design personality.

CC

CC

Write descriptors for your wordsEach person take a different one if possible

CC

Voice and Tone

CC

Brand VoiceHow you speak when youre speaking as your brand - the personality expressed by the accent, choice of words, and other easily recognizable qualities. Tone gets into psychological qualities as well (like optimistic).

CC

Define Your Personality

UNIQUEWhat sets you apart from your competition?

TRAITSWhat traits make up your personality?______________________________________________________________________________________________________________________________________________________________________________

What are you NOT?

VOICEIf your solution could talk, how would you describe its voice?______________________________________________________________________________________________________________________________________________________________________________

VISUALIZEDraw your solution as if it were a person (or animal or supernatural creature)

BH

Brand Voice KaraokeYoure the brand manager for a popular fast food chain thats announcing the addition of a new burger to its menu, via Twitter.Generic Tweet: Our new mini-burgers are so delicious, you wont be able to eat just one!

Re-write example for a haughty, designer burger chain for busy runway models: Oooh, la-la. Our scrumptious mini-burgers are so in dahling, youll eat your dress size.

CC

Brand Voice KaraokeRewrite the tweet: Our new mini-burgers are so delicious, you wont be able to eat just one!

As a high-seas, adventure-themed burger chain for little boys who want to be pirates

CC

CC

CC

CC

Now try it with our challengeWrite one playful message letting your user know that they don't have the right equipment to make creme brulee (no kitchen torch).Write one straightforward message letting the user know that their account information may have been accessed by hackers.

CC

CC

TooCooks Challenge: Potential FeaturesA cook profile, which stores information on a players skill level, food preferences, and allergies. This should be gathered via a short questionnaire and stored for use with multiple cooking events.A kitchen profile to determine what kinds of equipment or utensils will generally be available.

An event picker that allows players to choose the tone of the cooking event (such as Romantic, Educational, Silly), the meal type (breakfast, lunch, dinner), and how many people are dining.Recipe suggestions (3-6) based on data from the event picker, the kitchen profile, and cook profiles, with a way to choose one of the recipes.

A recipe stepper for the chosen recipe, with timed tasks and audible alerts customized for each cook playing. A fun gap-filler! Consider conversation starters, mini-games, trivia, or educational challenges. These will appear when players are waiting for water to boil. Players should be able to pause and resume.PROFILE{STEPPER{EVENT{

CC

Storyboard a FlowAs a group, choose a feature set to dive into.3X2 individual storyboarding. Shoot for 2 minutes a section.Share with 1-2 people in your group.

CC

Making Mobile Personal:Design Principles

CC

CC

CC

SPONGESPARKSPLATTERSCULPTSTORYTELLOne of the hardest jobs of a design team is effective use of a SAVVY NOChoose a design challenge and immerse in the related context. What do you want to make better? For who?Take insights from Sponge. Define your audience and their needs. Generate the solution idea you want to design.Brainstorm multiple ideas (quantity over quality). Explore possible features and content.

Form and refine your solution with user insights and design strategy.

Express the importance and meaning of your solution.

CC

Pick a card!Pair up (2-3 max) within your groups and choose 1 card for each pair

CC

Design Principles Know your user / Be attentiveBe fun to be aroundShow your personalityAnticipate needsSpeak the user's languageMake a good first impressionSurprise with delightHave compassionDisplay a sense of humor (when appropriate) Be engagingEmbrace Your Unique Character (Kings and 6s)Be Attentive & Anticipate Needs (Queens and 5s)Show Empathy & Compassion (Jacks and 4s)Inspire Curiosity & Playfulness (10s and 3s)Surprise & Delight (9s and 2s)Use Humor When Appropriate - (8s and Aces)

BH: Take out 10s and other cards if needed.

1. Embrace Your Unique Characterhttps://www.youtube.com/watch?v=DYA_ivyj3kE

BH or CC: Southwest and how it encourages its flight attendents to show their personalities. Your product should also do this by presenting a unique design that reflects your personality.

BH

Waze

BH: Waze has separated itself from other mapping applications by exhibiting a unique personality through its design and voice/tone.

2. Be Attentive & Anticipate Needs

CC

VO: This is a good yet subtle example of making a design more personal by anticipating needs. Boxes of Kleenex tissues have started adding off-white tissues at the bottom to signal an almost empty box.

CC

Donna

BH: Donna was recently purchased by Yahoo. It offered to send an email to meeting attendees if you're running late, call Uber for offsite meetings, and anticipates travel times.

Foursquare

BH: Foursquare remembers to say "happy birthday" to its users while also offering (albeit insincere) flattery. In the book, "Influence...," the author describes how flattery works even when the recipient recognizes disingenius motives.

PocketVO: Pocket makes it easy to aggrevate bookmarks by anticipating this need when a user opens the app with a URL copied to the clipboard.

BH

don't be creepy

CC

Google Now

VO: GoogleNow is a very personal example that learns about its users. It avoids being creepy by telling users how it obtained its information.

CC

Show Empathy & CompassionLouis C.K.

3. Show Empathy & CompassionVO: Discuss how "empathy statements" are now being used by customer service call centers, such as Comcast

BH

FAIL

BH

Hipmunk

BH: Hipmunk understands that the majority of us don't get excited about air travel. They display flights in their search results according to degree of "agony."

Pinterest

BH: Pinterest's communications serve as good examples of showing compassion, anticipating needs, and speaking the user's language.

VO: Appealing to curiosity & playfulness made the Subservient Chicken of Burger King one of the most successful marketing campaigns of all time.

4. Inspire Curiosity & Playfulness

BH

Tinder

BH: The popularity of Tinder has surpassed other dating apps because it peaks curiosity & adds playfulness.

Duolingo

CC

http://www.candlerblog.com/2012/01/23/imdb-500-error/

5. Use Humor When Appropriate

CC

Yahoo

BH: Yahoo injects subtle humor into its registration flow

Moosejaw

BH: Moosejaw provides a more direct attempt at humor that is fitting of its brand

VO: Most of us are familiar with the steps Apple will take to add delight to its products, from its Apple Stores, to packaging and delivery, to user experience.

6. Surprise & Delight

BH

VO: Google Maps is full of subtle elements of delight (e.g., shadows based on time of day, changing streetview character)

BH: Shadows change, the street view guy flying and having a surfboard in Hawaii. Demo?

https://www.kickstarter.com/

BH

Timehop

Tumblr VO: (like/heart) - good example of more subtle surprise and delight

CC

For our hot potatoWhat did you write down?Words describing the objects look and feelFeatures you would say this object has

CC

Jared Spool provides this spectrum:FrustrationNeutralDelight

"It doesn't suck, but it's not remarkable, either"this is a reductive process......whereas this is more additive

CC

http://baymard.com/blog/kano-model

CC

A vocabulary to start: Kano AnalysisKano Analysis Questions (per feature)What do you think of the product if it includes feature X?What do you think of the product if it does not include feature X?There are three valid responses for either question: I like it, It doesnt matter to me, or I dislike it.

CC

Example: Air TravelBasic features:Your flight wont be cancelledYour ticket guarantees you a seat

Performance features:How much legroom you haveNumber of nonstop flights availableDelighters:A comedian at the intercomFree gourmet snacks

CC

ActivityNow lets mark2 features that you consider BasicUsers are neutral about having them but dissatisfied if theyre absent. 2 features that you consider PerformanceUsers are satisfied when present, dissatisfied when absent.2 features that you consider DelightersUsers are neutral when absent but satisfied when present.

CC

http://baymard.com/blog/kano-model

CC

MailChimp

CC

Applying Principles to a Flow

CC

Create a new 3x2 iteration of your flowUse your design principle to focus Consider what you liked about your buddy's flow from round 1Think about the emotions your users are probably feeling. Does that affect your design?

CC

Try this again, with another challengeIf you have a current app, assess it against todays design principles. Have a good one to share? Partner with those in your group. If not, we have a second challenge at Create a design personality worksheet

CC

Carolyn Chandler@chanancarolyn@admci.orgBrian Henkel@bhenkelbrianhenkel@gmail.com