Roopairs Color System
Elevating user experience with an accessible design system.
Overview
As the sole designer at Roopairs, I set out to improve UX from the ground up. I started with color and text accessibility. Leveraging WCAG, I quickly improved the product's usability for thousands of users.
I further designed a "2.0" of the UI, with Laws of UX incorporated to reduce cognitive load and create an elegant and intuitive user experience.
Duration
March 2021
My Role
Research, Design, Development
Mentors
CEO (Design), CTO (Development)
Platform
Mobile Web
Users experienced difficulty seeing the UI.
In-person interviews revealed that technicians struggled to see the screen under bright conditions. This problem was especially impactful for users with outdated tablets and thick screen protectors, making up a majority of the user base.
Testing against accessibility guidelines.
The brand at the time took on a pastel color palette to match the font Nunito. With the UI matching the brand identity, it was not producing enough contrast. I found more than 80% of text failing WCAG AA color contrast requirements.
Making text colors accessible, WCAG official.
By inspecting their existing web app, I laid out a color palette to document their current palette. For this solution, I unified the hues and nudged the luminance to meet accessibility standards. Users had to be able to read the text.
Versioning and ticketing to ship solutions with a user-first philosophy.
The "Complete" tab in orange did not product enough contrast, and darkening it took away too much color. I proposed design alternatives to resolve the issue. However, we found ourselves weighing each option and how it affects other parts of the design—so we backlogged this issue and a couple others so that users get usable UI ASAP.
Improved usability through accessibility.
Taking the UX another level up.
Utilizing movement to create a sense of dimension even in a small screen.
The effective use of cards, layers, and movement makes mobile UI feel intuitive and elegant. Even the most complex systems can feel simple with the power of progressive disclosure.
Reducing cognitive load to help techs focus on the task at hand.
Jobs used to be tabbed by status. This time, we tabbed it by job dates. This could help users focus more on their task at hand. We also reduced the cognitive load to help users focus on the high-level information. Once again, progressive disclosure.
Biasing users towards action to increase productivity.
Job cards have a consistent "Action Area", making it easy for users to focus on their task at hand. Regardless of the job's status, users always look at the same spot to take the next step. This design pattern makes it effortless for technicians to stay locked in.
Make invoicing easy by building it into their flow.
We often hear that Technicians tend to procrastinate on invoicing. Delayed invoices delay client payments.We can shorten the technician's time-to-invoice by designing friction into their workflow at the right time.
Putting the design to its test through real customer data.
If this redesign were to be released, it should allow technicians to multi-task more repairs in a day and shorten invoice completion time. Showing success in both metrics proves a bigger ROI for the Roopairs app.
More jobs per technician.
Techs complete more jobs when multitasking is easier.
Roopairs makes multitasking easy.
Shorter time-to-invoice.
Customers pay earlier when invoicing is earlier.
Roopairs gets your company paid.
©️Takumi Arai 2024