REMITTANCEProject one
Sending money to new countries at the speed of light.
OVERVIEWGoFundMe is the place people turn to in times of crisis, all over the globe. Our user-base increased exponentially during COVID and all of the major events that happened during those years (Black Lives Matter, the snowstorms in Texas, wildfires in California, the war in Ukraine). Our team wanted to come up with a new way of sending funds to countries that aren’t currently supported by our payment processors.
I partnered with another product designer, a content designer, a couple product managers, and a team of developers to build an entirely new flow for organizers to send money directly to their beneficiaries outside of the US using a brand new partner.
Initial transfer screens
THE PROBLEMBased on our insights, organizers were making requests that we expand into new countries, specifically, India, Mexico, and the Philippines. At least 14% of our current users were raising funds for beneficiaries located in other countries. This was a constant user request, however, being able to expand into these countries is a lengthy process and would require us to discover new payment partners or become a payment transmitter ourselves.
Enter: Remitly. Remitly allows us to have organizers send money to those countries directly. We needed to figure out a way to integrate this API into our product and create a flow that followed their guidelines and kept the process of transferring money easy.
OUR GOALSKeep the transfer process simple + secure
A big part of our brand is ensuring the safety of funds, which includes sending money to the organizer or beneficiary. Focusing on the security and simplicity of the transfers process was key to a successful product.
Our priority for this launch would be to instill confidence in our product and the ability to transfer money easily.
Work within the constraints of Remitly
As this was an entirely new flow we would be integrating into our product, we would need to work within the constraints that Remitly had for their own product and branding. Not only that, but we also had to follow rules based on currency exchange rates, their own transfer fees, and supported payout methods.
Launch within 3 months
As requested by leadership, we had a fairly aggressive deadline to meet our launch date. Our team worked together to create an appropriate handoff calendar for design and development. This included breaking the work into digestible chunks and collaborating closely to get initial designs ready within 3 working days and a handoff file ready 36 hours later.
1 in 7 people have used Remitly to send money to loved ones across the globe.
THE APPROACHWe had a small but scrappy team to get our product fully launched. We consisted of a team of developers, two product designers, and a content designer. The other product designer on this project was hired only a couple weeks earlier and was still completing her onboarding. Though this was not my part of the product, I was brought on to also help lead this project, assist the new designer, and give insight to our current user needs.
With the limited time we had to get this product to launch, a lot of our research came from our customer support team, our contacts at Remitly, and the data our UX researcher had on organizers and their strugglers with transfers.
How did we break up the work?
We had to stick to a strict schedule in order to meet our deadline. We split up the tasks so each week we had a piece of the product ready for handoff so the dev team could begin their work.
Here is what a typical week looked like:
Monday
Tuesday
Wednesday
Thursday
Friday
Sync with the designers and lead PM to dicuss the work for the week, begin work on lo-fidelity explorations
Continue work and start to integrate higher-fidelity designs and sync again with designers
Finalize designs, including prototyping, and syncing with content designer for review of the copy and hierarchy of the page
Design review day! We meet with all the stakeholders to get their feedback. Implement that feedback and make those changes for handoff
Handoff day and weekly retro to discuss successes and challenges for the week
While we maintained this schedule, we explored concepts that maintained security, simplicity, and transparency. The difficulty we encountered was trying to be simple but also provide as much information as possible. For most parts of our product, we cut down information to its barest bones.
However, with money transfers, our users wanted more information immediately. They wanted to be front-loaded with the expectations, dates, and fees.
As a product designer, this was almost slightly counter-intuitive. We researched what information users wanted by working with Remitly to see what improved their transfer process. They stated that logos and the visualizations of calculations greatly increased their conversion rates.
It was our job to help users establish hierarchy and present them with these pieces in easily digestible sections.
A closer look…
Diving deeper into the transfer calculator
The transfer calculator was a key screen during the transfer flow for Remittance, but also a challenging screen to design. Several things happen at once on this page.
First the user would need to enter an amount to send from the donations they’ve raised. Then they would need to choose the transfer type (bank transfer or a cash pickup). At this stage, they would lock in their currency exchange rate for 45 minutes.
According to data from customer inquiries, users wanted more information to be visible to them when they go through the transfers flow. Front-loading users with knowledge and adding more transparency in these screens would be necessary for MVP.
My goals for this page were to:
Make sure users could glance at this page and understand what they needed to do
Display all the required information that Remitly wanted to convey
Create a simple experience that users would feel confident in
Version 1
Early explorations had me trying to find a way to break up the information on the page by showing a small modal before showing the field and choosing a transfer type. Remitly had a lot of requirements that we needed to abide to:
Maximum and minimum transfer amounts
A time limit for locking in exchange rates
Different fees for different transfer types
However, this flow was already fairly long and adding the modal felt unnecessary.
Version 2
This version of the calculator screen had me really considering the hierarchy of the page and utilizing our design systems typography to section off pieces of the screen.
Selecting a transfer type (cash pickup or bank transfer), utilized a tag toggle so that users could see the fees related to that specific transfer type.
However, if a user wanted to compare their options, they would have to toggle back and forth and this wasn’t ideal for someone who now had a timer to abide by.
Version 3
Moving away from a toggle, I explored a new approach with a “doors” option. The user would have two cards showing the transfer types, fees associated with each option, along with a little description.
However, I wasn’t sold. When prototyped, the interactions felt off. The exchange rates would potentially change so displaying them may not be a great idea. The timer in the banner felt too large. It also didn’t show the amount the user had available to transfer.
I felt that I wasn’t achieving my goal of creating a simple experience with this page.
The final version relied on using progressive disclosure to show users the exact information they needed at that moment. There would be one CTA, a single field, and the available balance for transfer.
The final version
Once a user had hit the “see quotes” button, it would enter a loading screen. The button would become a loading state and the doors would appear in their empty state to help ease users into the finalized state of the page.
Finally, once all the information has loaded, the timer would begin in the top right corner of the nav bar. A small tool tip would appear to alert users to the purpose of the timer. This would be less invasive and also less jarring.
We love a good confirmation screen
This video shows the confirmation screens of transfers for users who have completed the flow. We started introducing more personalized takeovers that show the user’s name and show important information.
THE RESULTSWithin 2 months, we were able to hit our design deadlines for our MVP to get fully handed off to the dev team.
By the end of the quarter, I was the sole designer focusing on refining this project and completing design QA.
Through this process, we worked with Remitly’s team to ensure branding, legal, and marketing was all within their guidelines. We also began work internally for launch, getting our Customer Experience teams up to speed on the product, and working with our marketing team so they could alert our users about this new feature to money transfers.
As we neared the end of this project, we were given the unfortunate news that we had to pivot to a new priority. And while it’s always difficult leaving a project unfinished, we had to do what was right by our users as our dev team was needed to focus on some pressing situations impacting transfers. We may not have gotten the happy ending leading to next iterations and an exciting new product launch, but we did gain powerful insight to what we can accomplish together as a team.