Archive for the 'Designing Dopplr' Category

May 16, 2008 – 3:45 pm, by Matt Jones

Tasty sprinkles: some new stuff on Dopplr

While we generally release a new version of the service fairly regularly, there’s always something that’s ready-to-rock; and just this week we’ve put live a number of improvements and new features that we’ve been working on beside some of the major new stuff that’s coming soon.

First up, there’s now the ability to add a ‘multi-hop’ trip - something that a lot of you have been asking for. More on that in a separate post.

Secondly - we’ve made some improvements to our tools to manage how you share information with people.

Celia, our community design manager took the lead on that one, incorporating your feedback and our drive to try make everything as simple, elegant and clear as we can.

DOPPLR: Your connections (redesign)

Over to Celia for her take on the process:

“Redesigning the ‘Connections’ pages was my first design task at
Dopplr. It seemed daunting at first but turned out to be a lot of fun.

We knew that the existing pages were too complicated and that we could
make them better. But instead of relying on our own sense of what
could be improved, we asked our travellers to tell us what they
thought. So we posted a question up on Get Satisfaction and got lots
of fantastic responses - it was really exciting to watch them come in.
A huge thank you goes to everyone who helped us out.

We didn’t incorporate all the ideas there into this version of the
design - there’s always a process of pick and choose that you go
through when coming up with a coherent scheme. The things that didn’t
make it this time round are definitely on file for future reference,
though.

After taking in people’s comments, the next step was to sit down and
digest it and come up with some sketches. The main aim was to keep the
pages as clear as possible - they show lots of different kinds of
relationships and the goal was to make it really easy to see what was
what.

The main changes you’ll notice are that we’ve condensed four tabs down
into just two, and made the titles of the sections within each tab as
explanatory as possible. Hopefully the new version makes it easier to
see who’s who in your Dopplr network.”

Lastly, we’ve given various things like our page headings a spring-clean to make search and other functions easier to find.

DOPPLR: New simplified header

We’ve also redesigned our city pages.

This one makes me very happy - I think the guys did a beautiful job on them.

DOPPLR: New York (redesigned city pages)

Over to Boris for some colour-commentary on that:

“While adjusting a few things here and there to better fit our not-so-incredibly-tight grid layout (mea culpa!), I was recoding the block that holds the Google Map on the individual trip screens. In so doing, it stretched out to 100% over on the Place screens. While in this state it clearly broke everything around it, I immediately thought “my, that’s pretty…”

A bit more sculpting, a few discussions with the team and it was agreed that it was pretty… and promptly forgotten for about 5 weeks (haha).

We added it to the to-do list maybe two weeks ago - and in a blaze of activity, Tom pulled in the incoming future-trip parabolics, fixed a map-centering issue and made beautiful colour-coded custom place-name markers et voilà.

We can haz new Place screen headers with better communicating maps! Yatta! Please to enjoy!”

DOPPLR: Cortaccia sulla strada del vino - Kurtatsch an der Weinstrasse

This is one of the reasons I love working on Dopplr as a designer - that we’re able to work with our users on improving things, and also those wonderful moments where you accidentally discover a better way to do something by breaking it… Serendipity!

April 22, 2008 – 4:01 pm, by Matt Biddulph

Calculate the carbon impact of your travels with Dopplr

On a cold winter evening in 2006, the founders-to-be of Dopplr got together in a West London pub to talk about an idea for a new kind of travel website. After much excited discussion about features and ways of working, Matt Jones agreed to participate on one condition: that whatever we made would give travellers a way to understand the carbon impact of their travels.

Today, serendipitously on Earth Day 2008, we’re launching a carbon calculator for your trips. Working with AMEE (”The World’s Energy Meter”) we can automatically build a travel carbon profile for you. Because AMEE are an impartial platform who work with many organisations that collect data or propose solutions, this means that you’ll be able to eventually reuse this profile with other services.

My 2008 carbon calendar looks like this:

Of course, the mode of transport you choose for your trips makes all the difference to their carbon impact. That means an upgrade to our trip form, which now lets you specify how you’re travelling:

trip form with new transport options

Now here’s Matt Jones to give his take on why this matters so much:

One of the aspects of creating social tools that fascinates me is the ability to make the invisible visible, and what effect surfacing these patterns then has on us as individuals and groups.

