Introduction
Shopify is a leading e-commerce platform designed for businesses of all sizes. In 2022, I led a strategic redesign of our address verification system, significantly improving the user experience for customers and merchants globally. This initiative, undertaken as part of my role in the Orders team, successfully streamlined a complex process into a smooth workflow, showcasing Shopify's dedication to operational efficiency and user empowerment.
My Role
I was the lead product designer for this project. I worked with one product manager, two engineers, and the Support team. I worked on this as part of the Automation team which was in charge with tackling inefficiencies and reduced redundancies within our product suite.
Problem
Shopify has an internal tool named Mission Control. This tool aids merchants in monitoring activities related to fulfillment requests, shipments, forecasting, and more. However, merchants have frequently encountered an issue where customers do not receive their packages due to system errors related to address verification.
The primary issue was customers not receiving their orders after an extended wait. This problem would typically arise due to an address error which led to the order not being dispatched. The merchant would then need to reach out to support to resolve the issue. However, support had to navigate a complex control system, involving careful selection and extensive visual scanning, while avoiding multiple redundancies. This resulted in a surge in support tickets, overburdening our staff and distracting them from other duties. The user experience suffered as a result, straining merchant relationships, eroding user trust, and reducing merchant sales through delaying or cancelled customer orders.
Let's directly examine the user interface to identify the issues.
After reviewing the current experience with my team, there were a few things that stand out as initial problems.
PROBLEM #1
No Address Editing Functionality
Initially, merchants couldn't fix address errors themselves, leading to high support ticket volumes and operational delays. By enabling merchants to resolve these issues on their own, we can enhance their independence and reduce resolution times, improving customer satisfaction.
PROBLEM #2
Unknown Reason for Error
There was no indicator as to why the address was flagged. Was the zip code wrong? Was there a misspelling or typo? Is it not able to find a basement unit? These issue types weren’t distinguished at all.
PROBLEM #3
Inefficient Address Verification and Modification
The system lacked an intuitive approach for modifying and verifying address changes. The Support team was required to manually compare the address against its appearance in GoogleMaps and SmartyStreets (a third-party address validator) to identify the underlying issue and any discrepancies. Even after verification, the 'Verified' badge status wasn't updated to reflect any changes made to the address for re-verification. It only indicated the initial system verification, which was incorrect to begin with.
PROBLEM #4
No Address Editing Functionality
The health indicator, located at the top right, provided some insights but was less effective due to its placement. Its position required constant scrolling back and forth with the address field, adding unnecessary cognitive load and negatively impacting the user experience.
So we came to understand that our main problem was this:
How can we design a solution that empowers Shopify merchants to manage address verification autonomously and efficiently, reducing the need for support team intervention, while still delivering a seamless shopping experience for customers?
Goal
Our goal was to overhaul the address verification process at Shopify, enhancing the merchant experience by making it more autonomous and user-friendly. This initiative was not just about solving an immediate problem; it aimed at broader business objectives, improving operational efficiency, and elevating the overall platform usability.
User Goals
1. Empower Self-Resolution: Enable merchants to independently resolve address verification issues, minimizing the need to contact support and allowing for quicker resolution times.
2. Minimize Operational Distractions: Reduce the cognitive and operational load on merchants by simplifying the address verification process, thereby allowing them to focus more on business growth rather than administrative hassles.
3. Enhance User Experience: Streamline the interface for address verification to ensure it is intuitive, reducing frustration and making the process seamless for merchants.
Business Goals
1. Reduce Support Tickets: Significantly decrease the volume of support tickets related to address verification issues, thereby freeing up resources to focus on other areas of support and improvement.
2. Empower Merchants: Shift from zero capability to full enablement, allowing merchants to take direct action on address issues, which aligns with Shopify's ethos of empowering merchants.
3. Improve Operational Efficiency: By enabling a self-service model, enhance the platform's efficiency, reducing time and resources spent on manual address verification.
4. Metric Improvement: Target specific metrics such as a reduction in support ticket volume, increased merchant satisfaction scores, and quicker resolution times for address issues, demonstrating the success of the project.
Explorations
Before digging into product requirements, across a variety of team meetings and a kickoff meeting, we aligned on product and user requirements, assigned them priority levels, and determined what is out of scope. From there, I had a clear list of what I needed to address in my design sprints.
Early Iterations
First, I redesigned the 'health' section, originally positioned at the top right, by moving it within the form. This change added new context and simplified the design. I also included a categorization for rejection reasons because we wanted to flag other error types if they arose. Additionally, I added a footnote providing detailed information on the specific error and instructions for correction.
I introduced several improvements, such as a "force fulfillment" option for instances where the system mistakenly flags an issue, allowing the form to be sent as is. I also emphasized the input fields on the form whenever errors occurred in specific places, enabling users to quickly identify the location of the issue.
While we initially considered integrating key SmartStreets and Google Maps functionalities within the form, we decided to double-down on enhancing the 'Customer address' section instead. Since our aim was to streamline the user experience and focus on resolving address issues, optimizing this section to address higher-occurring mistakes (such as misspelling, typos, and misplaced input data, which accounted for the majority of our cases) we were able to significantly reduce the problem at its core.
We included a method for Support reps to record address change reasons through a dropdown in the Health box. This aided in data collection and pattern tracking for our engineering and data teams so we could work towards eventually being able to automate solutions for common address errors. Doing this would require a substantial amount of manually logged issue types, which this method facilitated.
Later Iterations
Refining the number of visual elements and focusing on utilizing the Customer address section and its input fields led me to embedding error notifications right the address form fields to provide immediate guidance. This evolution, shaped by ongoing input from our support team, prompted me to simplify our interface.
One way I did that was in designing an expedited verification process by introducing an "Apply all suggestions" button into the form that would enable Support reps to review and then quickly apply all recommended changes. I also removed the Health box section as it was now redundant - errors were flagged inline, "force fulfillment" could still be done simply by verifying the address straight away, and flagging the error type or "reason for change" would now be done as a final step in the process. This cleaned up the interface more and directed the user's eye flow straight down the page vertically instead of diverting to any side content.
This iterative journey, informed by challenges and insights alike, has been instrumental in crafting a solution centered on user needs. It not only meets immediate requirements but also sets the stage for future improvements, thanks to the invaluable data and feedback I gathered along the way.
For demonstrations of more changes made feel free to see the prototype videos below.
Usability Testing
In the usability testing phase, I collaborated with the engineering team to evaluate a near-final design. Our partnership allowed real-world scenario simulations, using a production-equivalent prototype. The Support team tested it, providing crucial feedback based on their prior system experience. We assessed key metrics like task completion time, error rates, and usability, using both qualitative and quantitative methods.
The feedback was largely positive, with the team appreciating the streamlined workflow, which reduced manual effort and cognitive load. They also praised the improved functionality and design. The test was crucial in validating design choices and making final adjustments before full deployment.
Final Design
I ultimately landed on designs that outline the three main use cases vital to our Support team regarding this form’s optimization. Below are short videos showcasing each use case's prototype, providing a complete workflow overview and clearer insights than static images.
Use Case Solution #1: Force Fulfillment
There are instances when merchants and Support representatives need to enforce fulfillment on orders that were erroneously rejected or flagged.
BEFORE
Previously, users had to check a verification box, uncertain whether this action would actually verify the address as the "verified" badge wouldn't change.
NOW
Now, they can more confidently unblock order deliveries, performing forced fulfillment in just two steps. This simplifies the verification process and provides immediate clarity on the verification action and its implications through a detailed warning modal. To minimize workflow interruptions, we've added an option to disable future warnings with a "Do not show again" checkbox.
Use Case Solution #2: In-line SmartyStreets Suggestions
Our Support team needs quickly evaluate address issues and make corrections with ease and certainty. This solution enhances the integration of SmartyStreets verifications with the form input field, allowing the Support team to quickly evaluate and adopt verification suggestions.
BEFORE
Previously, the Support team had to cross-reference with both Google Maps and SmartyStreets in a separate window, slowing down the address verification process.
NOW
With in-line SmartyStreets verifications, Support representatives can swiftly evaluate and adopt verification suggestions directly from the form, streamlining their workflow and simplifying the address verification process.
Use Case Solution #3: Manual Input Verification
This solution focuses on the process of manual verification, where Support representatives manually enter adjustments after cross-referencing the address with external tools.
BEFORE
Previously, Support representatives had to manually input adjustments to addresses after separately viewing them in Google Maps or SmartyStreets. This process was time-consuming and prone to errors due to the multiple platforms involved.
NOW
Support representatives can now manually enter adjustments directly within the platform, after cross-referencing with Google Maps or SmartyStreets in a separate window. This ensures greater accuracy and efficiency in the verification process.
Impact
The redesign of Shopify's address verification process marked a significant milestone in our continuous effort to empower merchants and streamline operations. By implementing a user-centered solution, we not only achieved our initial goals but also realized measurable improvements across several key performance indicators (KPIs).
Empowerment and Efficiency
• Self-Service Capability: Post-implementation, over 95% of the 100 merchants we surveyed reported successfully resolving address verification issues independently, showcasing the effectiveness of the new tools provided.
• Reduction in Support Tickets: The implementation of the new address verification solution led to a remarkable 91% reduction in support tickets regarding address issues.
Operational Impact
• Increased Transaction Success Rate: With merchants able to correct address issues directly, we observed a 15% increase in successful transactions, indicating fewer lost sales due to address verification failures.
• Time Saved: Merchants saved an average of 4 hours per week, time previously spent navigating the support process for address issues. This time could now be redirected towards business growth activities.
Merchant and Customer Satisfaction
• Merchant Satisfaction: Merchant satisfaction scores related to platform usability saw an uptick of 19%, reflecting the positive impact of the redesign on their day-to-day operations.
• Customer Experience: Customer complaints regarding order processing delays decreased by an impressive 22%, illustrating an enhanced shopping experience.
The project not only met but exceeded our expectations, proving that thoughtful, user-centric design can drive significant business impact. By focusing on empowering our merchants and streamlining their operations, we've laid a stronger foundation for Shopify's continued growth and our merchants' success.
Future
Bug fixes
In a project as significant as the Shopify address verification system overhaul, even though numerous bugs were addressed before its public release, minor bugs are inevitably still present.
Post-launch optimization
