UX Rocks - Mei Li - H+ Summit @ Harvard

AMY CHUNMEI LI
UX Rocks
ux creative director
How to be a Citizen Scientist and
U B G U W
S
E
R
A
R
A
I
.
W
W
Convert Research Technology to
W .
R
E
N
D
P
H
I
E
B
M
E
Awesome Usable Products
X S . I
C
P T F D
E R D L E
R A E A S
I T S S I
E E I H G
N G .
G N
C Y N S .
E E N
O E June 12-13. H+ Summit@Harvard
T
Copyright © 2010 Meidesign. All rights reserved.

Who is Meidesign or Me i design?
Meidesign.net is full service design studio founded by Amy Li,
a multi-disciplinary creative director and designer.

BACKGROUND:
• Started in traditional graphic design
• Evolving into web, flash and user experience design.
• An Ex Yahoo, and ATTi Research Lab veteran
• Passionate about combining design, technology and human factors to
create state of the art products that impact our daily life.
• Have2P- “App of the Week” NY Times, also featured in Gizmodo
• Over 10 years of experiences specialize in web mobile application design
with strong focus on branding and user experience design.

Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.

Who is Meidesign or Me i design?
SPECIATIES AND SERVICE PROVIDED:
• User experience design, Information architecture.
• User research, Usability testing
• Mobile application design
• Branding and creative marketing strategy
• Web design
• Search Engine Optimization
• Flash banners, flash tutorials,
• Newsletters, email campaigns
• logos, stationery
• Marketing collateral, brochures, catalogs


What is UX?
A DEFINITION FROM WIKIPEDIA

• User eXperience (UX) is about how a person feels about using a system*.

• User experience highlights the experiential, affective, meaningful and
valuable aspects of Human-Computer Interaction (HCI) and product
ownership, but it also covers a person’s perceptions of the practical
aspects such as utility, ease of use and efficiency of the system.

• User experience is subjective in nature, as it is about an individual’s feelings
and thoughts about the system.

• User experience is dynamic, because it changes over time as the
circumstances change.


Source: atom.smasher.org


What is UX?
A DEFINITION FROM MEIDESIGN

UX = User Research

+ Information Architecture

+ Interaction Design

+ Visual Design

+ Usability Testing

Assist with deep understanding of Technology + Data Strategy


How to Convert Research Technology
to Awesome Usable Products
A CORRECT SET OF TOOLS:

• UX Design Philosophy
• UX Design Methodology
• UX Process:
• UX Research
• UX Design
• UX Implementation


What makes a design seem intuitive?

Current Target
Knowledge Knowledge

Adapted from Jared Spool’s presentation


What makes a design seem intuitive?

Current
Target
Knowledge
Knowledge

Adapted from Jared Spool’s presentation


Our Design Philosophy

• Empathy Design

• Keep it Simple

• Surprise and Delight


Our Design Methodology

Task
Oriented
Design


UX Research:
METHOD: DOCUMENTATION:

User Profiles

Client

Audience User Scenarios
UX BRIEF
Identification
Competitive Landscape
Field Studies
Audience Identification
Task Analysis (Behavioral Personas)
Profiles, Scenarios, Tasks,

UX
Strategic Recommendation

SWOT Analysis
RESEARCH Strength, Weakness
Opportunity, Threat
Client
Guiding Principles

Our Approach
• Evaluation: traffic, path analysis, conversion funnels
Competitive Data strategy • Behavior Tracking Tool Our Vision
Analysis • Different UI testing
• Behavior Targeting / Adaptive UI

• Industry Standard
Usability testing • Unique User Experience
• Things to Adapt
• Things to Avoid


UX Design:

Visual Visual Visual
CREATIVE Design 1 Design 2 Design 3

Brainstorm

UX Features Prioritization Needs Navigation
Design
Low-fidelity Usability High-fidelity Usability UX
UX List & Roadmap Matrix Model
Concept
Wireframe Testing wireframe Testing
DESIGN Walkthrough SPECS

Verify technology
Brainstorm
and data capability

TECHNOLOGY + BACKEND DATA
Low-fidelity High-fidelity
Prototypes Prototypes


