Back to Portfolio

BiO - Reimagining maintenance requests and management for building engineers

2021

Me - (UX Lead))Me - (UX Lead))
Gareth (Design Director)Gareth (Design Director)
Bev (Senior UX Researcher)Bev (Senior UX Researcher)
A BAgel card vs FAgel card

A bit of background

BiO is already an existing web app but was extremely clunky. The client needed a UX team to give it a revamp, streamline the user journeys and set out a component library for the developers to build upon.

Some of the initial problems we needed to solve were:

  • No visibility of system status anywhere
  • Buttons & text failed accessibility
  • Full width text inputs and poor hierarchy on desktop
  • Inconsistent taxonomies and labeling
  • No onboarding or direction of user flow
A UX heuristic review
A UX heuristic review we did of their existing application

Engineer Interviews

Myself and our researcher conducted some engineer interviews and gathered some insight into some of their issues with the current BiO app. We then used these to form key tasks, JTBD and personas for the engineers.
Engineer interview insights

Project scope

Because BiO is was an enormous app, we focused on 5 main flows to focus on and develop. These were the ones we felt could do with the most improvement and have the most benefit for the users and the business. We focused on:


  • Global Navigation
  • Inspect job / completing checklist
  • Starting job / updating job status
  • Raising a job
  • Inspecting a quote
Initial layout sketches
Some initial sketches to get an idea of rough layout

Low fi mockups

We developed these out into some more solid greyscale wireframes. This is also where we started to define the main call to actions and navigation structure.
Low fidelity wireframes

Starting on the component library

We started to develop a component library to determine exactly what elements we could re use. This allowed us to start getting feedback incrementally on the UI and to make sure we were staying on brand.
Component library overview

Tables into Cards

Almost every screen in this app was a table view. Engineers were constantly on the move and almost always on a small device such as a tablet or a phone. They mentioned the data complexity as a big pain point. We needed to find a way to simplify and surface the right data at the right time.

jobs view

Documenting patterns and design decisions

This was a scoped project just for design work. The client needed precise documentation of patterns and design decisions to hand over to their development team.
Documentation overview

Inspecting a job

Completing a checklist

Validating design decisions

Since prototyping we've been able to gather insights from real engineers putting them through usability hub and collecting heatmaps.

Usability testing of some screens

Where the project ended up

This was a timeboxed piece of work, we had 8 weeks to get this out the door from inception to design validation.

We went through a few rounds of testing with engineers and the client to ensure we were on the right track.

At the time I left Red Bullet, the client had started the build phase of the new app in Angular, using our new component library.