Loose notes from SXSW 2006 session: Design Eye for the List Guy
Craigslist gets an extreme makeover. May as well show the results first:
“Join the Design Fab Five as they tackle their latest: one of the most well known, well loved and well used sites on the World Wide Web. Just as they did with Jakob Nielsen in the original Design Eye for the Usability Guy, and last year’s hit “Idea Guy”, they will do a soup to nuts strategic redesign of craigslist.org while handing out tips, techniques and some lessons learned.”
Moderator: Keith Robinson Creative Dir, Blue Flavor
Andrei Herasimchuk Principal, Involution Studios
Cameron Moll cameronmoll.com
Paul Nixon Apple
Ryan Sims Lead Designer, Neubix
Keith Robinson Creative Dir, Blue Flavor
Extreme Makeover: craigslist.org (they knew it would be controversial and difficult, which is why they picked it).
One guy (Andrei) participating via iSight.
Started with some user testing, and a survey.
– For informed decisions
– First impressions
– If it ain’t broke, what’s there to fix?
First impressions: Really cool, really usable. It seemed great – what are we going to fix?
Survey:
– People {heart} craigslist
– Craigslist is “easy” yet “unprofessional”
– It’s not perfect (but what is?)
1-on-1 with Sally, Dick, Jane
– Interacting with people interacting with site
– Reinforces what we thought we knew
– Helps to build empathy
Summarized Findings:
– Search could be improved
– Homepage could be organized better
– Personalization would be sweet
– Needs a more professional feel
BRANDING AND IDENTITY
It’s more of an unbrand than a brand. The company focuses on “getting out of the way” rather than on promoting themselves. This was a hard one, because this may not be a company that should be branded. The identity of the brand needs to reflect the community, not the company.
craigslist is lowercase because we don’t want to emphasize the individual.
[Hilarous attempts at logo design – swooshes and swirls… word marks, visual marks, combined marks]
How to make it work for the mobile web?: Something akin to the fragmented, haphazard, pre-standards ddesktop web… times 43.
Methods:
1) Do nothing (this is not a horrible method – if your markup is structured properly, it can actually work)
2) Strip images and styling (with craigslist, this is no help – they’re already there!)
3) Hand-held stylesheets (allow them to reposition things, hide others… but support for this is inconsistent).
4) Mobile-specific site/app – address the hand-held device head-on.
The methods above move from simple to complex, development-wise. BUT value to user also goes up at the same time.
SO: Miniaturize or mobilize?
Miniaturize: Re-purpose what’s already there.
Mobilize: Restructure or trim data for the new use case.
Use case hierarchy for mobile use:
1) Search – top element
2) Categories – Most frequented
3) Event Calendar – Access to todaay, tomorrow
4) Choose area – Detect zip code or city to present the correct city first
Cool: Google is experimenting with search tech similar to T9Word – so that you can type 227 into your phone and get search results on “cat.”
Mobilize:
Content-specific?
Context-specific?
Component-specific?
What will users really want to do on the go? Could set up a my.craigslist.org from your desktop, then log in from your device, then you get *your* chosen listings and categories.
Decided to…. Ask Craig.
Ironically, when slides were drafted, they didn’t know that Craig would actually be here.
“… this will be simultaneously entertaining and painful.” -Craig Newmark
Hopefully this won’t be too painful.
– Embrace constraints: Realign vs. Redesign (alistapart article on this topic)
– Page weight — keep it wayyyy down.
– Interface tools color and type is pretty much all he had to work with
Inspiration:
– newsdesigner.com
– UX Mag
– Super-hero Khoi Vinh
– The Onion
The Mini Reveal: Take a Step Back
Try looking at thumbnails of your redesign – it gives you a great sense of overall layout and flow.
34Kb for craigslist homepage – only 2k larger than original
96% of the sites on the internet load slower than craigslist right now and we wanted to respect that.
“spark lines” added to right column, showing purchasing trends, etc. (all javascript, no images needed here).
The redesigned site is *beautiful*
Newmark asked to come onstage and share his reaction… he seemed underwhelmed, less excited about the makeover than anyone in the audience. “It’s very impressive,” he said coolly. “I’d have to talk to our CEO.”
Process and results should appear at justwatchthesky.com/blog/sxsw
Question: Does Newmark’s research back up any of these assumptions?
Newmark: “Research?”
More notes at Valleywag