Posterous theme by Cory Watilo
Charles Erdman

The BLITZ User Experience Experience

Knowledge sharing from IxDA '11

Charles is an Experience Lead at the Blitz Agency. He likes cardboard animals, chai tea lattes, the photography of Michael Kenna, deep powder days, the smell of hockey locker rooms, random loons on the Venice boardwalk wearing roller skates and carrying boom boxes. LA rocks (and Colorado ain't half bad either).

TwitterFacebookLinkedIn

Day 1/ Afternoon Session: Defining Experiences Using Storyboards

Overview
Each project presents a series of challenges. There are challenges and unknowns to the current reality and then the future design solution. How do we make sense of and capture all the issues? Start by storyboarding a series of scenarios or user stories to reveal where the opportunities are... a user-centered approach.
In Application: prototype the experience using sticky notes (modular), comic panels, whiteboarding, etc.

1. DEFINE CURRENT STATE
Develop some user personas- define your characters (ethnographic research may help here)
Define the setting (again, can some initial research provide better texture?)
Write the script with the story elements (not the ideal version, the real version... top-line).
Make it visual...
Analyze the Xp.

2. DEFINE A FUTURE, IDEAL STATE
Brainstorm (Drawing upon research if possible)
Filter and prioritize the best ideas. Drive the conversation by understanding core needs and motivations.
Shape the future experience.
Reorganize the story to fit the new environment.
Pitch story and get feedback INTERNALLY.

Sample Work Session
Story: Healthcare moment...
Characters:
Caleb (farmer and patient)
Dr. Brown (local doctor, generalist)
Dr. Evans (big city doctor, specialist)
Problem: Caleb has an unknown cyst.
Steps:
  1. Identifies an issue.
  2. Calls local doctor (Dr. Brown)
  3. Drives to doctor
  4. First doctor analysis
  5. Dr. Brown needs more information, calls a specialist whom she went to school with- Dr. Evan.
  6. Dr. Brown emails a picture and description of Caleb's medical issue.
  7. Dr. Evan requests Caleb drive to big city (4 hrs away) for analysis.
  8. Caleb drives to city... 
How can this whole story be enhanced by creating a better experience?
Things to consider- how can we compress time and space (driving) using digital tools?

Snapshot of some steps:
A) Current State Depicted (previously):
Draw out scenario of current state in story panels. Once done, start adding sticky notes around user's needs, opportunities and general thoughts that will later become part of the new vision.
7a9e3d6324449b2ad1aa57fabf016b
B) Sketching a new board for the new vision sequence
34f3866d2269c31c754d611bb028b8
C) Collaborating on the new story
4dcea227a0b770e728383f531f5752
D) The new sequence
Faf9999d14190c38f53cd339b99cf6
E) A summary "slide" of the new story
6d9875aa023051ae553d2e9186e3cd
Resources
Christopher Nolan, Inception (the movie), storyboard interview:
Interesting story: A guy documents his healthcare experience via twitter. #healthcareux

Day 1 / Morning Session: Mobile UX Design

Rhinman

Speaker: Rachel Hinman (rachel.hinman@nokia.com), Senior Research Scientist at the Nokia Research Center in Palo Alto, California 

 Overview: Websites facilitates "task." Mobile facilitates "exploration." The later should sense intent via location.

 Evolution of interfaces (Dennis Wixon- look up...):

  1. CLI (Command line interface)
    1. Static 
    2. Disconnected
    3. High-low
    4. Directed
    5. Recognition
  2. GUI
    1. Responsive
    2. Indirect
    3. Used metaphor (metaphoric)
    4. Diverse
    5. Exploratory
    6. Recall
  3. NUI (Natural or New UI)
    1. Evocative
    2. Intuitive (less about recognition and more about gesture and understanding something in its context)
    3. Fast = Few
    4. Contextual
    5. Intuition
  4. OUI (Organic UI)
    1. Fluid
    2. Extensive
    3. Constant
    4. Anticipatory
    5. Synthesis

It's no longer WYSIWYG, but its what you DO is what you get WYDIWYG (wid-y-wig)... This is a great quote for a client meeting...

 In general, make mobile interfaces INTUITIVE and easy to ENGAGE with...

Allow people to pivot thru information quickly.

"Mobile is about exposing possibility — pivoting users through info quickly and exposing what's possible for them." 

Be ruthless with our editing in a NUI design process. Less can only be more if we create powerful interfaces were each element is highly valued.

"Create interfaces that speak their power." 

In other words, just like a poker hand, each card (element) is combined with others to create a winning hand. Our interfaces are only as powerful as the weakest element of the UI. All UI features must create an experience greater than their individual parts.

Prototyping

It is utterly and completely essential in the mobile UX process. Too many unknowns and the industry isn't mature enough to have a "best practices" that replaces real world testing with low-fidelity prototyping. Swirl: build/create - evaluate - hone. Repeat.

  • Touch targets
  • Font sizes
  • Build paper prototypes first. Get inventive with moving up from paper to [x].

Ask yourself- can user's GROK this?

  1. Plan for a lot of it in the schedule (2x)
  2. Work at scale and print out.
  3. Get it on a device ASAP. (Good Reader- PDF... Celeste knows this...)

In summary, mobile should be:

  1. Uniquely mobile
  2. Sympathetic to context
  3. Speak its power.

Resources

Six Tools for testing designs on mobile devices: http://blogs.sitepoint.com/2009/07/09/six-tools-for-testing-designs-on-mobile...

Evolution of interfaces: Here's a video link from Dennis Wixon, Microsoft Surface: 

Book > Brian Fling, Mobile Design and Development: Practical concepts...

Slideshare of original presentation: http://www.slideshare.net/Rachel_Hinman/mobile-ux-essentials-6643654

Entrepreneurial Idea

Create a third party, digital ID registration system. The user's encrypted info is now accessible either via a QR code or a system like Bump (iphone business card app). This allows user to be verified for events that require more detailed, accredited information than say, your LinkedIn or Facebook profile.

​