Designer needed! – Cyclescape design brief

Download this design brief as a PDF.

We are seeking a talented designer with strong web-application user interface abilities to undertake design work for the new Cyclescape website. Timescales are tight. Cyclescape is to be a website (currently under construction) aimed at helping cycling groups around the UK. The work will involve the creation of an overall design concept, plus user interface templates for each of the user pages, and an icon set.

(This contract is for design, not programming. A team of coders are already working on the programming.) 

It is being created by CycleStreets, a not-for-profit social enterprise who run the UK cycle journey planner at www.cyclestreets.net. Programming is already underway.

The site is a grant-funded project, funded by GeoVation. GeoVation is an Ordnance Survey initiative and forms part of the Ideas in Transit project with funding from the Technology Strategy Board and the Department for Transport.

About Cyclescape

Cycling conditions in the UK need to be improved massively. Cycle lanes that end unexpectedly, roads shared with lorries, non-existent cycle parking, etc.. Any cyclist can give you a catalogue of problems that need tackling in their town or city. The end result is far fewer people cycling than there should be.

Cycle campaign groups are key to changing this. These groups – large and small, national and local, are the people on the ground who work make cycling better.

Cyclescape is to be a comprehensive online campaigning toolkit to assist cycle campaign groups around the UK. In the words of one supporter, it should be "a hugely important step forward for all cycle campaigning groups". We're working to provide groups with a really great, useful and user-friendly system that will save a lot of time and effort.

The project’s blog at https://blog.cyclescape.org/ contains more details and progress reports.

Turning cycling problems into solutions

Overview of functionality on the site

Some of the things the new system will be able to do are:

  • Enable members of the public and campaigners easily to pinpoint where cycling is difficult
  • Enable simpler and more focussed discussion based on specific issues, groups of issues, or themes
  • Enable best practice to be 'pulled-in' to discussions, by providing off-the-shelf examples shared from elsewhere in the UK
  • Help groups prioritise what to work on
  • Enable groups to include Council contacts in these discussions if they wish
  • Pull in planning application data automatically, so that potential issues needing attention are readily accessible
  • Automatically notify and involve people who cycle through an area – who therefore have an interest in seeing issues fixed
  • Make geographical data such as collision data and accessibility analysis easily available, to provide context
  • Enable groups to assemble 'solution' resources so problems can be resolved on the ground
  • Give groups a variety of ways of publishing their activity on their website easily.

A more detailed two-page description of the site is available at
https://blog.cyclescape.org/images/ToolkitDescription.pdf

Timescale

We are keen to appoint a designer as soon as possible.

The site will become available to groups during December. We would like to have a design in place by late November (or earlier if possible). We realise this is a tight timescale.

Usability

The site will be used by cycle campaigners who have a wide range of technical abilities, many with little experience of web applications. Also, some of the users will be particularly heavy users. The interface therefore needs to be as self-explanatory and streamlined as possible.

Given the tight timescale, we expect more emphasis on graphic design rather than user interaction design. A designer should be knowledgeable about the latter, with a good understanding of usability and IA issues. The project’s manager from CycleStreets has good usability knowledge.

Mapping is a particular aspect where the site will need usability work, e.g. how to represent showing both ‘points’ and ‘areas’ together on a map). Specific ideas/knowledge in this area would help.

Design principles

The design and usability must:

  • Be attractive and clear
  • Contain plenty of whitespace: we don’t want a cramped design
  • Clearly guide a user through the workflow of the site
  • Appear open and welcoming to new people to join in the debate
  • Have a chrome design that is separable from the internal pages, so that the functionality is embeddable in other sites (see below).
  • Enable users to interact with maps easily
  • Be fast-loading, i.e. not image-heavy

Here are a few sites whose designs/UI we like. Obviously we are not asking for these in any way to be emulated, as design must be original, but this should hopefully give a flavour of the sorts of modern design approach we want.

Likely pages

The number one requirement is for the page template concept that sets the style and tone for the whole site. This is a 'from-scratch' project to create the "organisation’s" branding.

