User  Experience  for  

Large-scale Web-Applications

ges allen Ch

ngs arni Le

Des

ign

io olut S

ns

About me…

-­‐  Industrial  designer  from  IIT  Mumbai   -­‐  Designing  User  Experiences  for  10  years     -­‐  Now:  Principal  InteracBon  Designer  in  Yahoo!   -­‐  Past:  Worked  with  HumanFactors  
   Contact:  ashutoshk77@yahoo.com  

I will talk about…

SDLC

CLDS
challenges   learnings   design  solu+ons  

My perspective…
UserXperience  

Business  

Technology  

Development  

Why User Experience ?

Business   Needs  

Technology   Constraints  

User  Experience  

Func+onal   Needs  

Challenges means…
Things  with  a  sense  of  difficulty…such  as  

Unclear  understanding  of  expecta4ons   +   Compromised  user  experience   +   Stretched  development  4melines   +   Mul4ple  quality  review  cycles   =   Increased  development  cost  

C1

Keeping

stakeholders

on the same page

L1

Often teams…
Get  requirements  as  LIVE   Receive  changing  SCOPE  (3>5>all  browsers)   Focus  on  own  SILOS   Lack  in  full  understanding  of  product  ECOSYSTEM   Have  low  understanding  of  target  USERS  

S1
1  

State the design goal…
Compe44ve  Review     Related  Products   User  Needs   Data  Gathering  

Business  Needs   Stakeholder  Views  

2  

3  

Design  Defini+on  

“Defining problem is as important as solution itself”

S1

Design the Eco-system…

Visualiza+on  of  design  and  interac+on  ecosystem  for  a  Netbook    

S1

Define your users…
Profile  2:  Prospec4ve    Customer  

John  Doe  
45  Year  old   Director  ITES   NYC,  NY  

“Tell  me  why  I  should  do  business  with  your  company”  
John  is  a  director  of  IT  services  in  a  major  finance  company  for  4  years.   He  has  been  with  this  firm  since  15  years.  He  is  responsible  for  ApplicaBon   development,    maintenance  of  data  recovery  center,  and  planning  for  business  in   future.  He  does  not  use  ABC  product/Service.  

Mo4va4ons  

John  is  not  involved  with  detailed  invesBgaBon  of  individual  enterprise  soluBons.  He   needs  to  know  the  big  picture,  and  will  direct  his  staff  for  a  detailed  analysis  before   he  makes  a  purchasing  decision.  

Goals  

•   Get  general  product  info   •   know  about  compeBBve  advantage   •   Pricing  info   •   A[er  sales  support  model  and  terms  

Pain  Points  

•   Limited  info  about  product  on  website   •   Unclear  info  about  customizaBon  and  future  tech  support     •   Lack  of  customer  support  channels  

C2

L2

Understanding User Needs…
Iden4fy  typical  user  groups     Write  simple  user  stories  (usage  scenarios)   Document  their  KEY  tasks  (80%  vs.  20%)   Op4mize  Task-­‐flows  (beyond  current  processes)  

S2

Understand users…
52  years  old   On  the  job  25+  years   Uses  computer  1-­‐2  +mes  per  week   Personality  Traits:  Professor  in  a  PG  college,  about  to  re+re  in  2-­‐3   years.  Infrequently  uses  computer  at  home  to  communicate  with  sons   seUled  in  different  ci+es.  Key  decision  maker  in  extended  family   vaca+ons  to  spend  quality  +me  in  leisure  as  well  as  pilgrimage   loca+ons.  

PC  Gupta  
Professor   Things  I  need  to  know    Railways  tour  packages    Detailed  Travel  I+nerary  and  route  map    Accommoda+on  op+ons    Easy  and  simple  informa+on    Do’s  and  Don'ts  for  railway  booking  process    Associated  rules  and  regula+ons    Promo+onal  discounts   Things  I  want  to  do      Choose  and  tweak  standard  journey  plans    Plan  journey  stopovers    Compare  cost  and  finalize  Travel  plan    Book  +ckets      Seek  customer  support  

S2
Deal  Desk  

Streamline workflow…
App  1  
1.  Review  Documents  

Enter  Deal  

Email   Excel  

App  2  

2.  Check  Approvals   Buyer   Seller   Agent  

Staff  

3.  Close  Deals  

               Deals:  The  Task  Flow    
1   2   3   4   5  

View  Deals  

Iden4fy  Deals  that   are  Ready-­‐to-­‐Close  

Review  Funding    

Allocate  Funds  

Handover   to  Back-­‐Office  

C3

L3

Visualize future roadmap…
Think  ahead  about  future  needs   What  you  need  aier  3years  should  start  now   Priori4ze  and  follow  phased  approach   Naviga4on  design  and  UI  containers  should  grow  

S3

Modular design…

C4

L4

Find what users REALLY need…
Interface  Object  
Objects
Traveler

User  Tasks   1.  Search  Travel  Plans   2.  Find  Trains     3.  Plan  Journey  Breaks   4.  Define  Travelers   5.  Make  Payment  

Attributes
Gender Age First Name Last Name Address Contact Phone e-mail Login Password

Display type
List Input Form Read only Details

Actions
Save Edit Add New Copy Export Clear Delete

+  
UI  Container  

object  oriented  interface  structure  

S4

Expose UI as needed…
Show  what  users  need  NOT  what  database  structure   Use  deferred  creates   Accordion  panels   Show/hide  vs.  enable/disable     Dual  Mode  UI  (basic  and  Advanced)   Simple  wizards   Educa4ve  interfaces  (QA  format)  

C5

L5

UI

is

ALSO

responsible for Performance

Keep  modular  and  fluid  UI  containers   Keep  nested  DIVs  as  simple  as  possible   Use  CSS  Sprite  to  minimize  HTTP  requests   Keep  CSS  and  other  assets  lighter  in  size   Define  and  follow  CSS  nomenclature  

S5

CSS sprites…

C6

L6

Often development teams…
Care  about  their  own  module   Put  less  priority  to  UX  guidelines   Do  not  follow  UI  pamerns  fully   Hack  solu4ons   Prac4ce  what  is  EASY  NOT  what  is  important  

S6

Simple checklists…

S6

Master repository for…
UI  wireframes   CSS  file  and  strict  version  control   Image/sprite  library   Best  coding  prac4ces   UI  style  guide   UI  layout  templates   UI  controls  

C7

Lack of communication

L7

Development teams…
Re-­‐invent  the  solu4ons  NOT  reuse     Do  not  share  hacked  solu4ons   Deviate  from  standard  prac4ces   Drop  features  instead  of  solving  them  

S7

Set

communication
Core  team  

channels…

UX   team  

UI  style  guide   Master  CSS   Sprite/images   UI  layout  templates   UI  controls  

Regular  flow  

Dev  1   Dev  2   Dev  3  

Dev  4  

C

Credits…
@  Yahoo  Image  Search   @  Google  Images   @  Flicker  Images   @  Core77   @  My  Colleagues   @  Learnings  with  my  Clients  

Contact:  ashutoshk77@yahoo.com