how & why: ui case studies
TRANSCRIPT
Daniel BurkaPownce - Co-founderDigg - Creative DirectorSilverorange - Co-founder
How & WhyUI Case Studies
Case Studies1. Digg - Story Format
Getting started and changes over 3 years
2. Digg - Comment SystemAdaptation over 2.5 years
3. Pownce - Initial DesignStarting from scratch
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 themes quickly
• Get fast & focused client (Kevin) feedback
• Develop visual language
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 scannable
?
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 system2. Ability to share stories
3. Show the source?4. What order are these in?
?
First revision...
!
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
!
Mezzoblue(thanks Dave!!)
Mozilla Digg
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
!
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’
!
Success?
Success?• In this case not always clear cut
• Can people scan stories faster?
• How does it make people feel?
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?
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?
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
?
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 gone2. Metadata reduced to a single line, no visual jump3. Share replaced ‘blog it’ ‘email it’4. Bury has single-click option and prominence
Success?• Buries increase
• Testers find chronology slightly clearer
• There’s less stuff
Digg Comment System
2005 2006 2007 soon...
First Design, 2005
Challenges become obvious
• Design is awfully literal
• Data isn’t very compact
• Limited Functionality
• Doesn’t scale
First Design, 2005
Second Design, 2006
But... still doesn’t scale
• Nesting encouragesdiscussion but now thereare more comments thanever
Second Design, 2006
Nesting confuses novices
• User testing revealsconfusion
• Don’t understand‘indented comments’
• Top-posting adds to theproblem
Second Design, 2006
Too little nesting for experts
• Users implicitly say thisby using @soandso tofake functionality
• Users explicitly tell usby email and comments
Second Design, 2006
Content organization...
• Block button is tooabstract and too cluttered
Second Design, 2006
Third design, 2007
What’s changed?
1. Header is simplified... less image heavy
2. Block button hidden
3. Threads collapseda. Scales betterb. Lessens top-postingc. Simplifies initial view
Explicit feedbackWhat 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
Implicit feedbackWhat are people doing?
• Total comments increased byover 30%
• Unique commenters increased byaround 20%
• Unique comments per person increased by about 15%
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
Successes & misstepsx 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
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
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...
Pownce Initial Design
Pownce is brand new...• No established design language
• No prior expectations from users
• Blank slate is intimidating though
Inspiration leads the way
First take is close...
Focus on the note...
Focus on the note...
Hatch adds movement & character
Visual language spreadsAn ‘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 your users
• Many types of feedbackImplicit feedback is especially important
• There’s nothing wrong with making mistakes
Thanks!Slides will be on Slideshare
pownce.com/dburkaordeltatangobravo.com
Illustrations by Ryan Putnam (via istockphoto.com)