Team: Myself and a Product Manager
Duration: Several months interspersed with other projects
My Role: UX/UI Design, Prototyping, Research, User Acceptance Testing
Tools: Figma, Maze
PROJECT OVERVIEW
TaskEasy is a B2B marketplace that connects large-scale rental property owners with a nationwide network of 20,000+ service providers.
I worked on the Contractor-facing products. Our users were small, independent local service contractors representing an average of 2 work crews. My main focus was the comprehensive redesign of the Contractor Web Portal and Mobile Application.
I worked through each page of the Contractor Web Portal, focusing on user pain points, modernizing the interface, and improving usability and accessibility. This case study covers the Schedule Map page.
On the map page, contractors can see the layout of their workday. They can view where their teams work, how many jobs each team has, and open details of the individual jobs. One primary use case for the map is to reassign jobs from one team to another.
This redesign allowed me to reimagine a legacy product, leading to the following contractor experience refinements and improved business outcomes:
• Simplifying the contractor experience by enabling quick visualization of team schedules on the map
• Improving contractor operational efficiency via a new bulk reassign feature
• Refactoring the backend architecture to better support future business needs
• Preparing for future features by implementing scalable design solutions
THE PROBLEM
Aside from outdated UI, there were several problems we had to solve:
• Need to remove some functionality - the ability to reschedule a job to a different day, add a new address to the route, and rearrange the order of jobs
• The map was overwhelming - displaying every team for each day of the week made it difficult to pinpoint a specific job
• No bulk actions - if a contractor needed to reassign all jobs from a specific team, they had to do it individually
UNDERSTANDING THE PRODUCT
My first step in this project was to understand the existing product. I created a visual inventory of all the features of the current map so I could quickly reference how the contractors use it.
A visual inventory of the legacy Map Page
Next, the product manager and I met with various stakeholders to define requirements and talked to engineering to understand technical constraints.
Finally, I did competitive research to understand how similar software handles map displays, bulk actions, and viewing information.
After several brainstorming sessions, I created a first draft of the new Schedule Map page.
The main design changes I made:
• Changed the interface so that you see only one day at a time and added the ability to hide/show teams, allowing the user to pinpoint one team on a particular day.
• Updated the job list so that clicking a job highlights the icon on the map and opens a detail popover. The popover has a button to click for more details, opening a side drawer.
• Created a bulk reassign flow that allowed the contractors to select multiple jobs and reassign them to a new team.
• Designed a new "team shape" component for our design system that would better distinguish teams from each other. I created 24 unique shapes, each with a different color, so the teams stand out.
• Added a check mark to indicate when a job on the schedule has been completed.
USER INTERVIEWS
We interviewed some of our larger contractors to show them our revised map and get their feedback.
Some feedback we received:
• Some contractors use different routing software, so the ability to export the addresses would save them time.
• Many contractors access the map on their phones, so a mobile breakpoint is essential.
• A select-all feature for reassigning would be helpful.
USER ACCEPTANCE TESTING
I created a user test using Maze software to evaluate whether the new designs were intuitive.
The user test included tasks to view more details on a single job, navigate between days, expand a team's job list, and reassign a job from one team to another.
Overall, the results we very positive, but we discovered some key takeaways:
1. 77% of participants found the test Very Easy or Easy.
2. 83% of participants log in to the web portal 2-3 times a week or more.
3. The average time to complete the task of reassigning a job was 67 seconds, with a 64% misclick rate, leading us to assume the reassign feature was not as intuitive as we hoped.
4. Comments from the initial internal test led us to conclude that the Reassign Jobs button was not logically placed.
5. Heat maps proved that most users failed to click on the down arrow when selecting from a dropdown menu or expanding a section. They expected to click anywhere in the area, not just on the arrow.
A Maze user test gave us insights to improve the user experience
Based on our learnings from the user research, I made a few changes to the design:
•Enlarged the target area around the down arrows to include all input fields or collapsed section headings
• Added an "Export Schedule" button that downloads a .CSV file of their scheduled jobs
• Improved the reassign jobs user flow by adding a button above the jobs list called "Bulk Select." When the user clicks that, check boxes appear next to each job. Once jobs are selected, a "Reassign" button at the bottom opens a modal to choose the team to reassign to
• Added a menu on selected jobs to add a way to reassign a single job
The new bulk select flow also adds scalability to add more bulk actions in the future
FINAL THOUGHTS
Each phase of the design process contributed to a significantly enhanced user experience, resulting in a solution I'm genuinely proud of.
Our final design streamlines the Contractors' journey on the Schedule Map, providing them with a seamless, intuitive way to access, reschedule, and review job details.
By prioritizing usability and efficiency, we delivered a product that simplifies their workflow, saves them valuable time, and reduces frustration.