How & Why
UI Case Studies



Daniel Burka
Pownce - Co-founder
Digg - Creative Director
Silverorange - Co-founder
Case Studies
1. Digg - Story Format
  Getting started and changes over 3 years


2. Digg - Comment System
  Adaptation ove...
Starting with Digg
•   Started working with Digg in March 2005
•   Original scope is one week of work
•   Where do you start?
Digg story design
Why start so focused?
•   You need to start somewhere
•   Homepage template was more obvious but...
•   Identify key theme...
Example Mozilla Download Page & Button
Example Store product page
?
Identifying the problems
?
Identify what makes Digg unique... Digging!
1. Doesn’t feel important
2. Doesn’t indicate an action
3. Not quickly scann...
?
Title isn’t bad, but...
1. Could be emphasized better
2. Help user jump down page visually
?
Submitter information
1. Oh, he’s the submitter! Not the author?
2. What the heck is that number?
?
Report?
1. What do you mean?
2. Why would I do it?
3. That’s a multiple select dropdown? Really?
?
More stuff to add?
1. New comments system        3. Show the source?
2. Ability to share stories   4. What order are the...
!
First revision...
!
Ok, spot the differences...
1. Digg button is emphasized... a lot.
2. Digg button is an action with a verb
3. Button sty...
Mezzoblue         Mozilla   Digg
(thanks Dave!!)
!
What else has changed?
4. Title is bigger and bolder
5. Submitter is labeled as such and has an image
6. Time stamp is e...
!
What else has changed?
7. Comments are entirely new
8. Two share links are new
9. ‘Report’ is now clearly a dropdown ren...
Success?
Success?
•   In this case not always clear cut
     •   Can people scan stories faster?
     •   How does it make people f...
Success?
•   In this case not always clear cut
     •   Can people scan stories faster?
     •   How does it make people f...
Success?
•   In this case not always clear cut
     •   Can people scan stories faster?
     •   How does it make people f...
?
Identify the problems again...
1. Digg number is too big (the site’s getting popular)
2. Gradients are so last year
3. T...
?
Identify the problems again...
4. Meta data divides the story’s core info
5. Burying is not being used enough
!
Second Revision
!
What’s changed?
1.   Gradients reduced, bevels gone
2.   Metadata reduced to a single line, no visual jump
3.   Share re...
Success?
•   Buries increase
•   Testers find chronology slightly clearer
•   There’s less stuff
Digg Comment System


 2005   2006   2007   soon...
First Design, 2005
First Design, 2005
Challenges become obvious
•   Design is awfully literal
•   Data isn’t very compact
•   Limited Functio...
Second Design, 2006
Second Design, 2006
But... still doesn’t scale
•   Nesting encourages
    discussion but now there
    are more comments t...
Second Design, 2006
Nesting confuses novices
•   User testing reveals
    confusion
•   Don’t understand
    ‘indented com...
Second Design, 2006
Too little nesting for experts
•   Users implicitly say this
    by using @soandso to
    fake functio...
Second Design, 2006
Content organization...
•   Block button is too
    abstract and too cluttered
Third design, 2007
What’s changed?
1. Header is simplified... less image heavy
2. Block button hidden
3. Threads collapsed
    a. Scales bett...
