Cover picture
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
1
Expand Recycling section — Select "Our A to Z guide to recycling"
1
Recylcing overview page
1
Expand Recycling section — Select "Our A to Z guide to recycling"
1
An overview page... this feels a bit unnessusary...
Lets try and find out if we can recycle a deogrant can
1
Expand Recycling section — Select "Our A to Z guide to recycling"
1
Lets click D, E and F — Lots of options.. would be nice to search... anyway, lets click deodorant cans
1
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
1
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...
1
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
1
Start typing deodorant can. Get the results instanlly below.
1
Done.
Did you know, you are not allowed to recycle pringles cans in Brighton & Hove?
1

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!