Understanding more about the problem space, considering potential solutions and learning about the users and the business goals.
Diving deep into the user journey and exploring user stories, personas and user decision making.
Diverging wide and exploring a range of possible solutions. Testing, iterating, discussing, gaining feedback and working through the problem.
Collecting user feedback through A/B, usability and concept testing to help validate solutions and identify any opportunities for refinement.
Refining a chosen direction and polishing the design in preparing for engineering handoff. Ensuring rationale is clearly documented.
Working closely with engineering and product to ensure a successful handoff. The work isn’t done! We monitor the product’s performance.
I created an optimized user flow based on the understanding of the segments of merchants we are targeting, the user experience, the carrier requirements and the business requirements.
I created low fidelity wireframes for all the cards and new modals based on the user flow.
I came up with three different options for connecting your BYOA account in the Shopify settings card as shown below. Based on my strong opinion, I proposed a recommended flow and two other options.
Based on my research and findings, I proposed a recommended flow for the carrier connection modal and two other options.
I came up with two iterations for BYOA connected modal. The goal of the recommended modal was to cut down the number of clicks and make the experience better from a UX perspective. During the stakeholders review, the recommended option was preferred because the alternative modal was a bit confusing in the inactive state.
Consolidating on the existing BYOA registration flow for UPS, I started some explorations on how to make the user experience a seamless one for merchants. The goal was to come up with an optimized registration flow for Canada Post BYOA. Many iterations were done and reviewed by key stakeholders to create the most optimal experience from a UX perspective.
In the shipping and delivery settings page, merchants have to click on the carrier account, then click on the connect account in the modal that pops up as shown in the image below. This was changed in the optimized flow, BYOA carriers are embedded in the carrier connection card as shown below. This was done to streamline the process of connecting carrier accounts.
The old modal has an informational banner that is not required until the account has been activated which was removed in the new version. Merchants are required to add rates after connecting their accounts, including the banner before the account was connected felt like a disjointed flow. Another change was the removal of the language requirements as it was not serving any purpose. Switching between Shopify and BYOA in the "rates customers see at checkout" and "account to buy labels felt" unneccesary and complicated for the merchants, thus they were removed as well. The last change was the addition of a section to find your credentials for a better user experiece as this was a time consuming process in the old modal.
Adding rates to display at checkout is a crucial stage in bringing your own account. The old modal did not have a dedicated button to add rates, instead, an informational banner was used to remind merchants about setting up their rates. An addition of a dedicated button to add rates was implemented in the new modal since it is an important step in the process.
When connected in the old modal, clicking on manage carriers opens up another modal with the ability to edit and disconnect accounts. When connected, the new modal shows an active status to let merchants know that their account has been connected. Clicking on manage shows a drop down menu with options to activate, deactivate, edit and disconnect account. Deactivate/activate account toggles between BYOA and Shopify rates easily without having to disconnect the account.
Consolidating on the existing BYOA registration flow for UPS, I iterated on different ideas for implementing BYOA in both the single and bulk label purchase flows as shown in the images below. Using your own account was clearly stated in both shipping service cards and summary cards as well to let merchants know that they're buying their labels based on their negotiated rates with carriers.
Using your own account was implemented on the bulk label purchase flow by consolidating on waht was created for the single label purchase flow.
Mobile BYOA carrier registration version was created by building on what was created for the desktop version. Both the single and bulk label purchase flows were also created for mobile web.
I live and breathe design
I have a growth mindset
I thrive in complexities
I'm a team player
Learn more about me and my story.
