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.
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.
- http://www.fixmytransport.com/ - some of the core concepts on this site are shared by Cyclescape, e.g. reporting of problems, clicking on a map
- http://38degrees.org.uk/ - not so keen on some of the typography and it could be a little more spacious, but is clean and action-orientated
- Shopify, various sections, e.g. http://wiki.shopify.com/Main_Page and http://www.shopify.com/examples - nice, whitespace-generous designs.
- http://stopdesign.com/about
- University of Oxford main site, e.g. http://www.ox.ac.uk/visitors_friends/ - perhaps a little busy, and fonts are perhaps too small for what we would need, but is clean and attractive
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.
- The main (native) CycleStreets website
- West Sussex County Council cycle journey planner
- ‘Placeford’ – demonstration Council site
- Bike Hub (cycle industry website) cycle journey planner
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.