Here is a list of the main pages that will be produced. There will be some more, but not substantially so, and we would expect to be able to adapt the finished design to pages with new forms/content:

  • Main front page
  • Report an issue page (for submitting a problem location, with or without a photo)
  • Login page and account management pages
  • Register a group page (e.g. cycle group has their own discussion area)
  • User management pages (for the group’s Committee)
  • Issue page, showing a reported problem
  • View all issues on a map
  • View issues by listing
  • Forum-like ‘thread’ page, where a reported issue is being discussed. This will need to include the concept of blocks of info that can be ‘pulled into’ the discussion, with just a summary shown. Users can then click to ‘open out’ an info block to reveal more info.
  • User dashboard
  • ‘My issues’, showing all the issues they are discussing
  • Help/documentation pages
  • Gallery page showing several photos
  • An HTML e-mail with a reply by someone else to a discussion the user is subscribed to
  • Pages where ‘info blocks’ (basically shareable resources) can be created (wizard-like format)
  • Listing of info blocks

If you can design a logo also that would be additionally useful. If not, we will seek a volunteer but obviously the logo and design will need to have unity.

We would not expect all of these pages to be created at once, but would see these as being worked through, with a few done initially to ensure the concept works well.

Ability for groups to embed Cyclescape in their own websites as a web application

A complication of this site is that it should be possible in future for cycle campaign groups to embed the Cyclescape site as a web application forming part of their own sites. This would mean that the site chrome is not present, but the primary navigation and other functionality should be. We are prepared for some compromise on this as time is tight, and would welcome thoughts in your application.

By way of example, CycleStreets has created these sites which show how its journey planner is embeddable in other sites. (The web application code determines which site chrome to use based on the URL.) Note that the internal design/layout is the same, except for slight font changes.

Technical requirements

We would prefer a designer who can supply finished XHTML/HTML5 and CSS2/3 templates, although if you do not have well-developed skills in that area we can do the conversion from Photoshop.

We are happy to consider progressive enhancement techniques that have reasonable browser support. For instance, we would be happy for gradient buttons to use CSS gradients (with a solid colour as fallback) to be used rather than an image background.

By way of background, the site is being coded using Ruby-on-Rails, jQuery and OpenLayers.

Applications

Please contact Martin at info [at] cyclestreets.net by midday on Thursday 3rd November if you are interested to bid for this work, outlining your interest, comments on any aspects above, your existing portfolio and your proposed fee level and availability timescale.

Do not send any design mock-ups with your application. We are strongly opposed to design-on-spec and any such applications will be binned.

Applications will be considered on an equal opportunities basis, i.e. on their merits alone.

Cyclescape Q&A

We presented the Cyclescape project to the Cyclenation/CTC conference in October 2011, to an audience eager to know how it will help their campaigns.

Here’s the presentation we gave, and scroll down for questions and answers.

 [and Text-only version]

Here are some of the questions we were asked, and answers to them.

1. How do I start a group in my area? What if I'm on my own?

Groups will go to a simple webform to apply for a Cyclescape site for their area. They can customise it in various ways.

A person on their own will also be able to create a new group for their area. They can then welcome others who live nearby, to join that group.

It is an explicit goal of the system that we help new campaign groups to spring up and provide them with resources to get them going easily.

2. Can there be more than one group covering a particular area?

Yes. There is no restriction on overlapping groups, as many areas have more than one campaign group.

Groups can, if they want, choose to campaign together. We hope that, over time, the system will help increase co-working between groups so that together they have a stronger voice.

3. How much information can groups share with each other?

Basically as little or as much as they want.

The default is that discussions are not shared, i.e. each group has its own area that is private. It is up to the people running each group to open things up beyond that if they want.

Groups can choose to make their discussions open-access if they wish; they can control who is added as a member of their group; and they can choose to share particular discussion threads if they wish.

The library of best practice will contain national and local examples. The national ones are usually shared. This will mean that a group can publish how they solved a particular campaigning issue, or share best practice photos and documents.

4. In our city we have a problem that the council put in "Pinch Points". They won't listen to us -  how can this system help?

