Fullbay not only had tools for repair shops but also had tools for their customers. Customers could approve estimates, pay their invoice, and request service from a portal.
The problem was that the UI was not intuitive and looked like it came out of 2005.
We started getting feedback from our customers that the tools we gave them to interface with their own customers were confusing to use and starting to look dated.
If you think that large block white space looks like a mistake, it isn't. None of the pages of the customer portal were mobile responsive and the calls to action were difficult to find.
The above image is the invoice page which is just one of many pages that needed work. Clearly the UI was an issue but the UX also needed to be revamped. Users were getting confused how to pay their invoices, something that should be so easy to do.
There is a lot going on with this page. There are blue buttons all over the screen cluttering the UI. There are no labels for the icon buttons so users don't know what their purpose is. It is also very unclear what the user is supposed to do at any given status.
The status on the old view made the line all one solid color which made it really difficult to read, especially on mobile devices directly in the sun. The new status indicator increases the contrast, making it easier to read and a cleaner interface.
There is functionality on the old view that allows for quoting a part from multiple vendors that is user for less than 5% of parts. By removing this from the UI it makes it a lot more user friendly.
There were also icon buttons on each item that were not used very often and also had no labels so users didn't know what they did. By taking those same actions and putting them into the ellipsis button it gives space for future growth.
The old view is not mobile responsive and is built using table rows. The new view simplifies the UI and allows for modern architecture that looks great on desktop, tablet, and mobile screen sizes.
Fixing the UI was fairly straightforward. Using modern design practices I created a UI kit and started mapping the existing site features to it. With the UX I looked at what the most popular features of the customer portal and interviewed our customers and their customers about what they found most problematic. The biggest piece of feedback was users not understanding how to make payments on an invoice and through some digging I found that they were literally missing the pay invoice because it was usually hiding off the edge of the page and they weren't scrolling over far enough to find it.
By taking the call to action and placing in a sticky footer with a large button that spans the viewport I made it much clearer how to pay.
I took the most valuable information and put it at the forefront. The information that users didn't need was cluttering the UI and making it hard to get a quick glance at your bill.
Customers loved the updated portal. Their customers called less asking for support in using it, they were paid on time faster, and overall it became a tool for our sales team to use to get shops to signup for Fullbay.
There is a lot going on with this page. There are blue buttons all over the screen cluttering the UI. There are no labels for the icon buttons so users don't know what their purpose is. It is also very unclear what the user is supposed to do at any given status.
The status on the old view made the line all one solid color which made it really difficult to read, especially on mobile devices directly in the sun. The new status indicator increases the contrast, making it easier to read and a cleaner interface.
There is functionality on the old view that allows for quoting a part from multiple vendors that is user for less than 5% of parts. By removing this from the UI it makes it a lot more user friendly.
There were also icon buttons on each item that were not used very often and also had no labels so users didn't know what they did. By taking those same actions and putting them into the ellipsis button it gives space for future growth.
The old view is not mobile responsive and is built using table rows. The new view simplifies the UI and allows for modern architecture that looks great on desktop, tablet, and mobile screen sizes.