Roopairs Color System
Elevating user experience through usability standards and information architecture.
Duration
2 weeks, March 2021
My Role
Research, Design, Development
Mentors
CEO (Design), CTO (Development)
Platform
Mobile Web
Overview
This project is a special one for me—it was the first independent project I ever released to real customers. As a new designer, I raised a UX issue, designed a solution, and implemented it with full ownership. I delivered and effective solution fixing a major usability issue that affected hundreds of users.
To test my abilities against my first-ever project, I designed an updated version as a "V2". Featuring a new color system and design pattern, it revamps the app with a modern flow.
Roopairs Color System
Elevating user experience through usability standards and information architecture.
Duration
2 weeks, March 2021
My Role
Research, Design, Development
Mentors
CEO (Design), CTO (Development)
Platform
Mobile Web
Overview
This project is a special one for me—it was the first independent project I ever released to real customers. As a new designer, I raised a UX issue, designed a solution, and implemented it with full ownership. I delivered and effective solution fixing a major usability issue that affected hundreds of users.
To test my abilities against my first-ever project, I designed an updated version as a "V2". Featuring a new color system and design pattern, it revamps the app with a modern flow.
Roopairs Color System
Elevating user experience through usability standards and information architecture.
Duration
2 weeks, March 2021
My Role
Research, Design, Development
Mentors
CEO (Design), CTO (Development)
Platform
Mobile Web
Overview
This project is a special one for me—it was the first independent project I ever released to real customers. As a new designer, I raised a UX issue, designed a solution, and implemented it with full ownership. I delivered and effective solution fixing a major usability issue that affected hundreds of users.
To test my abilities against my first-ever project, I designed an updated version as a "V2". Featuring a new color system and design pattern, it revamps the app with a modern flow.
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.
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.
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.
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.
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.
Making text colors accessible, WCAG official.
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.
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.
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.
Versioning and ticketing to ship solutions with a user-first philosophy.
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.
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.
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.
Leveling up usability, step 1 complete.
Leveling up usability, step 1 complete.
Leveling up usability, step 1 complete.
By implementing new colors and chunking some information, we released Version 1 to resolve the user's pain point—readability. Since our text complies with WCAG, we know that users in typical conditions can now use the app comfortably.
By implementing new colors and chunking information, we released a V1 that resolves the user's pain point, being able to see the UI. Since our text complies with WCAG, we confidently know that users in normal conditions can now see and use the app.
By implementing new colors and chunking some information, we released Version 1 to resolve the user's pain point—readability. Since our text complies with WCAG, we know that users in typical conditions can now use the app comfortably.
Here's how I would further elevate UX.
Here's how I would further elevate UX.
Here's how I would further elevate UX.
Familiar design patterns and smooth animation to raise delight and NPS.
Familiar design patterns and smooth animation to raise delight and NPS.
Familiar design patterns and smooth animation to raise delight and NPS.
As a mobile app that customers use daily, the UI needs to feel like it belongs within their day-to-day apps. Inspired by popular platforms like Facebook and Doordash, users would gain a sense of trust and enjoyment out of a user interface with an updated feel.
As a mobile app that customers use daily, the UI needs to feel like it belongs within their day-to-day apps. Inspired by popular platforms like Facebook and Doordash, users would gain a sense of trust and enjoyment out of a user interface with an updated feel.
As a mobile app that customers use daily, the UI needs to feel like it belongs within their day-to-day apps. Inspired by popular platforms like Facebook and Doordash, users would gain a sense of trust and enjoyment out of a user interface with an updated feel.
IA measured against what our customers care about most.
IA measured against what our customers care about most.
IA measured against what our customers care about most.
Customers get more revenue when technicians complete more jobs per day. So when we techs can multitask better, it means our product delivers more value. By testing and iterating the best workflows to achieve that, we can prove bigger ROI.
Customers get more revenue when technicians complete more jobs per day. So when we techs can multitask better, it means our product delivers more value. By testing and iterating the best workflows to achieve that, we can prove bigger ROI.
Customers get more revenue when technicians complete more jobs per day. So when we techs can multitask better, it means our product delivers more value. By testing and iterating the best workflows to achieve that, we can prove bigger ROI.
Increase productivity by biasing users towards action.
Increase productivity by biasing users towards action.
Increase productivity by biasing users towards action.
Job cards have a consistent "Action Area", making it easy for users to focus on the task at hand. Regardless of the job's status, users always look at the same spot to know the next step. This design pattern should make it effortless for technicians to increase productivity.
Job cards have a consistent "Action Area", making it easy for users to focus on the task at hand. Regardless of the job's status, users always look at the same spot to know the next step. This design pattern should make it effortless for technicians to increase productivity.
Job cards have a consistent "Action Area", making it easy for users to focus on the task at hand. Regardless of the job's status, users always look at the same spot to know the next step. This design pattern should make it effortless for technicians to increase productivity.
Make invoicing easy by building it into their flow.
Make invoicing easy by building it into their flow.
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.
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.
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.
Putting the design to its test through real customer data.
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.
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.
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.
More jobs per technician.
More jobs per technician.
Techs complete more jobs when multitasking is easier.
Roopairs makes multitasking easy.
Techs complete more jobs when multitasking is easier.
Roopairs makes multitasking easy.
Techs complete more jobs when multitasking is easier.
Roopairs makes multitasking easy.
Shorter time-to-invoice.
Shorter time-to-invoice.
Shorter time-to-invoice.
Customers pay earlier when invoicing is earlier.
Roopairs gets your company paid.
Customers pay earlier when invoicing is earlier.
Roopairs gets your company paid.
Customers pay earlier when invoicing is earlier.
Roopairs gets your company paid.
©️Takumi Arai 2024
©️Takumi Arai 2024
©️Takumi Arai 2024