For a while there have been carbon calculators on airline websites and environmentalist websites, but generally they have been about directly showing the impact of an individual action, rather than the patterns and trends influencing the actions in the first place.

That’s why I thought it was an essential component of from the start of Dopplr as a social tool for intelligent travellers to optimise their path through the world - and I’m delighted the beginnings of this are here now. Particular props to Boris and Tom for pulling off the design, which I’m pleased as punch with.

It’s a first step, and as with everything we do part of the bigger, beautiful jigsaw of the web. As MattB’s said it’s plugged into AMEE, and you might be already be subscribed to things like WorldChanging or EdenBee that can help you decide what to do about it.

It’s not enforcing any particular course of action - it’s the weighing scales, not the diet.

What we all do with this information is up to us.

February 25, 2008 – 9:39 am, by Celia Romaniuk

Help us improve the Manage Connections page

Hello!

My name’s Celia, and I’ve joined Dopplr as the Community Design Manager. As Matt said, that means that my job is to talk to the people out there who are using Dopplr, find out what’s working and what’s not, and help the development team improve things accordingly.

This is going to take a few different forms. For example, sometimes I might post screenshots or prototypes that we’ve been working on, and ask for your feedback. Other times I might ask you seemingly vague questions to try and get to the bottom of what you’d really like us to do for you. Or I might ask you quite directed questions about something that we’ve already built - and that’s what I’m about to do now.

We think the ‘Manage Connections’ page could be better. We have some ideas up our sleeves, but we’d like to know what you think of it, too. What’s working for you, and what’s not? Let us know what you think by joining the discussion over on the Satisfaction site.

Look forward to talking to you there!

February 5, 2008 – 12:54 am, by Matt Jones

More Dopplr Raumzeitgeist detail: Cluster Cities

More Dopplr Raumzeitgeist07 SVG-awesomeness by Aaron Straup Cope

We got great reaction to our Raumzeitgeist post, including a lot of queries about the data-set and, unfortunately, some confusion over what we were showing in the main image.

Most people assumed (probably due to me omitting the details - my bad) that we had plotted every trip that people had made last year.

Here’s the amazing part - even with the coverage of the globe shown on that map, it’s not nearly everywhere Dopplr travellers went!

More Dopplr Raumzeitgeist07 SVG-awesomeness by Aaron Straup Cope

What we are showing are what we call ‘Cluster Cities’ which is the basis of some new functionality you might have already noticed if you’re a Dopplr user that’s been studying their journal feeds/emails closely.

Rewind to Reboot, Copenhagen at the end of May 2007.

We’re sitting on the grass in the sunshine with a bunch of early Dopplr users, including Stowe Boyd and Stephanie Booth - when Stephanie is the first to voice something we’ve heard a lot from Dopplr users since: “make my trips more ‘fuzzy’”.

By which, she and others meant that they would like to see coincidences in the surrounding area of ‘social spacetime’ to their trip - i.e. “show me if there are going to be people I know nearby the stated destination of my trip when I’m going to be there, as I’d probably like to change my plans a little to see them.”

This is a cornerstone of our goal to help optimise travel for Dopplr users - surfacing information about such near coincidences to let them judge whether to alter their plans to make their trip more worthwhile.

We’re going to be releasing a lot of functionality to exploit fuzzy, social spacetime through the early part of 2008, but the first part of it has leaked out into the journal.

Here’s an example.

Nearby coincidences

Previously, if I’d added a trip to San Francisco, I’d have missed out on seeing coincidences with people who live in Oakland, or are visiting Berkeley for instance. Now we fuzz up the edges of your trip’s destination to include those nearby, so you can make that valuable visit on the BART…

Cluster Cities are the way we’ve made this happen. To explain them, here’s Matt B. with the science bit!

To make the database queries perform well enough to implement this feature, we needed to classify cities in densely populated areas into groups. By considering groups of cities as one, we cut down the work the database has to do when calculating who is affected by someone arriving in their area. We decided that these groups should be small enough that a traveller could reasonably expect to travel between any two cities in a group within a day.

Algorithms to cluster a spatial dataset are well known and not hard to implement. Unfortunately, they take a bit of tuning and experimentation to achieve satisfying results. Intuitively we expect cities like London, Tokyo and San Francisco to be at the centres of their clusters. In reality it’s rather hard to teach the cultural/social/economic conditions that cause this to an algorithm that’s only looking at latitude and longitude.

