Digital Blue Badge

Overview

  • Development of smartphone app for Blue Badge holders
  • In partnership with Transport Scotland
  • My role: Head of Design & Marketing at Deblur
  • My contributions:
    • User and stakeholder research
    • Sketching and wireframes
    • Prototyping
    • Usability testing
    • Visual design in collaboration with graphic designer
    • Working with developers to create MVP
    • Developing audio-visual assets for Launch day

Background

Deblur, an Edinburgh-based technology company, are developing the Digital Blue Badge. This solution will allow Blue Badge holders (i.e. people with disabilities) to manage travel concessions and exemptions quickly and easily with their smartphone.

The project was prompted by a challenge from Transport Scotland as part of the CivTech accelerator scheme. This scheme, managed by the Scottish Government, aims to bring private sector knowledge to bear on public sector issues. The challenge read as follows:

Challenge 10: How can we use Technology to help enforce a potential Blue Badge holder exemption from Low Emission Zones in Scotland?

Low Emission Zones are planned for Aberdeen, Dundee, Edinburgh and Glasgow. Older and more polluting vehicles will be penalised if they travel within these zones. As the challenge states, Blue Badge holders will potentially be exempt from these penalties.

Project

Discovery Stage

The discovery stage was already complete by the time I joined the company, so I built on my predecessor’s user flows and personas. The key challenge was to make the exemption follow the Blue Badge holder and not a particular vehicle. As the Low Emission Zones will be enforced by cameras that identify car registration numbers, we needed to create a simple system for Blue Badge holders to quickly tell us about their relevant journeys. It was also important that the system minimised fraud, ensuring that the Blue Badge holder was genuinely in the vehicle at the time it travelled within the Low Emission Zone.

User & Stakeholder Research

My first task was to contact stakeholders. Just before Christmas wasn’t the best time! Still, I contacted Disabled People’s Organisations, individuals and council staff involved in disability and transport, gaining a broad view of the issues and challenges. These parties helped us distribute a survey about smartphone ownership and travel into city centres for Blue Badge holders and their carers. I also conducted a focus group and one-to-one interviews. In addition, I conducted secondary research into relevant policies, initiatives and studies.

This research helped us pinpoint key user needs. In addition to ideas about our primary challenge, we found that Blue Badge holders would particularly appreciate help with finding disabled parking and accessible toilets.

Launch Day

CivTech 4.0 launched on the 21st of November with a ministerial visit. This round of the accelerator scheme included a wide range of challenges; from improving repairs for tenement buildings through to reducing carbon emissions. I’m at the front and centre of the photo, as usual, since I’m short!

We created an early prototype for the launch day using proto.io. As we had yet to do enough user research, it was more a proof of concept than a true prototype.

Sketching & Wireframes

Due to tight timescales, our research went on throughout the wireframing and prototyping stages. This means I created very quick and dirty wireframes for various features we did not use in the first version of our app. Several of these ideas may be used in future versions of our app, such as a feature for quickly and easily reporting misuse of Blue Badge parking bays.

Prototype

Our next job was to create a clickable prototype for usability testing, again using proto.io. Users can interact with these prototypes as if they were the real thing, without the need for time-consuming coding. This allows for quick and easy testing, so you can try out different solutions with real users.

I created the prototype alongside an external consultant, Josh. This was partly due to workloads, but also because it was handy to have an outsider’s point of view. The design was deliberately plain. We did not want to distract users from the functionality with colours or imagery.

Usability testing

We conducted usability testing with Blue Badge holders and their carers. I conducted the usability tests, welcoming the participants, asking some ice-breaker questions and explaining the short tasks. These were:

  • registering their Blue Badge;
  • adding a car registration to the app;
  • applying for Low Emission Zone exemption as if they were in the zone;
  • applying for an exemption ‘later’, as if they had left their phone at home.

We recorded as much as possible for later review. The smartphone screen was cast onto a laptop sat in front of the participant, which was also recording their voice and facial expression. The screen was blanked out to avoid distracting them. We had a back-up webcam with microphone, just in case. All the feeds were displayed on a monitor so my colleague could observe unobtrusively. In case anyone wants to do something similar, here is a diagram of our set-up:

Feedback was highly positive. Comments included

“It’s pretty clear to me”

“Compared to paying for parking it’s really easy”

“It doesn’t take that long to set up”

We also gained a great deal of insight into user needs. For example, as carers may be applying for the exemption on behalf of the Blue Badge holder, it is important that any facial recognition process works with both the front and back cameras.

The usability testing showed we were going the right direction, but that there was a lot more work to do.

Visual Design

We worked with an external consultant, Sally, for the brand’s graphic design. Accessibility was our key priority, so typefaces, logos and colours had to be super clear. We chose Open Sans for our typeface, as it works well on small screens. Given the name of the product we naturally chose blue as our brand colour. As blue also connotes calm, trustworthiness and reliability, it also seemed appropriate for a highly practical app. Other blues, greens and blue-greys were derived from this shade for the text and icons.

Many of our users may have poor vision. We ensured that the all text was AAA accessible against white and the paler palette colours, or when reversed out of a darker background colour. We added more subtle tones to the palette to allow colour-blind users to differentiate primary and secondary actions.

App Development

The director of Deblur, Zsolt Husz, is our lead developer. We also recruited an intern to help out with the React Native coding. I’m not a coder, so my job here was to keep the development in line with the planned design, whilst designing for any changes required.

Demo Day

CivTech hold a Demo Day to launch the solutions for each round of challenges. A representative from Transport Scotland, and our Director, Zsolt Husz, gave a presentation on the Digital Blue Badge solution. To help explain, we recorded a video which demonstrated the app. I used Adobe After Effects to create the effect of technology that had not yet been implemented in our app (e.g. facial recognition which will rely on third-party software).

Zsolt and I used very rough storyboards to agree the content and flow of the video beforehand. (I can actually draw, honest, I just did these very, very quickly.)

In addition, we welcomed visitors to our stand and demonstrated the app and back-end integration. Due to the tight timescales I designed the flyers, banner and business cards for the stand.

Conclusion & Next Steps

Usability test participants were very positive about our solution. One said

‘You’ve made something simple from something that could have been very complicated’.

We aim to continue making the app as user-friendly and accessible as possible, whilst also minimising fraud. If you have any suggestions then please do contact me.

We are currently awaiting legal sign-off for the next stage of the project. My role will include:

  • liaising with local authorities about their user needs,
  • creating the onboarding guide,
  • continuing to improve the UX and visual design of the service.