top of page
Screenshot 2024-06-26 at 18.07.37.png

Saving construction workers up to 3 hours per week each

Refactoring the permit listings in both our mobile and web experience to significantly increase the speed and efficiency in which users search and manage their permits.

What was the goal?

Our users were complaining constantly to the Customer Success team that it was nearly impossible to find their permits.  Sometimes these permit listings could list up to 120 permits in one (view all) list. There was hardly anything in each card that made it obvious which permit card related to what permit.

 

Worse still, was when users tapped on a card to view the details of the permit, realised its not the correct permit then go back, they'd be taken all the way back to the beginning of the list - without knowing which one they'd previously selected. It was literally driving them insane as they could spend hours per week just looking for permits!

What was delivered and how

I worked as the sole designer on this project working end-to-end - and was responsible for all UX activities such as discovery, user research, testing, prototyping and creating final polished design. I then worked closely with Dev on both the mobile and desktop apps to bring the new designs to life across IOS, Android, Web and Print (PDF Permits)

Deliverables

  • User Research

  • User testing

  • User-interface design (IOS/Android and the desktop app)

  • Fully functional prototypes

  • Developer collaboration

  • Stakeholder Collaboration

  • Customer sessions/user testing (18 recorded sessions + 4 sessions for the second round)

  • Collected data from user surveys

  • Problem defining sessions and design check ins

  • High-fidelity prototypes (final/polished UI)

  • The project took 3 weeks from inception to launch 

red-blues.jpeg

Image sent to me from a happy customer of the web app - a giant monitor displaying the new designs for Balfour Beatty

Final UI 

1696778599585.jpeg

The Solution

​

  • Neat, clean, slick UI using our new MUI design system

  • Important info stands out, lower priority info minimised

  • Coloured permits for red or blue permits

  • Add a favourite star for the permits users need to watchn

  • Larger bolder summary text, truncated

  • Unimportant information displayed

The Process

1. Defining the Problem

The previous UI (see image) had numerous issues:

  • Dated and clunky interface

  • All the permits looked the same

  • If users tapped on an incorrect permit, they'd need to start from the top of the list again (and again)

  • Sometimes users would spend HOURs going around in circles accidentally tapping incorrect permits as there was no way to differentiate one from another

  • Important information missing in listing views

  • Unimportant information displayed

Previous UI (clunky)

Screenshot 2024-06-26 at 16.08.23 1.png
Screenshot 2024-06-26 at 16.09.50 1.png

2. Ideation - How Might We...?

​

  • I worked on a few 'How Might We..?' ideas, with the Product Manager

  • Made a couple of iterations after a few chats internally

  • Prepped the designs ready for user testing

3. User Testing

I reached out directly to customers and they were all keen to jump onto a Teams call with me (as they were ALL struggling with this problem) 

  • Tested with 18 users (first round) within just 4 days - with zero budget (quick 20-30m Teams calls)

  • Established the extent of the problem (it was much worse than we anticipated)

  • Launched an internal survey to involve the wider team / stakeholders

  • Several users stated that they waste around 2-3 hours per week searching for permits, and that this was their biggest pain point with the platform

  • All users loves the 'star' feature to help them keep an eye on certain permits

  • All users were in agreement around enlarging the summary text, reducing the size of the template text

  • Users loved the new look and feel

Group 439.png
Screenshot 2024-06-26 at 16.10.29 1.png

I tested with 18 user's within 4 days, with zero budget

The beauty of nature_edited_edited_edited.jpg
I ended up completely deviating from the original idea, which was to use scrollable permit status tags/chips to help users identify their permits. After some testing, I realised all we needed, was a much simpler solution. One which would would be much easier and faster for dev to implement
mobl.png

4. Iterate, Retest, Finalise (Mobile)

​

  • Finalised the UI based on feedback/testing

  • Shared internally (design and dev review)

  • Retested with 4 users to validate final UI with positive responses

5. Redesigned the desktop App listings to match

​

  • Redesign the web listings to mimic the same information architecture (larger summary, red/blue permits)

  • Introduced the same consistent approach for the permit pages

  • Ensured the printed permit PDFs also consisted of the same structure and treatment

  • Redesigned the permit template builder to incorporate the changes

  • Worked closely with Dev to bring the designs to life

  • Launched

  • Received lots of positive feedback from customers

web.jpg

Results

tasw2.png

KPIs

​

  • Average time wasted per user (appx) before was 2.5 hours V no time lost after. Users can find a permit in a matter of seconds

  • Complaints via CS were daily V no further complaints after

  • Hotjar rage clicks reduced to near zero

  • Larger bolder summary text and red/blue strips being the main factors for spotting permits on both platforms

  • Without testing, we would have wasted a ton of time building something that didn't solve the problem

The beauty of nature_edited_edited_edited.jpg
"I couldn't believe it when I came back from my break and saw Claires red and blue permit designs on the big screens, we were all celebrating because its going to save us at least 2-3 hours a week - each!"

Stephen Clifford | Site Manager

bottom of page