The CMO Survey - Highlights and Insights Report - Spring 2024
How & Why: UI Case Studies
1. How & Why
UI Case Studies
Daniel Burka
Pownce - Co-founder
Digg - Creative Director
Silverorange - Co-founder
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. Starting with Digg
• Started working with Digg in March 2005
• Original scope is one week of work
• Where do you start?
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
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
21. Success?
• In this case not always clear cut
• Can people scan stories faster?
• How does it make people feel?
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?
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?
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
25. ?
Identify the problems again...
4. Meta data divides the story’s core info
5. Burying is not being used enough
33. Second Design, 2006
But... still doesn’t scale
• Nesting encourages
discussion but now there
are more comments than
ever
34. Second Design, 2006
Nesting confuses novices
• User testing reveals
confusion
• Don’t understand
‘indented comments’
• Top-posting adds to the
problem
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
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
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
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%
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
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
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
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...
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
54. Thanks!
Slides will be on Slideshare
pownce.com/dburka
or
deltatangobravo.com
Illustrations by Ryan Putnam (via istockphoto.com)