UX Rocks - Mei Li - H+ Summit @ Harvard
Upcoming SlideShare
Loading in...5
×
 

UX Rocks - Mei Li - H+ Summit @ Harvard

on

  • 1,477 views

 

Statistics

Views

Total Views
1,477
Slideshare-icon Views on SlideShare
1,366
Embed Views
111

Actions

Likes
0
Downloads
26
Comments
0

3 Embeds 111

http://hplussummit.com 44
http://www.slideshare.net 37
http://www.hplussummit.com 30

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    UX Rocks - Mei Li - H+ Summit @ Harvard UX Rocks - Mei Li - H+ Summit @ Harvard Presentation Transcript

    • 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 Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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. Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Source: atom.smasher.org Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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 Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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 Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • What makes a design seem intuitive? Current Target Knowledge Knowledge Adapted from Jared Spool’s presentation Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • What makes a design seem intuitive? Current Target Knowledge Knowledge Adapted from Jared Spool’s presentation Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Our Design Philosophy • Empathy Design • Keep it Simple • Surprise and Delight Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Our Design Methodology Task Oriented Design Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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 Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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 Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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 Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Some of our research projects: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Speak4it! - iPhone VOICE REGONITION TECHNOLOGY, MULTIMODAL, AUGMENTED REALITY Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Speak4it! - iPad VOICE REGONITION TECHNOLOGY, MULTIMODAL, ADAPTIVE UI Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Have2P? :) CROWD-SOURCING, LOCATION-BASED SEARCH, MAP-BASED UI, LOCAL DATA CLEANING, USER BEHAVIOR RESEARCH, VERTICAL STUDY Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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” Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • A backstage invitation for Have2P Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Have2P 1.0: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Wireframe V3: INTRO PAGE: SERP PAGE: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Wireframe V3: BUSINESS PAGE OPTION: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Wireframe V4: INTRO PAGE: SERP PAGE: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Wireframe V4: BUSINESS PAGE: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Wireframe V5: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Wireframe V5: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V1 exploration: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V2 exploration: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V2 exploration: SPLASH PAGE EXPLORATION: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V3 exploration: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V4 exploration: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V5 exploration: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V5 exploration: SPLASH PAGE EXPLORATION: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V6 exploration: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V6 exploration: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V7 exploration: SECOND ROUND LOGO EXPLORATION: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V7 exploration: SECOND ROUND LOGO EXPLORATION: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V7 exploration: SECOND ROUND LOGO EXPLORATION: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V7 exploration: SECOND ROUND LOGO EXPLORATION: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V8 exploration: WITH “URGENCY DETECTOR”, SHAKE IT TO FIND THE CLOSEST BATHROOM :) Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V8 exploration: ST PATRICK’S DAY SPECIAL EDITION :) Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V8 exploration: ADDED UI FOR DATA CLEANING: CROSS PROMOTION: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V8 exploration: 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. Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Visual Design V8 exploration: ICON DESIGN: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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. Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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. Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • 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 Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.
    • Stay Connected! - me i design.net :) TWITTER: LINKEDIN: FACEBOOK: Amy Chunmei Li | www.meidesign.net | Copyright © 2010 Meidesign. All rights reserved.