Tucows Billing -
Orders & Refunds Feature

Enhancing the ordering experience and providing our resellers with the ability to offer refunds.

Product Overview



πŸ€” Objective
For Tucows Billing, it is essential to offer resellers clear insights into orders, transactions, and refund activities within their storefronts. We aim to provide resellers with the capability to view all orders processed through their storefronts, including detailed information for each order, along with the option to issue refunds.

Tools - Figma, Figma Prototyping

Duration - Jan 2023- June 2023

My Role - Lead Product designer

Team - Designer: Monique Lourenco Lopes (Me), Product Manager: Gordie Dawson, Dev Team (3 people)

⛔️ Problem
‍
The pain points being addressed include creating a seamless process for resellers to view their orders, issue refunds to customers, and enable both partial and full refunds for specific order items and their prices.

βœ… Solution
‍
The solution is designed to provide resellers with a seamless experience by offering a comprehensive view of their orders, including detailed information for each order. It ensures customization options for refund amounts and allows for the selection of specific items to be refunded. Additionally, it includes the capability to deprovision specific services concurrently with refund processing.

First things first... tackling the orders experience!

Understanding the problem with orders

In the current platform, resellers lack visibility into the details of their orders and transactions. When a reseller's customer calls about an order, the reseller cannot assist them directly and must use another platform called RCP (Reseller Control Panel) to retrieve this information. This process is lengthy and frustrating, creating multiple pain points for both customers and resellers.

What are our users needs?

To ensure the new feature met user needs and expectations, I collaborated closely with the User Research team at Tucows. We conducted a series of in-depth interviews and usability studies with resellers, employing techniques such as contextual inquiry and task analysis to gain a comprehensive understanding of their workflows and pain points. By synthesizing this data, we identified three key areas for improvement that would significantly enhance the user experience and address the most critical needs of our resellers.

Research

Competitive Analysis & Understanding user needs

At the project's outset, I conducted thorough competitive analysis to gain insights into the competitive landscape of reseller domain order experiences. This included understanding market dynamics and anticipating user needs. Collaborating closely with the User Research team, we delved into our users' expectations and requirements for this feature, ensuring alignment with their preferences and enhancing overall usability.

Diving into exploration

Wireframing & Iterating

Once I grasped the business requirements for this feature, identified pain points, and understood our users' needs, I transitioned to Figma to begin wire-framing low to mid-fidelity designs. These wireframes mapped out various UX flows and UI aesthetics for the desired experience. Through multiple iterations, I sought feedback from designers, researchers, project managers, developers, and key stakeholders to refine and enhance the designs iteratively.

Knowing when to push back on reqs

How does the logic of order statuses work?

After several design iterations, I noticed inconsistencies in how order statuses were presented, which could lead to user frustration. For example, individual items within an order could fail, but the overall status would still show as complete. I raised concerns and proposed a solution: introducing a new "partially completed" status. This adjustment enhances transparency and ensures users receive accurate information.

High Fidelity

Final Design Solution & Mapped Out-Flow

Once the team reached consensus, addressed my inquiries, and integrated feedback, I proceeded to finalize the experience and design screens in Figma, transitioning them into high-fidelity and documenting different use-cases. Following this, I prototyped the design to conduct a comprehensive UX walkthrough for the entire team, including developers, ensuring a smooth design-to-development handoff.

Now that orders is finalized...
we can dive into refunds!

Further adding to the orders experience

Once we finalized the order flow with the team, I was assigned to develop a refunds experience for our users, enabling them to manage refund requests from their customers. At the time, refund options were not available, presenting a significant challenge to address.

Before delving into the refunds flow, I collaborated with the research team to ascertain resellers' preferences for refund options. This included understanding their desired level of customization, especially concerning multiple items within an order. I engaged in calls with resellers to gather firsthand insights and conducted detailed note-taking and analysis of real-world scenarios. Additionally, we reviewed surveys distributed to resellers, extracting valuable feedback and data to inform our approach.Furthermore, I conducted a thorough exploration and competitive analysis to understand how industry competitors such as GoDaddy and WHMCS handle domain-related refunds.

Explorations

Low-fi & Planning

Once I understood the business requirements for this feature, I began by brainstorming and sketching initial ideas on my iPad. I explored various concepts and layouts, experimenting with different approaches to address user needs and pain points. This creative process helped me visualize potential solutions and set a solid foundation for the design phase.

User Journey

Mapping out the experience

From there, I mapped out the full experience by creating a user journey map to visualize and understand the customer experience with this new feature. This process allowed me to outline the flow, highlight additional touchpoints, identify areas of uncertainty, potential pain points, and generate ideas to further enhance the experience.

Generating potential options

Wireframing & Iterating

After several iterations, I narrowed it down to two top flows: one simpler and commonly seen in refund processes, and another more complex and tailored specifically for the domain experience.To ensure alignment, I sought extensive feedback from designers, researchers, project managers, developers, and key stakeholders. Ultimately, we decided to move forward with the more customizable flow, as it better met our users' expectations for the refunds process.

Hi - Fidelity

Finalizing & mapping out the refunds experience

I chose the second option for its greater scalability and flexibility for future enhancements. Given the complexity of the refunds experience for domain resellers, fitting all details and actions within a modal wouldn't provide the best user experience.

Once the UX design was finalized and aligned with our research and user needs, I created high-fidelity wireframes. I meticulously mapped out every detail for project managers and developers, refined the screens, organized the files, added developer notes, and prototyped the experience. This enabled me to conduct a comprehensive UX walkthrough for the team, demonstrating how the refunds experience integrates with the order flow. Here are some of the key screens:

NOT leaving responsive layouts

While working on desktop designs, I also considered responsive screens to ensure my solutions were effective across all screen sizes. This approach prevented potential issues where elements designed for desktop might not translate well to mobile. Here are some mockups of tablet and mobile screen sizes, along with the breakpoints determined in collaboration with the development team. Ensuring responsiveness from the outset is crucial for a seamless user experience across all devices.

Outcome & Results

Conclusion & Next Steps

After launching the new orders and refunds features, we observed a significant increase in user conversions, along with a notable decrease in support calls from our resellers, as they now have the ability to handle customer refunds directly. For example, we saw a 25% increase in order conversions and a 30% reduction in support calls within the first three months. With the features now live and in use by real users, we continue to collaborate with the research team to identify any pain points and gather feedback on additional features users want to see.

This ongoing research allows us to refine and expand the order and refund flows, ensuring they better suit our users' needs and enable us to continuously improve our offerings.