If you are like me, you stand next to the recycilng bin, holding an item and think can I recycle this?
You search online, find your local councils website to find the answer
Opening the Brighton & Hove councils website you are met with:
- Poor UX on the council website
- Unclear UI when displaying key information
- Frustrating flows
Lets look at the current flow
Expand Recycling section — Select "Our A to Z guide to recycling"
Recylcing overview page
Expand Recycling section — Select "Our A to Z guide to recycling"
An overview page... this feels a bit unnessusary...
Lets try and find out if we can recycle a deogrant can
Expand Recycling section — Select "Our A to Z guide to recycling"
Lets click D, E and F — Lots of options.. would be nice to search... anyway, lets click Deogrant cans
The page scrolls down, but because of the fixed header, it hides the option we want to view!
If you find yourself in this situtation, checkout the new scroll-padding css property
Scrolling up shows us the answer... no wait...? It tells me to lookup something different, and doesn't even provide a link?!
Might be easier to just bin it than find out...
FINALLY! I have to spend a bit of time to read the sentense, but it seems like I can pop it into my recycling bin.
That was a ton of steps for such simple information.
Solution?
It seems like cutting down even a few of these steps would help.
- Adding a search box
- Improving UI of results
- Remove any resuslts that just signpost you to another listing
Lets do the same flow again, on my new site.
First screen, shows a search box and simple list of results
Start typing deodorant can. Get the results instanlly below.
Done.
Did you know, you are not allowed to recycle pringles cans in Brighton & Hove?
A few key details about the project
- Created a script to scrape the councils website to collect the information
- Frontend built with react
- The site gets a few hundred users a month
- Created in a weekend
- Works great on mobile!