UX Implementation:
TECHNOLOGY + Implementation Implementation Implementation
Cycle 1 Cycle 2 Cycle 3
BACKEND DATA

Ongoing
Heuristic
Evaluation

Usability
Testing
UX UX
Last Minute
Change
Verify UX
Goals and
PRODUCT
IMPLEMENTATION UX checkup Objectives RELEASE
User
Survey

Field
Studies

DATA STRATEGY Tracking + Testing + Optimization GATHER USER DATA


Some of our research projects:


Speak4it! - iPhone
VOICE REGONITION TECHNOLOGY, MULTIMODAL, AUGMENTED REALITY


Speak4it! - iPad
VOICE REGONITION TECHNOLOGY, MULTIMODAL, ADAPTIVE UI


Have2P? :)
CROWD-SOURCING, LOCATION-BASED SEARCH, MAP-BASED UI,
LOCAL DATA CLEANING, USER BEHAVIOR RESEARCH, VERTICAL STUDY


How did we get on NY times?
• Empathy Design:
Addressing a basic human need

• Keep it Simple
A super easy to use interface

• Surprise and Delight
• A catchy product name

• Fun Graphics

• “Urgency Detector”


A backstage invitation for Have2P


Have2P 1.0:


Wireframe V3:
INTRO PAGE: SERP PAGE:


Wireframe V3:
BUSINESS PAGE OPTION:


Wireframe V4:
INTRO PAGE: SERP PAGE:


Wireframe V4:
BUSINESS PAGE:


Wireframe V5:


Visual Design V1 exploration:


SPLASH PAGE EXPLORATION:


SECOND ROUND LOGO EXPLORATION:



WITH “URGENCY DETECTOR”, SHAKE IT
TO FIND THE CLOSEST BATHROOM :)


ST PATRICK’S DAY SPECIAL EDITION :)


ADDED UI FOR DATA CLEANING: CROSS PROMOTION:



OTHER HAVE2 SUITE: HAVE2EAT, HAVE2DRINK, HAVE2SNACK

5PM 

Smart Time-Sensitive Search Function:
Non-alcoholic drink places during the day;
Alcoholic drink places during the night.


ICON DESIGN:


Promotion:

h ave p™
restroom locator
Sometimes when nature calls, you may not be
in the most convenient place to answer.

With Have2P™, you can use your phone to quickly
find listings of nearby spots that have restrooms.

In a hurry? Shake it to activate the Urgency Detector.

™
ha ve p
™ Back
h av e p™
rest room
loca tor loc ator
rest room
Change The Broadw
ay
200 W Main S
t
Glendale, CA
et 91203
Sage Gourm Restroom L
rons only. ocation:
0.06 mil. Pat
On second
floor.
an Cafe
Mediterrane only. Change
il. Patrons
0.1 m
Rate the R
estroom
s station
Western Ga
0.11 mil. Patrons O
nly
ay Y N
The Broadw Changing
0.14 mil. Table

..
Y N
Verdugo Hotel and . Very clea
n!
0.16 mil.

Info Have2p
Have2 ... Add
Search Search
Add Have2 ...
Have2p Info

©2009 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property. iPhone and iTunes are trademarks of Apple Inc.


Promotion:

NEED PLACES TO EAT, DRINK OR SNACK?
OR IS NATURE CALLING YOU?

With Have2, ™
™
you can use
your phone to ™
™
quickly find
listings of
nearby spots.

In a hurry? Shake it
to activate the
Urgency Detector.

©2009 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property. iPhone and iTunes are trademarks of Apple Inc.


There is no free lunch!
- THE DIRTY SECRET BEHIND HAVE2 :)

• Clean local business data

• User behavior research

• Vertical study

• Utilize the have2 traffic for

other mobile experiment


Stay Connected! - me i design.net :)
TWITTER: LINKEDIN:

FACEBOOK:


UX Rocks - Mei Li - H+ Summit @ Harvard

More Related Content

What's hot

Viewers also liked

Similar to UX Rocks - Mei Li - H+ Summit @ Harvard

More from Humanity Plus

Recently uploaded

UX Rocks - Mei Li - H+ Summit @ Harvard