The Usability Brisbane Deserves: Lamb's Vision for CityCycle.

I spent some time thinking about CityCycle intimately during my 'Usability Therapy' sessions, and this is what we came up with:

In my previous article comparing Lime to CityCycle, I called out CityCycle for it's less than stellar usability.

Not to be one to cast stones without having something productive to say, I thought it might be interesting for people to see what we would do if we were taken on board to digitally transform CityCycle.We don't have the resources available to completely re-imagine the entire booking process just for a blog article. We thought it would be appropriate to focus on the home screen and navigation. This is an important part of the journey where several key factors are communicated. To: refresh your memory on CityCycle, this is the mobile view of the home page:

This article will break down our thinking and approach to CityCycle.

Positioning

We have compared CityCycle and Lime as they are personal transportation options, but they are different products that have different strengths and weaknesses. When we put together a site, we are always looking to make sure it is clear what the organisation's value offering is, and how it may be different to its competitors.

CityCyle is not Lime (and vice versa). CityCycle is not as sexy a brand or product as Lime. But it doesn't mean there aren't some compelling value propositions. 

Positioning on Sustainability

In spite of electric scooters being electric. They still create a carbon footprint, per use. Scooters are not carbon-free. They take energy to manufacture and to recharge. Absolutely Scooters have a lower footprint than a car to carry just 1 person. But let's investigate this a little more: To break down how cars and scooters' carbon footprint compare: Overall, the average greenhouse gas emissions per scooter mile travelled is just over 200 grams of CO2. By comparison, the life cycle emissions for the average automobile are just over 400 grams of CO2. So, riding a scooter is a clear winner overtaking a car.

Life cycle comparison of carbon emission comparison - Scooters vs The Average Car:

Lime Scooters

• 1.6km (1 mile)

• 200 grams C02

An average car

• 1.6km (1 mile)

• 400 grams C02

Article reference: Electric scooters aren’t quite as climate-friendly as we thought (The Verge)

I would have thought that the scooters would have been an order of magnitude better, but not so. But what if we go dive deep? And we are thinking 'cradle to grave,' a consideration of the bigger picture between cars, scooters and bikes? You, as a cyclist, need energy to use your cycle, and that comes from the food that you eat - which also has a carbon footprint. Obviously, the numbers below could be torn apart, this is not a scientifically rigorous analysis. But still, indicative.

Food vs Carbon Produced:

• Bananas: 65g CO2 (32% of Scooter)

• Cereal with Milk: 90g of CO2 (45% of Scooter)

• Bacon: 200g of CO2 (100% of Scooter)

• Air-fried Asparagus: 2800g of CO2 (700% of Scooter)

Reference Article: What's the carbon footprint of cycling 1.6km (1 mile)

Therefore, if you enjoy a meal of Asparagus to fuel your daily cycle commute, you are producing a carbon footprint that is 7 times worse that the average car. Mind blown!

That said, for the average person, on the average diet - cycling is still more sustainable... and sustainability is sexy.

Positioning on Cost

City Cycle is cheap. Like cup-of-coffee cheap. For $5 a month, you can have as many City Cycle rides as you like (up to 30 minutes). The current pricing for Lime is a minimum of $1 minimum at 30 cents per minute used. So, for comparison, it's not difficult for a single Lime scooter ride to come at $5-6 to get from one side of the city to Southbank, a 15-minute ride.

Comparison - taking a 15-minute ride every work day (one way):

Lime Scooters

• 20 rides per month (work days)

• $100/mo

City Cycle

• Unlimited rides (up to 30m)

• $5/mo

Now, never mind that this is only one way. It's clear there is a massive price benefit to CityCycle - even if they doubled or tripled their monthly fee. CityCycle does highlight the low cost through pricing tables. But we could keep it simple and just come out and make the point - it's the most affordable transportation option! *Ahem* - other than walking.

Information Architecture