After some initially disappointing results, I stopped looking solely at the geographical data and considered what I could do if I incorporated the historical trip data that Dopplr has built up over our first year. I quickly came to the obvious conclusion: weight the clustering by the popularity of trip destination and let our travellers decide whether San Francisco or San Jose is the gravitational centre of Silicon Valley.

In analysing the top 2000 destinations I discovered that many of the top cities are very close together — for example, Glasgow and Edinburgh are only 40 miles apart. Again I used our trip data to eliminate overlaps. Within any 50 miles radius, only the most popular of two popular cities gets to be the cluster centre. This decision is one reason for the beauty of our central Raumzeitgeist visualisation. The layout has an appealing rhythm to it because the points in popular areas are a natural and fairly efficient circle packing.

The map of Cluster Cities visited in 2007 is what we’re using in the Raumzeitgeist image, and we’ve made a KML file for you to explore it in Google Earth that you can download here, and we hope you create some of your own images / visualisations from the data.

Aaron Straup Cope who helped me create the main image also did some fun visualisations based upon mashing it up through our API with Dopplr’s city colour-coding (as described previously) that I’ve illustrated this post with.

More Dopplr Raumzeitgeist07 SVG-awesomeness by Aaron Straup Cope

If you make something shiny - tag it “raumzeitgeist“, or let us know and we’ll try to blog it here.

Have fun!

October 23, 2007 – 5:17 pm, by Matt Jones

The language instinct

At the recent Future of Web Apps event in London, Erika Hall of Mule Design gave a presentation entitled “Copy is interface“, (for which Suw Charman took excellent notes) where we were pleased-as-punch to see Dopplr feature as an example.

As Erika states, using language as interface is particularly powerful if you’re taking that interface across a number of different contexts, e.g. website, RSS feeds, mobile etc.

It’s also great for doing all of the traditional things that copywriting is used for - establishing a posture or voice for the service and communicating that consistently.

However, if you’re…

  1. dealing with events in the future, the present and the past
  2. primarily using the English language to do so
  3. trying to get, y’know, computers to do both

…it can be quite a challenge, but as Erika says, it’s a very worthwhile one!

– 4:24 pm, by Matt Jones

In rainbows

Dopplr sparkline stack

We get asked a lot about the colour-coding we give to places in Dopplr: what it represents, why we did it, how are the colours assigned.

One of the main ‘atoms’ of Dopplr is unsurprisingly, place - so to make that run through the warp-and-weft of the user-interface, and our branding, was extremely important.

The Dopplr logo, (or ‘SparkLogo’* as we sometimes like to call it) is the clearest example of this perhaps.

As you add trips to different destinations, Dopplr’s logo becomes your logo, reflecting what you’re doing - right the way through to the ‘favicon‘ that shows up in the address field of most browsers.

It also makes for a great blog badge…

As well as the aesthetic delights we believe that city colours bring to the service, we’re using them as visual ‘affordances‘ - ways to create implicit meaning and usefulness in the user-interface.

When you look at a list of your fellow travellers, you’ll see a coloured border around their icon, which correlates to their current location - allowing you to spot coincidences visually.

We’re going to be doing far more with the city colours to create affordances in the near-future… But how do we generate them? What’s the basis for making London a fine electric cyan, or San Francisco a rather-fetching coral pink?

For that I transfer you across to The Other Matt.

Here comes the science bit!

We wanted a deterministic RGB colour value for each city. At first, we tried mapping the latitude and longitude of a city to a point in colour space, but we found that this made neighbouring cities too similar in colour. This means that people who travel frequently between Glasgow and Edinburgh wouldn’t clearly see the difference in colour between the two. Also, since so much of the Earth’s surface is covered in water rather than cities, it leads to a sparse use of the potential colour space. In the end, we went with a much simpler approach: we take the MD5 digest of the city’s name, convert it to hex and take the first 6 characters as a CSS RGB value.

So there you have it. When we struck upon the idea of doing this a couple of weeks into developing Dopplr, it was a huge source of delight to us, and we hope it is to you too…

Illustration: Work-in-progress by Stamen’s Tom Carden using the Dopplr API

—-
* We call it a ‘SparkLogo’ as tribute to information-design-guru Edward Tufte’s concept of “Sparklines” which we also use as a device for visualising information elsewhere on the service e.g. on the detailed trip pages.