User experience design for large enterprise applications

Learnings

Design Solutions

Challenges

User  Experience  for  

Large-scale Web-Applications

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

design  solu+ons  

CLDS learnings  

challenges  

Business   Technology   Development  

UserXperience  

My perspective…

Why User Experience ?

Business  Needs  

Func+onal  Needs  

Technology  Constraints  

User  Experience  

Challenges means…

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

Things  with  a  sense  of  difficulty…such  as  

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

Business  Needs  Stakeholder  Views  

Compe44ve  Review    Related  Products  

User  Needs  Data  Gathering  

Design  Defini+on  

1   2   3  

State the design goal…

“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)  

Understand users… S2 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.  

Things  I  want  to  do    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  

 Choose  and  tweak  standard  journey  plans   Plan  journey  stopovers   Compare  cost  and  finalize  Travel  plan   Book  +ckets     Seek  customer  support  

PC  Gupta  Professor  

S2

Deal  Desk  

App  1  

Enter  Deal  

View  Deals  

Email  

Staff  

1   2   3   4   5  

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

Allocate  Funds  Review  Funding     Handover  to  Back-­‐Office  

3.  Close  Deals  

1.  Review  Documents  

2.  Check  Approvals  

Buyer  

Seller  

Agent  

               Deals:  The  Task  Flow    

App  2  

Excel  

Streamline workflow…

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…

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

Interface  Object  Objects Attributes Display type Actions

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

List Input Form Read only Details

Save Edit Add New Copy Export Clear Delete

+  

UI  Container  

object  oriented  interface  structure  

S4 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)  

Expose UI as needed…

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 channels…

Core  team  

Dev  1  

Dev  2   Dev  3  

Dev  4  

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

UX  team  

Regular  flow  

C Credits…

@  Yahoo  Image  Search  

@  Google  Images  

@  Flicker  Images  

@  Core77  

@  My  Colleagues  

@  Learnings  with  my  Clients  

Contact:  ashutoshk77@yahoo.com