Paul Carroll

Accessible 360

Accessible 360 came to Bust Out with an accessibility testing product that was 10+ years old, and built with an ancient version of Bootstrap. New features they wanted to implement were frustrating or difficult to do because of how cobbled together the front end codebase was. I was tasked with redesigning and eventually helping rebuild their product from the ground up.

UX Prototyping

Rebuilding an existing product was an interesting challenge. We worked closely with the auditing team to make sure that the work we were doing did not interfere with their day to day auditing process. This involved building countless interactive prototypes to try out ideas and validate a lot of the feedback we were getting from the team. This app is very complicated so a lot of those interactions had multiple states, and different ways to interact with them.

Design System

In a very real way, this project was built around user centered design. The big focus was designing with the auditing team in mind, but also also end users that would be interacting with a complicated tool they've never seen before.

The design of the existing app was very bare bones. It felt like a great opportunity to rework some old ideas, and set accessible 360 up with a new design system that they could carry forward into the future. The complexity of the app led to a ton of design decisions that were often challenging or multifaceted, but the end result was always a step forward.

Front End Development

I worked directly with the CTO and lead developer to help rebuild the front end of dozens of views and interactions. Accessible 360 is a Ruby on Rails app which I had a lot of experience with before. It felt great to go through and clean up a lot of old code, simplify things, and deliver a great design experience.

The Challenge

You could tell the product had been around for a while just by how many different ideas were crammed into different nooks and crannies. Many ideas were stepping on each other, and nothing was very well organized. There was a huge opportunity to strip it down to the studs and really figure out the best way to rebuild dozens of very complex views.

Building a Design System

The first order of business was building a design system for all of the different UI pieces throughout the app. There are tons of different states, button sizes, and charts that were surprisingly complex to build out as components within Figma. These building blocks allowed me to quickly assemble all of the different views.

Delivering

With the design system in hand, I worked closely with the team at Accessible 360 to start rebuilding their entire product. One of the main considerations with working on a project of this scope was making sure that the views we updated weren’t too dramatically different from what already existed. Many of the auditors that work at Accessible 360 have low vision or other accessibility needs, so making sure the product functioned the way it always did was extremely important.