Xero Integration
Brief
Helcim was partnered with Xero, an accounting software company, to provide a payment serivce. As a product designer, I was tasked with creating a seamless onboarding experience for Xero customers who is new to Helcim.
Since late 2022, I have led the product design as the sole designer, ideating early concepts, conducting design sprints, delivering final assets for production, and ensuring design implementation quality.
We achieved a successful launch that immediately garnered several 5-star reviews in Xero's app store. This project has set a solid foundation for the partnership between Helcim and Xero, with the potential to attract millions of new users and unlock a considerable amount of revenue.
Role
Solo Product Designer
Core responsibility
UX Design
Visual design
Product strategy
Research
Usability testing
Team
1 Product Manager
1 UX writer
3 Developers
Timeline
1 months
We're a finalist for Emerging App Partner of the Year award for the Canada Xero Awards 2023!
Design Goal
User goal + Business goal = Design goal
User goal
Business goal
Design goal
User goal:
To quickly and easily onboard with Helcim and start utilizing Helcim’s integration service for their business
Business goal:
Drive business growth and revenue by attracting a new market and channel. Provide users with a great first experience with Helcim to assist in the adoption of other Helcim payment tools to build stickiness.
Design goal:
Create a seamless integration experience for Xero users, minimizing friction and optimizing user attraction and retention.
Research
Competitive analysis and user flow
To kickstart the project, I conducted a comprehensive analysis of our competitors' integrations. This analysis focused on understanding their methods and the underlying rationale behind these decisions. While the PM focused on comparing features, I delved into the flows and interactions employed by these companies. By thoroughly researching and studying the competition, I gained valuable insights that allowed me to confidently craft a user flow for our own integration process.
Expert interview: learn more about users and domain knowledge
While usually at Helcim we build the majority of our tools and features end-to-end, this integration was unique since we were working within the constraints of our partner, Xero. This meant that I had to be creative with some of the design while still being cognizant of Xero's experience. However, it also meant I had access to connect with experts in the Xero environment. I fully utilized the expert interview opportunities to understand the users' needs and preferences.
Design
Draft my ideas
Once we had a good understanding of the user and the flow, I quickly drafted my idea and showed it to the developers. However, this is where the challenging part really begins. There are two main challenges I met during the process.
Challenge 1
Advocate for users when getting push back
Pushback from developers because of the tight timeline
As I was creating the flow and prototype v1.0, I set up a meeting with developers to check its feasibility. I presented a full-guided onboarding wizard that would make it easier for Xero merchants to use our service.
Ideal solution would be a wizard
Unfortunately, the developers expressed concerns about the tight deadline. With only 11 days available for the entire process, from design to implementation, they proposed a simplified settings page. While it served the same purpose as the onboarding wizard, it was essentially a plain page buried within the platform, making it unlikely for new users to discover.
This was particularly challenging considering users had to complete a 6-page form with over 40 fields during the sign-up process. After submitting the form, they had to open their email, click a link to log in again, and then face a 7-page onboarding survey that required them to provide additional information (which we couldn't change at that time). This lengthy and repetitive process proved to be exhausting and discouraging for users.
There were lots of problems with “MVP” solution
Proposal: Highlighting Barriers and Friction Using User Journey Map
As a designer, I faced a dilemma in this situation.
While I understood the developers' constraints and the pressure they were under, I also recognized that the existing user experience was far from ideal and contradicted our goal of attracting new users and expanding our user base. Considering that this would be part of a new user’s first-touch with our platform and tools, I wanted to make sure that their experience matched, or exceeded, their expectations.
To address this, I took the initiative to create a user journey map that clearly illustrated the barriers and friction points users encountered.
I presented this map to the PM, emphasizing the negative impact on user experience. Recognizing the validity of the concerns, the PM decided to escalate the issue to the Head of Product and the executives for further support and decision-making.
Outcome: Extended Deadline and Successfully Implemented an Onboarding Wizard
Fortunately, now that all stakeholders recognized the importance of the task, we were able to negotiate an extended deadline, granting us four weeks instead of the initial 11 days. As a precaution, I prepared two versions of the flow: an MVP and a more refined iteration, in case we encountered any implementation challenges. However, with the dedicated efforts of the team, we were successfully able to implement the complete onboarding wizard within the new given timeframe.
Challenge 2
Optimize the experience with a big technical constraint
A crucial step for new users was adding their bank accounts to the platform to receive payments from customers. However, I encountered significant technical constraints that made it difficult to integrate this flow into the onboarding wizard. Adding to the challenge, I was unable to modify the existing "add bank account" flow, further limiting my options.
Dream solution (But unfortunately not possible!)
At first, I was stuck, unsure of what to do next. But then, I narrowed the problem down and then realized that the real problem was how to get the users back after they added their bank account. So I started brainstorming solutions and came up with several ideas.
I collaborated closely with the front-end developers, asking many questions to understand the feasibility and evaluating the cost of implementing these solutions with them. We tried everything we could, given the huge constraints we were facing of not being able to change current flows and not having enough time and resources.
In the end, the final solution wasn't what I had originally envisioned, but it was the best we could do under the circumstances. Ultimately, what was important is that we were able to find a way to get the merchants to add their bank account to the platform, even though it wasn't integrated into the wizard. We may have faced many challenges along the way, but we learned that by working together and being creative, we can overcome any obstacle that comes our way.
Post-Design
Work with developers to ensure the quality
Even after handing off my design to the developers, I continued to work closely with them to ensure high-quality design implementation. This involved constant communication, providing detailed design specifications, collaborating during development, conducting regular design QA, and participating in testing and QA processes. Through close collaboration and effective communication, I ensured the accurate and high-quality implementation of the design.
Result
Due to certain restrictions, we have not been able to run marketing campaigns for this product. As a result, we haven't seen a huge increase in our user base yet. However, we have received all positive five-star reviews from users on the App Store! In the end, we actually over-delivered the result by successfully releasing the wizard and the whole integration page (Not just MVP). It is more than we expected so it is a success already.
Even when we knew we had limited scope, we still tried our best to come up with the best solution as far as we could to provide the best user experience. It is definitely not perfect, but it was the best solution under constraints.
Final UI
Reflection
Working with developers can be challenging, but also rewarding. Building a relationship based on mutual respect and trust can facilitate a smoother collaboration process and a better understanding of both sides of the constraints within which each team works. Sharing design and feedback "early and often" is key to minimizing extensive revisions and iterations.
How to deal with pushback and how to push back are both hard topics to learn. I think there are a few key things to keep in mind:
As designers, we need to "choose your battle to fight" wisely. This is the key to not being too compromising while not being too tough to deal with when dealing with pushback.
When trying to get buy-in from stakeholders, speak in their language.
"Design for business opportunities, not technical constraints." Sure, there are a lot of constraints, but not all of them are non-negotiable. Understand which ones are negotiable first, and then try to convince developers with business opportunities!