We identified key user personas, each with different tasks and capabilities. Some users are restricted to just viewing content, some could edit and manage their own accounts, as well as the accounts of their organisation.

We created user flows for each persona, capturing how their different capabilities manifested in their journey. We mapped how each screen, notification or email might be different or required, which all depended on the users account rights and flow through.

The journeys were transformed into wireframes, focusing on the placement of elements and communication. We constantly questioned ourselves such as, do they know what screen they’re on and what to do next? What if errors are made and how they’re communicated?

We discovered the best language to use. For example, Login, Log in or Sign in? A challenge was to seamlessly communicate Focaldata approved accounts. Whilst waiting for approval, we introduced an onboarding step, keeping the journey flowing and minimising frustration.

Following usability testing iterations of the wireframes, we added the visual layer. Focaldata used the Material UI framework, so our designs needed to correlate. The framework’s is built up of colours, type scales, interactions, errors, buttons and components. Our design speed drastically improved, allowing more focus on UX.

After the initial launch, we’ve worked closely with Focaldata, iterating through several design sprints with specific aims. Overall, the core aims are improving usability, streamlining user journeys and adding new features. Notably, the design has become simpler and cleaner to improve usability, organisation and content digestion.

We initially 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 and personas for the engineers.

Because BiO is was an enormous app, we narrowed down our scope 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.

• Global Navigation
• Starting job / updating job status
• Inspect job / completing checklist
• Raising a job
• Inspecting a quote

We sketched out the system as this is the quickest way to plan out what we wanted to create. Through sketching we can save lots of time later down the line as it enables us to test new ideas and layout quickly. It also helps us understand the whole system very quickly. Knowing the system as a whole helps us make better decisions as we’re thinking of the system as a whole.

Once we sketched out the system, we brought them to life using our design programs. We use figma as we can quickly mock them up and then turn them into a clickable prototype. Having a clickable prototype early on in the process as it enables us to test and change UX issue early on, without committing too much time.

Once we tested and were happy with the wireframes, we applied colours and other visual elements to bring the designs to life. The way we set it up in Figma was through the use of reusable components. This means we only have to update the original designed element and it will update every use of it in the mock ups.

We already had an existing app and components within that we just needed to make it more usable, this meant starting from the ground up. We built everything with the Atomic Design System in mind. Starting off granular and building up to larger components.

Everything was from scratch: buttons to inputs to sliders, so we could have full control and scalability over everything.

Since prototyping we’ve been able to gather insights from real engineers putting them through usability hub and collecting heatmaps. We were then able to determine common pain points which we ammended.

We initially 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 and personas for the engineers.

Having run the event in the Alps for Ski for Sadie, using the same technology, we already had a bunch of rich user insight to start forming the direction for Quest. During the beta launch of Quest in lockdown 1, we piloted the app in a few locations around Kent, onboarding real users through Facebook adverts to gather as much insight as we could. Early findings showed young families were a huge take up as it gave children a new way to explore areas they already knew. Lockdown meant people couldn’t travel, so having something ‘new’ to do on their doorsteps saw an organic spike in users. At that point, we knew Quest would be a hit. No marketing spend, no brand exposure, but people were using it.

Because BiO is was an enormous app, we narrowed down our scope 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.

• Global Navigation
• Starting job / updating job status
• Inspect job / completing checklist
• Raising a job
• Inspecting a quote

Once we tested and were happy with the wireframes, we applied colours and other visual elements to bring the designs to life. The way we set it up in Figma was through the use of reusable components. This means we only have to update the original designed element and it will update every use of it in the mock ups.