Explicit feedback
What are people saying?

 1. I liked it the old way (you should be fired)
 2. Annoying to open threads (...
Implicit feedback
What are people doing?

 •   Total comments increased by
     over 30%
 •   Unique commenters increased ...
Successes & missteps
! Top-posting is lessened and doesn’t confuse novices
! Scales to thousands of comments
! More people...
Successes & missteps
x Too slow to load individual threads
x Design is cluttered
   x Especially when threads are open
x C...
What to do about it...
•   Go back to the old design?
•   Address shortcomings
•   Adapt to user feedback
•   Get more fee...
What to do about it...
•   Go back to the old design?
•   Address shortcomings
•   Adapt to user feedback
•   Get more fee...
Pownce Initial Design
Pownce is brand new...
•   No established design language
•   No prior expectations from users
•   Blank slate is intimida...
Inspiration leads the way
First take is close...
Focus on the note...
Focus on the note...
Hatch adds movement & character
Visual language spreads
An ‘aha’ moment. Leads to more things.
A few conclusions
•   Starting focused can be a big help
•   Echo design language
•   Be prepared to iterate and react to ...
Thanks!
 Slides will be on Slideshare

 pownce.com/dburka
 or
 deltatangobravo.com




Illustrations by Ryan Putnam (via i...
How & Why: UI Case Studies
Upcoming SlideShare
Loading in …5
×

How & Why: UI Case Studies

11,122 views

Published on

Presentation given at Web Directions North 2008 in Vancouver, BC, Canada.

Published in: Business, Technology

How & Why: UI Case Studies

  1. 1. How & Why UI Case Studies Daniel Burka Pownce - Co-founder Digg - Creative Director Silverorange - Co-founder
  2. 2. Case Studies 1. Digg - Story Format Getting started and changes over 3 years 2. Digg - Comment System Adaptation over 2.5 years 3. Pownce - Initial Design Starting from scratch
  3. 3. Starting with Digg • Started working with Digg in March 2005 • Original scope is one week of work • Where do you start?
  4. 4. Digg story design
  5. 5. Why start so focused? • You need to start somewhere • Homepage template was more obvious but... • Identify key themes quickly • Get fast & focused client (Kevin) feedback • Develop visual language
  6. 6. Example Mozilla Download Page & Button
  7. 7. Example Store product page
  8. 8. ? Identifying the problems
  9. 9. ? Identify what makes Digg unique... Digging! 1. Doesn’t feel important 2. Doesn’t indicate an action 3. Not quickly scannable
  10. 10. ? Title isn’t bad, but... 1. Could be emphasized better 2. Help user jump down page visually
  11. 11. ? Submitter information 1. Oh, he’s the submitter! Not the author? 2. What the heck is that number?
  12. 12. ? Report? 1. What do you mean? 2. Why would I do it? 3. That’s a multiple select dropdown? Really?
  13. 13. ? More stuff to add? 1. New comments system 3. Show the source? 2. Ability to share stories 4. What order are these in?
  14. 14. ! First revision...
  15. 15. ! Ok, spot the differences... 1. Digg button is emphasized... a lot. 2. Digg button is an action with a verb 3. Button style helps with brand identity, visual language
  16. 16. Mezzoblue Mozilla Digg (thanks Dave!!)
  17. 17. ! What else has changed? 4. Title is bigger and bolder 5. Submitter is labeled as such and has an image 6. Time stamp is entirely new
  18. 18. ! What else has changed? 7. Comments are entirely new 8. Two share links are new 9. ‘Report’ is now clearly a dropdown renamed ‘Bury Story’
  19. 19. Success?
  20. 20. Success? • In this case not always clear cut • Can people scan stories faster? • How does it make people feel?
  21. 21. Success? • In this case not always clear cut • Can people scan stories faster? • How does it make people feel? • Gather stats where possible • More digging and other participation? • More registered users? More overall visitors?
  22. 22. Success? • In this case not always clear cut • Can people scan stories faster? • How does it make people feel? • Gather stats where possible • More digging and other participation? • More registered users? More overall visitors? • User test, even basics • Is date-order more comprehensible? • Can someone successfully digg or report?
  23. 23. ? Identify the problems again... 1. Digg number is too big (the site’s getting popular) 2. Gradients are so last year 3. Too much stuff - could be tighter
  24. 24. ? Identify the problems again... 4. Meta data divides the story’s core info 5. Burying is not being used enough
  25. 25. ! Second Revision
  26. 26. ! What’s changed? 1. Gradients reduced, bevels gone 2. Metadata reduced to a single line, no visual jump 3. Share replaced ‘blog it’ ‘email it’ 4. Bury has single-click option and prominence
  27. 27. Success? • Buries increase • Testers find chronology slightly clearer • There’s less stuff
  28. 28. Digg Comment System 2005 2006 2007 soon...
  29. 29. First Design, 2005
  30. 30. First Design, 2005 Challenges become obvious • Design is awfully literal • Data isn’t very compact • Limited Functionality • Doesn’t scale
  31. 31. Second Design, 2006
  32. 32. Second Design, 2006 But... still doesn’t scale • Nesting encourages discussion but now there are more comments than ever
  33. 33. Second Design, 2006 Nesting confuses novices • User testing reveals confusion • Don’t understand ‘indented comments’ • Top-posting adds to the problem
  34. 34. Second Design, 2006 Too little nesting for experts • Users implicitly say this by using @soandso to fake functionality • Users explicitly tell us by email and comments
  35. 35. Second Design, 2006 Content organization... • Block button is too abstract and too cluttered
  36. 36. Third design, 2007
  37. 37. What’s changed? 1. Header is simplified... less image heavy 2. Block button hidden 3. Threads collapsed a. Scales better b. Lessens top-posting c. Simplifies initial view
  38. 38. Explicit feedback What are people saying? 1. I liked it the old way (you should be fired) 2. Annoying to open threads (too slow) 3. Hard to find your own comments 4. Ugly threading, too many vertical lines
  39. 39. Implicit feedback What are people doing? • Total comments increased by over 30% • Unique commenters increased by around 20% • Unique comments per person increased by about 15%
  40. 40. Successes & missteps ! Top-posting is lessened and doesn’t confuse novices ! Scales to thousands of comments ! More people are participating ! More comments are being posted ! People are threading better
  41. 41. Successes & missteps x Too slow to load individual threads x Design is cluttered x Especially when threads are open x Can’t find your own comments if threaded x Interactions are poorly designed
  42. 42. What to do about it... • Go back to the old design? • Address shortcomings • Adapt to user feedback • Get more feedback -- we released a video • User test this time • Leave time for further iteration
  43. 43. What to do about it... • Go back to the old design? • Address shortcomings • Adapt to user feedback • Get more feedback -- we released a video • User test this time • Leave time for further iteration Let’s see it...
  44. 44. Pownce Initial Design
  45. 45. Pownce is brand new... • No established design language • No prior expectations from users • Blank slate is intimidating though
  46. 46. Inspiration leads the way
  47. 47. First take is close...
  48. 48. Focus on the note...
  49. 49. Focus on the note...
  50. 50. Hatch adds movement & character
  51. 51. Visual language spreads An ‘aha’ moment. Leads to more things.
  52. 52. A few conclusions • Starting focused can be a big help • Echo design language • Be prepared to iterate and react to your users • Many types of feedback Implicit feedback is especially important • There’s nothing wrong with making mistakes
  53. 53. Thanks! Slides will be on Slideshare pownce.com/dburka or deltatangobravo.com Illustrations by Ryan Putnam (via istockphoto.com)

×