This is where most of our thinking comes in for this solution. The CityCycle website tried to say far too much. If they organised and prioritised the information a little more, it would be a much more streamlined process - like Lime. If we look at the current CityCycle website, they choose to display:

• Navigation

• Detailed pricing Levels

• Partners/social media

• FAQ's / How does it work

• Map

• And so on!

We just don't need to show all this information, not all at once. Like a seventeen-year-old applying for university. We need to make some choices, and we can't choose 'yes' to everything. As we are at the very start of the user journey, the main thing we need to achieve is an introduce and frame the service we are talking about, then move people in the likely direction they will want to go. These actions are largely covered by the CTA's (below). This is what we get when viewing the CityCycle home page:

What do we think about this?

Detailed pricing

• At face value, it seems useful to show pricing levels.

• But it's not. It forces the users to comprehend a pricing model. We can just say 'it's cheap', or 'no more than $5/mo'.

• The text below each option doesn't do anything to add value to my understanding of the CityCycle model. It's a duplication of information.

• Highlighting the student option doesn't seem of huge value up front given how low cost the most expensive option is anyway. Surprise them later.

• The buttons seem informational, rather than actionable.

Competition Promotion

• Placed far too prominently on the website. Competitions and promotions can sit on their own page that you link through your inbound channels.

• More effective copy could be 'Win a Macbook Pro', rather than 'Competition time'.

• Bottom line - Move elsewhere.

FAQ's / How does it work

• FAQ's overview - Specific questions highlighted, but these don't link to the specific answers they raise.

• How it works leads to a page, where you then need to go into another page. Information is too fragmented. Could be handled in 1 page.

Partners/Social Media

• Visually the largest elements on the entire page. Over emphasised.

• It probably would be better to place these in the footer, at the end of the registration process, anywhere else.

So, what about our solution?

• Include a quick clarify remark on what this is

• Emphasis given to the value proposition

• Provide a hint of the likely cost

• Mention coverage and availability

• Similar sized CTA's

CTAs

This was one of the simpler elements of the design to resolve. Lime has largely solved this, utilising two CTA buttons, serving the two most likely use cases:

• I want to sign up

• I have a question

There's no point in being different for the sake of being different, so we followed the Lime CTA model. We have also prioritised signing up, and the bike hire model is largely self-explanatory apart from the model of how the renting works. In our information architecture for the home page we have looked to cover two major questions:

• How much?

• How many stations are there?

If they have any other questions, the FAQ section is readily available.

Navigation

Given there is no equivalent structure because the existing CityCycle website is not responsive. We thought this would deserve some attention.

What did we do?

• Focus on registration and usage CTA's

• Finding a station is an important activity

• You will at some point need to call CityCycle, making this number available is helpful

Nothing mind blowing here, but still quite useful.

Aesthetics

There are several things we consider when designing the page.

• Typography

• Colours

• Imagery?

• Icons

• Element sizing and spacing

In this case, we have focused a little more on typography to provide a more contemporary style. The font is bold and rounded, making it easier to read. The colours sit with the digital design representation of the brand, of which we don't have a master copy of the brand guidelines. But I believe are a good representation of the Brisbane City Council's checked stripe colours. I would say the white on yellow isn't going to pass WCAG 2.0 AA auditing of section 1.4 (Distinguishable) of the standard. But, it's a quick concept, and it's an easy fix to apply. We would expect the brand guidelines would probably also be opinionated about the use of colours.

Summary

Normally, we extensively consult and workshop solutions. And interaction with the customer does produce a better solution for the customer and one that better fits the brand. We believe there is an improvement through our efforts.

Do you disagree? What do you think? And, who does it better now?

Would you like 5 easy-to-implement usability ideas?

If you liked our thinking and were interested in what we would do for you, let us have a quick look at your website or application. We'll talk you through your goals, and pain points and highlight what we think would be the most effective set of improvements you could make to your user experience. Register here or drop me a line at greg@lamb.com.au.