Team: Myself and a Product Manager
My Role: UX/UI Design, Prototyping, Research, Testing
Tools: Figma, Microsoft Word
PROJECT OVERVIEW
The contractor signup process for TaskEasy involves additional steps compared to a standard signup flow, as contractors enter into an agreement with TaskEasy to be compensated for completing work. Before they can be assigned work, TaskEasy must obtain important information from them.
These are the steps required for a TaskEasy signup:
• Create an account
• Accept the legal agreements
• Set up how they will get paid: W-9, direct deposit bank information
• Call to set up job configurations: route area, hours/day
I designed a new contractor signup flow for TaskEasy, transforming a complex three-step process into a streamlined and efficient experience.
This overhaul resulted in several key improvements for both contractors and the business:
• Reduced friction for contractors by eliminating the app-based portion of the signup, consolidating the process entirely on the web
• Enabled contractors to access the web portal prior to completing the final setup
• Empowered the legal team to update the Legal Agreements independently, without relying on engineering resources
• Ensured compliance with legal requirements for storing and accessing user information
The new signup flow
THE PROBLEM
The original contractor signup flow was developed during TaskEasy's early stages and had not been updated since. With new legal requirements, an evolving user base, and updated code, a refreshed experience was necessary.
The primary challenge for users was unnecessary friction in the process:
• Contractors were required to create an account online and then download the app to complete the signup
• This cumbersome flow led to a significant number of contractors abandoning the process before completion
• If a contractor did not finish all the steps and returned later, it was unclear where they had left off in the process
There were also several business needs that required attention:
• The legal agreements were hard-coded, making updates difficult and costly
• Internal teams lacked access to the "signed" agreements, creating potential legal risks
• We were missing the collection of critical information from contractors
The content for the mobile signup was hard-coded
IMPROVE THE USER EXPERIENCE
My objective was to streamline the signup process, ensuring it was both seamless and intuitive. To achieve this, I implemented the following improvements:
• Eliminated unnecessary steps and consolidated others for efficiency
• Retained the entire process within the web interface, removing the requirement to download the app
• Developed a step-by-step wizard to guide contractors through each stage, providing clear visibility of their progress throughout the flow
If the user exits during the process, they can resume from where they left off upon logging back in.
MEET THE LEGAL REQUIREMENTS
The product team and I collaborated with engineering to identify the most efficient way to present the legal agreements without resorting to hard coding. We decided to embed a PDF of the legal agreement for each substep using an iFrame.
This approach addressed two critical business needs:
1. The legal team can modify the PDFs as necessary, and updates are reflected in real time within the product without requiring engineering assistance
2. We can save a copy of the electronically signed agreements, making them later accessible to both the legal team and users
I designed the dimensions and placement of the iFrames for each breakpoint, ensuring the development team had clear guidelines on where to position each iFrame.
DESIGN CHALLENGES
When the developers implemented iFrames to display the legal agreements, I quickly identified several issues with the PDFs provided by the legal team that I needed to address:
• The formatting was not aligned with our design system, resulting in a disjointed user experience
• The small font size and large borders caused the embedded PDFs to appear too small within the iFrame
• The inability to zoom in on the PDFs created accessibility issues, as the text was too small to read on smaller breakpoints
After collaborating with both the engineering and legal teams, I was allowed to update the PDFs to resolve these design and accessibility concerns.
I adjusted the fonts and colors to align with our design system, with a primary focus on improving mobile visibility, as the majority of users accessed the signup process via their phones.
TESTING AND RESEARCH
I researched text size and print area requirements and developed a ratio between text size and document border area that would optimize print and mobile viewing experiences.
I tested multiple iterations by viewing the PDFs on my phone and printing them to ensure the text was legible and the print layout was reasonable—avoiding overly large text or excessive page numbers.
Once I identified the optimal proportions, I prepared the files for the developers, providing clear guidelines on the layout and specifying where to overlay the necessary checkboxes and text inputs for each breakpoint.
I specified component placement and guidelines for the developers
I had to find a legible text size for the mobile breakpoint
FINAL THOUGHTS
The redesigned signup process enabled me to eliminate the friction that previously contributed to contractor frustration and abandonment. By creating a seamless experience, I was able to save contractors' time and provide them with greater clarity regarding the necessary steps.
Additionally, the redesign introduced significant improvements for the legal team. Instead of relying on engineering to update legal agreements, they can now make changes independently, streamlining the process.
This project also allowed me to collaborate with teams I don't typically work with, allowing me to gain valuable insights. I tackled new challenges and solved complex problems outside the typical scope of design work, which made the experience both rewarding and enjoyable.