Andrew Conn – our amazing designer – and I recently released a re-vamped version of the main CarWoo! application that all of our buyers have the pleasure of using after they’ve signed up with us. This blog post is meant to give you some insight into the UI decisions we made on one of the more complex pages in the app.
The overall theme of the re-design was improving the information architecture of the application by consolidating information. Given that we’re designers, we also wanted to give it some polish and raise the bar on having a consistently professional look and feel throughout the app. At the same time, though, we wanted to maintain some of the quirkiness that is a big part of our culture here at CarWoo! Look out for another blog post by Andrew later this week about how to blend the professional and the quirky when it comes to UI design.
The Old “My Deals” and “My Offers” Pages
The old "My Deals" page
The old "My Offers" page
Although most users care very little about how pretty the page looks, they did complain about two things: (1) it was annoying to have to jump back and forth between pages to navigate through the app and (2) it was difficult to quickly get a sense of what was happening in a deal.
As designers, I think we have this intrinsic aversion to displaying information in tables, perhaps because tabular markup is very ugly and difficult to work with from a development perspective (no relative positioning within table cells? c’mon!). Sometimes, though, tabular formatting actually makes it easier to consume information. This seems to occur when there is a medium to large amount of repeating data (as there clearly is on these pages).
In order to address these issues, Andrew and I decided to consolidate the “My Deals” page and the “My Offers” page. At the same time, following the advice in <this> post, we decided to change the perspective of our navigation copy throughout the app as well as use language that is more easily understandable by the layman.
The New “Your Cars” Page
The new "Your Cars" page
Saving Space
One of the biggest challenges in designing this page was fitting a very large amount of information into a relatively small space. There are two main things that we did to accomplish that:
1) Not showing photos of all the cars
In the old design, each offer summary had a picture of the car in question. Mainly, this was to make it easy to differentiate between the color of the car in each offer (as the body style tends to be identical across offers in the vast majority of cases). Loading up the same image 5-10+ times on the same page seemed repetitive and unnecessary, and obviously it took up a huge amount of valuable space. In the new design, we only display a small swatch to indicate the color of a given offer, while the buyer can still easily see what kind of car the offer is for by looking at the lone image on the left.
2) Putting dealer names in separate table rows
Much like the images, displaying dealers’ full names as well as their dealership’s name takes up valuable space, and isn’t necessarily a primary focal point for users (they tend to care more about the prices of offers). However, dealer names are still important as they provide an easy way to differentiate between offers.
Fitting them in within the first draft of this new design proved to be a bit of a challenge. It turns out that we couldn’t just have the dealer names as another <td> element within a given <tr> because dealer names are of varying length and in certain cases (a minority, but not a small one) it would cause the table to overflow its container, thereby breaking the page layout. We could have just truncated the names, but that seemed like a sub-optimal user experience.
Furthermore, we wanted to fit not just the dealer name, but the dealership name, the distance between the dealership and the buyer, as well as some high-level dealer rating data into this table, but not in a way that distracted from the main function of looking at offers.
You don’t often see this in tabular data, but I think it’s a neat little trick: instead of cramming every attribute of a given object into one row, just use two! It often makes sense to have the first row be some sort of identifier (and/or meta-data) for the second row. You’ve probably seen a similar effect on the iPhone or iPod with the way Apple organizes songs and contacts.
Subtle Details
With so many numbers in a table, it’s often hard for users to figure out what to focus on. You can help users with this problem by giving them subtle hints. A slightly lighter or darker background color on a given column or row will focus their attention on that space, which is exactly what we’ve done with the savings column. While the other numbers are important, we want buyers to focus mostly on percentage savings because it’s the best indicator of how good a deal they’re getting in relation to their other offers.
Another subtle detail is that we highlight rows on mouse-over in order to make it easier to read across the row when there are a lot of them.
A Work In Progress
We’re not totally satisfied with the way this page turned out (it’s still a bit hard to read when you have 10+ offers) so we’re going to keep iterating, but perfection is the enemy of deployment and it’s a huge improvement over what we had before.
If you have any feedback or suggestions on how we can further improve our design please email me at michael@carwoo.com.
Pingback: Tweets that mention Anatomy of a Re-Design, Part I -- Topsy.com