Converted referred users with an actionable web portal

Catch was an early-stage startup which offered store credit at online retailers when users pay with Catch (like Paypal, but with rewards). Their design director was busy designing their checkout flow and website, as the startup was set to launch in a few months, but they still needed a web portal, so I was asked to help. The goal of the web portal was to allow users to review, transfer, or redeem their store credit. Although the web portal initially seemed straightforward, design iterations and user testing revealed the importance of new users who were referred by existing users via gifted credits. As a result, focusing on referred new users helped to design a better experience and conversion for all users.
Role:
Team:
1 Design Director
2 Founders
IC Product Designer
Platform:
Web App
Tools:
Figma
Zoom

Reviewed pitch deck, user research, and prototypes to understand their user and product

I started by reviewing their pitch deck, past user research, and Figma prototypes to understand their user and product. I was excited to read through these because there was definitely good product-market fit. It was a win-win product which saved the online retailer on transactional fees, savings which were then passed on to the shopper in the form of store credit to shop again (or share the credit with friends/family).
How the product works:
  • Catch partners with an online retailer and charges them a low transactional fee.
  • Shopper checks out through an online-retailer partner’s checkout, and selects the “Pay with Catch” option.
  • Shopper creates an account with Catch and links checking account for payment.

Outlined web portal

Next I met with the design director to create an outline of the web portal to ensure that we were on the same page. We also reviewed this with the founders for approval, which aligned with the specific screens and features they wanted including:
Log in/sign up page & bank account linking
  • Account setup and authentication
  • Ability for a user to claim a credit that has been gifted to them
Available credits & recent transactions
  • Available credits and transaction history
  • Ability to transfer a credit to someone else
  • Ability to redeem a credit with a retailer
Retail list
  • View of all retailers accepting Catch

Designed wireframes, but pivoted to high-fidelity due to lack of time

Next, I moved into the design phase. My first instinct was to design with wireframes to help speed up my design process by not getting attached to my designs. However, during my first design review with the design director, he suggested that I design in high-fidelity, as the core UI was fairly set, so I wouldn't have to design from zero. Moving forward, I referenced the Figma designs and quickly pivoted to high-fidelity. While colors, fonts, and buttons were already designed, many other elements within the web portal still needed to be designed, as seen later in design iteratons.

Creatively blocked during iterations, so conducted user testing and created 3 users

Once we aligned on screens, I felt more confident with iterating on my high-fidelity designs. However, during my heads-down design work, I kept getting stuck. Initially the screens and flow seemed pretty straightforward, but  I continued to iterate and think through the user flow and experience for new users. I brought this up in my design review with the head designer, but he told me to focus on the “happy path” for a returning user, because most users will learn about Catch through a partner retailer.
I then conducted my own user testing and ran into the same issue. Every user asked, “What is Catch? Why should I trust it?” Granted, Catch hadn’t launched yet, so of course no one knew of Catch. However, for that same reason, I strongly believed it was important to design for new users.
I shared my findings with the head designer, and we chatted through different user paths. We created 3 users:
  1. Returning user - paid with Catch and received a direct link to access their web portal
  2. New user - somehow stumbled upon Catch on their own
  3. Referred new user - an existing user gifted store credits via Catch to a friend or family member
Creating these 3 users was super helpful for me to move forward with the design. Instead of just focusing on the happy path, I was putting myself in the perspective of a new user, thinking through the copy, context, and flow. As a result, focusing on the referred new user helped improve the user experience for all. I highlighted designs for this referred new user below.

Designed “how it works” on the signup screen

Although a referred user would get a direct link shared by a friend or family member, they were still new to Catch. My goal was to provide context and trust. At the top is a familiar gift card design with the online retailer’s logo, followed by a headline with the name of the referring user. There’s a glimpse of the “How it works” section, just above the fold rather than another page, but is secondary to the top “claim and sign up” with one simple phone-number field to reduce friction and help move the user forward.

Showcased Design Progression

Designed multiple opportunities for user to link their bank account

All users are required to link a bank account in order to use Catch, even if they are gifted credit. For new users, referred or not, in my final design, I give the user multiple opportunities to link their bank account and provide context in each area such as in the initial sign up flow, the shop store page, and the home page of the portal, the most important page. On the right on the home page of the portal, there’s a narrow column, a secondary section, that reminds the user to link their bank account. It includes a progress bar to encourage the user, with a clear call-to-action button “Link bank account”, and a lock icon with “Secured by Plaid”.

Wireframe

Final

Showcased Design Progression

Designed a “shop stores” page to share online-retail partners and entice new users

Referred users who were gifted credit only saw store credit from one particular store so they didn't know where else to shop and earn with Catch. A “Shop Stores” page was designed to list online retail partners where users could earn store credit when paid with Catch. With a limited number of partners, a more visually appealing mixed-collage grid was designed for the MVP. The background image of each tile includes attractive brand imagery, as well as a small logo for trust and brand recognition.

Showcased Design Progression

PROTOTYPE

An easy-to-use web portal so referred users were happy to shop and earn with Catch

Referred users wanted to understand what Catch was, freely browse and explore, then choose to link their bank account and shop later. Context and ease of navigation were focused on to help users stay engaged and take action.

Next Case Study

Improved discoverability with a redesigned employee directory

Back to Top
SEND AN EMAILConnect on LINKEDIN