Caviar
Form redesign for the Caviar courier onboarding flow
Client: Caviar Time: 1 week Role: UI, IxD design Software: Illustrator
Caviar
Caviar is a food delivery app focused on delivering the best meals from the best local restaurants. Caviar operates across the United States and is part of Square’s suite of tools for businesses. It allows restaurants to reach more customers through delivery and pickup features and grow their sales as a result.
I worked at Caviar as an Operations Manager for a year and a half and focused on growing and mobilizing the on-demand courier fleet to match the growing order volume. Because Caviar was a younger product within Square I had a lot of impact on the product and the internal tools that were being built. Working with Product Managers and Engineers directly I helped create more efficient tools and processes.
The Challenge
One of these improvements arose out of the inefficiencies I found during the courier recruitment process. As part of the process candidates came to the office, interviewed, watched an instructional video about the Caviar Courier app, and filled out the necessary forms. This process was the same across Caviar’s 15 markets, and was repeated daily by the operations managers in each market. The sessions took an average of 1 hour each, but I noticed that the bulk of the time was spent answering questions about the forms. I realized many of these questions could be avoided with an improved design as the experience of filling out the forms was not intuitive and the forms were not optimized for the mobile screens on which applicants filled them out.
- Users didn’t realize that they could choose to input an account number OR a debit card number
- Most users didn’t know which number on the check was the routing and which the account number
- The Save button remained opaque even after all the information was filled out, confusing users whether or not they were able to move forward
- The Sign Out button disappeared on mobile and there was no way for users to go back to the previous step in the process
- The page was not responsive and became hard to read on a mobile device
- Users were confused by the extra button for attaching their proof of policy photo. For the form to submit properly users had to attach the photo to the left location
- Neither the button nor the copy changed once a photo was successfully attached, further confusing users and leading them to unnecessarily repeat the process
- The page was hard to read for users and elements floated off screen as the page wasn't designed for mobile
- The Submit button didn't change color once a user successfully filled out their information. Also, if clicked too early it allowed users to move forward in the process with an incomplete form
Approach
As an Operations Manager in the San Francisco Bay Area market I had the unique benefit of working alongside the product and engineering teams. San Francisco was also the oldest and biggest market, accounting for roughly 30% of annual revenue. Thus, my team was often first to encounter the challenges created by growth and we worked with other teams to find solutions.
The shortcomings in the forms were particularly felt in San Francisco. With the greatest demand for couriers in our market, multiple team members ran multiple sessions per day for large numbers of applicants. Thus, although the flaws in the forms weren’t insurmountable, and with sufficient coaching allowed an applicant to move through Caviar’s system, I realized that with a few simple design changes I could create significant time savings for operations managers across all of Caviar’s markets.
I began by outlining the problem areas and potential benefits of a redesign. The product manager and Engineering lead then sat in on a few sessions to observe where couriers got stuck and make notes of the time it took to coach couriers through filling out the forms correctly. Once product and engineering were aligned on the identified problem areas, I got the go ahead to create designs that would be quick and intuitive for couriers.
The New Designs
In my designs I wanted to keep the clean simple aesthetic of the Caviar brand while improving the areas where the designs fell short. To do this I worked off of the old designs and referred to Caviar’s style guide for guidance on how to visualize the necessary changes.
- I created intuitive tabs to show users they could choose between their bank account or debit card information
- I added an example of a check so users could quickly reference which number was the routing and which was the account number
- I made the Save button change color when all of the required information was filled out in order to indicate to users that they could move forward in the process
- I made the Sign Out button visible on mobile and added a Back button so users could check a previous form if needed
- I made the designs responsive so they would look great on mobile devices, since 97% of our users filled out the forms on their phones
- I removed the extra Attach button to streamline the process and avoid confusion
- When a photo was successfully attached I changed the copy on the button and added the name of the attached file below the button to serve as indicators for users
- I made the designs responsive so all the elements would fit clearly on a mobile screen
- As a visual cue to the user I made the Submit button change color to bright orange once all of the required fields were filled out
Once finished with the designs, I worked with the engineering team to optimize them for mobile and implement them within the courier onboarding flow.
The Impact
As a result of the improved form designs the courier onboarding session times decreased by 25%. When we calculated the impact of the redesigns for Caviar, the time savings for operations managers in all of Caviar’s markets translated to about $50,000 saved per year.
This project first allowed me to see the potential impact of good design. Ultimately, I was able to make my work and the work of my colleagues more efficient, while improving the onboarding experience for hundreds of Caviar couriers. I also particularly enjoyed being able to quantify the impact of the designs I created on Caviar’s bottom line.