Firstly, the system will help identify who will benefit by its removal, by seeing who cycles through the area, so that you can increase the number of people who can push to make the council change its view. We know this can really make a difference as our campaign in Kingston Street in Cambridge did exactly this (only we had to work out manually who these people were!).

Secondly, the system will automatically suggest examples from elsewhere around the country where the problem has been solved. It will only need one group to create a resource about this.

Thirdly, the system could also provide evidence of where a compromise has been achieved. Our experience in Cambridge, for instance, is that pinch points of 3.1 to 3.9 metres cause the most problems.

The system will basically help you build the best possible case for removing the pinch point, as easily as possible.

5. I'm keen to get involved with Cyclescape but the technology scares me, are you running any tutorials or workshops that can help me get started?

It is a strong aim that the system is self-explanatory and easy to use.

We shall also provide online guides to explain how to get started, and we'll think about organising a workshop, perhaps at another conference where we can demonstrate the system.

6. How does the sharing of best practice work?

Groups can create resources which describe how particular successes have been achieved.

Groups can add photos of good and bad practice. The existing library of over 30,000 photos from CycleStreets will also be available in the system.

Groups will also be encouraged to construct summaries of national/local policy documents, which will be well-categorised (by tagging with key words). This will help other campaigners nationally find out what guidance exists quickly and be able to quote it. This will mean that discussions on, for instance, cycling in pedestrian zones, would automatically pick out the key guidance, show photos and newspaper reports from where it has been achieved, etc.

We want to expand the photographic aspect of the system to create full galleries and downloadable high-quality images of best practice and are seeking funding to expand the system to include this.

7. Is it free?

Yes, groups can create a Cyclescape site for their area completely free of charge.

This is possible thanks to a grant of £27,000 that we obtained from GeoVation. We recognised when applying for this grant that groups all around the country face the same problems, but that few groups have much funding. It therefore made sense to create a campaigning platform that all could use, to avoid the need to reinvent the wheel continually.

8. Will it use the same username / password as cyclestreets.net to login?

We haven’t yet finalised that issue. However, we are hoping so.

9. Will it need further funding in the future?

The system is intended not to require ongoing funding.

However, our initial grant does have a shortfall, and we are hoping to add some additional advanced features in the light of feedback during our consultation over the summer. We need around £10-20k for this, so if you know of a potential source of funding that would help fund sharing of best practice, please do let us know.

The system is open source and so we are going to be working to get people involved from the cycling community who can help with the development.

 

What’s the Cyclescape of your city like?

We’re pleased to announce the name of our new cycle campaign group toolkit:

Cyclescape

We had over 70 suggestions (including some humorous ones), many of which were excellent ideas.

It became clear that many of the best ideas started with Cycle, and we liked the idea that the name would be co-branded with CycleStreets, i.e. Cycle-s-something.

We also thought it was particularly important to emphasise the geographical aspect of cycle campaigning. We thought that inventing a new word, Cyclescape would be a catchy and unique brand that emphasises the idea of improving the landscape for cycling across our towns and cities.

Having fixed on a shortlist, we began the process of trying to obtain domain names. This took a surprising amount of work as we wanted to ensure we got all the variants (.com/.net/.org) by way of brand protection.

Unlike three years ago when we bought the name CycleStreets, many Cycle+ names have now been taken and reserved by domain brokers. After approaching some domain holders, it was clear that some of the best names were going to be prohibitively expensive, in the thousands of pounds, which was well beyond an already-tight budget.

In the end we spent more than we wanted to acquiring the name, but we’re very pleased with it. We hope you like the name too!

Cyclescape.net is currently under development and we’ll be setting up a blog there shortly. @Cyclescape will also be the site’s Twitter identity, so do follow that also.

Andy and Andrew, our developers, have been making excellent progress. Many of the core concepts of the site are in place, so we’ll have screenshots of  the system at ‘alpha’ phase in the next few days. If you’re a coder, follow the code work in progress on Github.

Now we need a logo…

Now we need a logo! We like the idea of a curved section of city, with markers on and a bicycle going upwards. Anyone able to help with that?