When something’s not right on your street, and you’ve gone out of your way to report it to the local council, the last thing you want is to get bogged down in a complex log-in procedure.
That’s why FixMyStreet has always put the log-in step after the reporting step, and has always allowed you to report a problem without needing an account or password at all.
But we know we can always do better, and in the 11 years that FixMyStreet has been around, new design patterns have emerged across the web, shifting user expectations around how we prove our identities and manage our data on websites and online services.
Over the years, we’d made small changes, informed by user feedback and A/B testing. But earlier this year, we decided to take a more holistic look at the entire log-in/sign-up process on FixMyStreet, and see whether some more fundamental changes could not only reduce the friction our users were experiencing, but help FixMyStreet actively exceed the average 2018 web user’s expectations and experiences around logging in and signing up to websites.
One thing at a time
Previously, FixMyStreet tried to do clever things with multi-purpose forms that could either log you in or create an account or change your password. This was a smart way to reduce the number of pages a user had to load. But now, with the vast majority of our UK users accessing FixMyStreet over high speed internet connections, our unusual combined log-in/sign-up forms simply served to break established web conventions and make parts of FixMyStreet feel strange and unfamiliar.
In 2014 we added dedicated links to a “My account” page, and the “Change your password” form, but it still didn’t prevent a steady trickle of support emails from users understandably confused over whether they needed an account, whether they were already logged in, and how they could sign up.
So this year, we took some of the advice we usually give to our partners and clients: do one thing per screen, and do it well. In early November, we launched dramatically simplified login and signup pages across the entire FixMyStreet network – including all of the sites we run for councils and public authorities who use FixMyStreet Pro.
Along the way, we took careful steps—as we always do—to ensure that assistive devices are treated as first class citizens. That means everything from maintaining a sensible tab order for keyboard users, and following best practices for accessible, semantic markup for visually impaired users, to also making sure our login forms work with all the top password managers.
Keeping you in control
The simplified log-in page was a great step forward, but we knew the majority of FixMyStreet users never used it. Instead, they would sign up or log in during the process of reporting their problem.
So, we needed to take some of the simplicity of our new log-in pages, and apply it to the reporting form itself.
For a few years now, the FixMyStreet reporting form has been split into two sections – “Public details” about the problem (which are published online for all to see) followed by “Private details” about you, the reporter (which aren’t published, but are sent to the authority along with your report, so they can respond to you). This year, we decided to make the split much clearer, by dividing the form across two screens.
Now the private details section has space to shine. Reorganised, with the email and password inputs next to each other (another convention that’s become solidified over the last five or ten years), and the “privacy level” of the inputs increasing as you proceed further down the page, the form makes much more sense.
But to make sure you don’t feel like your report has been thrown away when it disappears off-screen, we use subtle animation, and a small “summary” of the report title and description near the top of the log-in form, to reassure you of your progress through the reporting process. The summary also acts as a logical place to return to your report’s public details, in case you want to add or amend them before you send.
Better for everyone
As I’ve mentioned, because FixMyStreet is an open source project, these improvements will soon be available for other FixMyStreet sites all over the UK and indeed the world. We’ve already updated FixMyStreet.com and our council partners’ sites to benefit from them, and we’ll soon be officially releasing the changes as part of FixMyStreet version 2.5, before the end of the year.
I want to take a moment to thank everyone at mySociety who’s contributed to these improvements – including Martin, Louise C, Louise H, Matthew, Dave, and Struan – as well as the helpful feedback we’ve had from our council partners, and our users.
We’re not finished yet though! We’re always working on improving FixMyStreet, and we’ll be keeping a keen eye on user feedback after these changes, so we can inform future improvements to FixMyStreet.com and the FixMyStreet Platform.
Your donations keep our sites running.Donate now
Just a short one for today. Here’s a plot of the rate of take-up of Engineers Without Borders UK’s successful pledge to solicit funding for a development project in Suriname (the first of what we hope will be many projects using PledgeBank to raise funds):
[Plot showing takeup of EWB Suriname fundraising pledge – image gone]
— we’ll be incorporating this (and some other handy information, such as how many people are looking at the pledge pages and which sites link to them) into the site some time soon to help pledge creators see how they’re doing at publicising the pledges (and also because graphs look cool).
Today’s other task was to switch the live site over to using the new login system which Francis mentioned the other day. This was complicated by the fact that there might be some users who had received a signup token, but hadn’t clicked through on the token to actually complete their signup before the site was shut down for the upgrade. The solution to this is a bit nasty, but it seems to have worked OK, which is nice.
We’ve been spending the last few days adding a more comprehensive login/authentication system to the PledgeBank code. At the moment, PledgeBank checks your email address every action that you do. In the new system you can still get it to email you if you like, or if you prefer you can set a password. It will also use session cookies to remember that you are logged in. The plan is to use the better login system to let pledge creators do more things, like email signers during the campaign, and upload a photo to go with their pledge.
This has taken quite a radical overhaul of the codebase, and the database scheme. There’s now a “person” table, which really is an email address. Chris has made a lovely elegant system, where you can just call “person_signon” in some PHP code. Then it goes away, and makes sure they are authenticated. This might be immediate, if they are already logged in. It might require a password, or it might require emailing them. Whichever way, when they come back (possibly via a link in an email), it restores the request and goes back to the page which required authentication.
In total, this will almost be a net deletion of lines of code, when the existing token systems are fully removed. Meanwhile, I’m testing and debugging it like crazy. And we’ve got to work out how to deploy the code without breaking anyone mid-signing at the moment we upgrade it. Upgrading not just the engine but the transmission as well, while the car is running.