Donate using PayPal

CycleStreets blog

News from CycleStreets

Archive for the ‘Design’ Category

Cyclescape website redesign coming soon

Thursday, January 2nd, 2020

Cross-posted from our Cyclescape blog:

Over the last five years, we’ve received lots of feedback about our Cyclescape website, which started in 2012, as well as much experience ourselves as users.

As a result of funding from our new project StreetFocus, we’re pleased to announce that we will shortly be starting work on a full-scale redesign of the Cyclescape site. We expect the design work to be finalised in February and will then be rolling out as developer time permits shortly after that.

This will be a full-scale revamp. As well as a fresh visual look and a new mobile-friendly interface, this will tackle seven key areas of usability:

  1. Generally, reorganising screens to reduce confusion and make the site concepts much clearer and easier to understand;
  2. User onboarding process is poor – currently users have to go through far too many screens to get set up;
  3. Lightweight issue reporting model, so that many more issues can be reported in a more lightweight way;
  4. The issues map is unusable when many area-wide issues present – we want the map to be a stronger focus, and much nicer;
  5. Subscription by theme, e.g. ‘cycle parking’ rather than purely by geographical area;
  6. Dealing with general chat discussions that are neither geographical nor administrative, which has always never really worked;
  7. Planning application integration to add new features such as automatically linking to key documents.

Please do take the opportunity to fill in our survey to give us your thoughts on the site.

An unusable map – one of the many problems we plan to tackle

Beautiful new galleries page unveiled

Monday, July 27th, 2015

We are pleased to unveil the new Galleries front page, which brings your beautiful photos and content to the front and centre. Galleries is a really neat feature to group cycling-related media for presentation or campaigning.

There is also a lot more flexibility available while adding a new gallery – you can now navigate away from the Create Gallery form to find more photos to add, and when you return all the fields will be exactly as you left them. You can even close your browser window and come back later, and the gallery creation form will still show your data as you left it.

As well as the graphical front end, our intern Patrick has been busy developing a new Galleries API for developers, which enables API calls to list and show the content of Galleries, and create and update Galleries.

We hope you enjoy browsing and adding to the Galleries.

Screen Shot 2015-07-27 at 17.13.12

The CycleStreets logo – a bit of history

Monday, June 23rd, 2014

Our mobile team has been working on updates to our apps recently, and we’ve been working with our designer Ayesha on a modernised icon for the Windows Phone and iPhone apps.

During the discussion, Simon (our lead developer) gave a bit of history about the CycleStreets logo, which we thought would be interesting to share.

“I can claim to be the one who designed the CycleStreets logo itself.

It came out of a fairly intensive two weeks of trying out and sharing all sorts of designs with a few of us in early 2009. It was designed with GIMP software, and based on our earlier CamCycle logo with a road going off into the distance.

It took ages to get the curve right using the paths tool to control the splines, but the moment of magic occurred when I realised that the ponytail should become a scarf with the same shape as the road.”

CycleStreets has always been about practical cycling for everyday journeys, and we think the logo, featuring a bike with basket, rack and mudguards, reflects this.

CycleStreets logo

Design/usability improvements

Saturday, January 8th, 2011

Over the last month or so we've rolled out a range of usability-orientated design improvements to the Journey Planner and the Photomap. We'd like to do much more, but funding has not yet permitted this (see our funding drive).

These improvements complete the areas covered by our Sustainable City Grant, which funded a range of improvements that we have reported on via this blog over the last year. We'd like to thank them again for their support, which many users have benefited from.

If you can volunteer your time to help with further design work, do let us know!

Journey planner

The route result page should be much clearer now:

Journey planner page

The first thing we changed was to make it much clearer, in various ways, that there were a set of route choices available, one of the primary features of our route planner distinguishing it from more traditional car routing websites. This is an innovation we pioneered back in 2006, and is a concept now being used by other sites.

Secondly, we've made the map as large as we can fit for the current site width. We've had a lot of feedback about the size of the map panel, and would like to increase this still further with more radical changes to the design. We plan to move to a more fluid width design when funding or volunteer time permits (do let us know if you can help with design work).

A further key change has been to clean up the mish-mash of metadata about the route into a more easily-scannable and attractive set of information about the routing.

The CO2 saving compared to an equivalent car route is also now shown, again thanks to the Sustainable City grant.


The Photomap browsing page now uses a much wider size, with mini bubbles enabling quicker previewing of photos:

Photomap page

The image location page has been redesigned to show off the image much better (at size 640px), and move the less important details of the image to be less distracting.

We hope to add photo commenting soon.

Location page


Many of these changes took a while to implement as there were a lot of knock-on code changes (the area of the code concerned had become rather 'evolved', so to speak!).

We hope you like the changes and will find they make the system easier to use. We will add more changes as time and funding allow.

We welcome your feedback, especially to report bugs or give us route feedback.

My comments relate to: *

Your comments: *
URL of page: *
How did you find out about CycleStreets?:
Your name:
Our ref: Please leave blank - anti-spam measure

* Items marked with an asterisk [*] are required fields and must be fully completed.