How & Why: UI Case Studies

Slide 1: How & Why UI Case Studies Daniel Burka Pownce - Co-founder Digg - Creative Director Silverorange - Co-founder

Slide 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

Slide 3: Starting with Digg • Started working with Digg in March 2005 • Original scope is one week of work • Where do you start?

Slide 4: Digg story design

Slide 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

Slide 7: Example Mozilla Download Page & Button

Slide 8: Example Store product page

Slide 9: ? Identifying the problems

Slide 10: ? Identify what makes Digg unique... Digging! 1. Doesn’t feel important 2. Doesn’t indicate an action 3. Not quickly scannable

Slide 11: ? Title isn’t bad, but... 1. Could be emphasized better 2. Help user jump down page visually

Slide 12: ? Submitter information 1. Oh, he’s the submitter! Not the author? 2. What the heck is that number?

Slide 13: ? Report? 1. What do you mean? 2. Why would I do it? 3. That’s a multiple select dropdown? Really?

Slide 14: ? More stuff to add? 1. New comments system 3. Show the source? 2. Ability to share stories 4. What order are these in?

Slide 15: ! First revision...

Slide 16: ! 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

Slide 17: Mezzoblue Mozilla Digg (thanks Dave!!)

Slide 18: ! 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

Slide 19: ! 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’

Slide 20: Success?

Slide 21: Success? • In this case not always clear cut • Can people scan stories faster? • How does it make people feel?

Slide 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?

Slide 23: 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?

Slide 24: ? 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

Slide 25: ? Identify the problems again... 4. Meta data divides the story’s core info 5. Burying is not being used enough

Slide 26: ! Second Revision

Slide 27: ! 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

Slide 28: Success? • Buries increase • Testers find chronology slightly clearer • There’s less stuff

Slide 29: Digg Comment System 2005 2006 2007 soon...

Slide 30: First Design, 2005

Slide 31: First Design, 2005 Challenges become obvious • Design is awfully literal • Data isn’t very compact • Limited Functionality • Doesn’t scale

Slide 32: Second Design, 2006

Slide 33: Second Design, 2006 But... still doesn’t scale • Nesting encourages discussion but now there are more comments than ever

Slide 34: Second Design, 2006 Nesting confuses novices • User testing reveals confusion • Don’t understand ‘indented comments’ • Top-posting adds to the problem

Slide 35: 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

Slide 36: Second Design, 2006 Content organization... • Block button is too abstract and too cluttered

Slide 37: Third design, 2007

Slide 38: 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

Slide 39: 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

Slide 40: 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%

Slide 41: 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

Slide 42: 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

Slide 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

Slide 44: 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...

Slide 45: Pownce Initial Design

Slide 46: Pownce is brand new... • No established design language • No prior expectations from users • Blank slate is intimidating though

Slide 47: Inspiration leads the way

Slide 48: First take is close...

Slide 49: Focus on the note...

Slide 50: Focus on the note...

Slide 51: Hatch adds movement & character

Slide 52: Visual language spreads An ‘aha’ moment. Leads to more things.

Slide 53: 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

Slide 54: Thanks! Slides will be on Slideshare pownce.com/dburka or deltatangobravo.com Illustrations by Ryan Putnam (via istockphoto.com)