MY ROLE

UX/UI Design
User flows, Information architecture, Hi-fi prototyping, Design iterations

UX Research
Interviews, Usability testing, Affinity diagram

MY IMPACT

1. Revamped user flows for billing and product management to enhance overall usability.
2. Implemented 50+ screens in an agile environment to deliver a seamless end-to-end user experience.
3. Identified user pain points through user testing to drive data-informed design iterations.

THE COMPANY

Flow is a startup developing an AI-driven SaaS sales prospecting
platform, providing solutions to enhance efficiency for sales teams.

TEAM

1 Project Manager
3 UX Designers (Me)
15 Software Developers

TOOLS

Figma, Jira, Confluence, Google Suite, Slack

DURATION

4 months & ongoing
July 2024 - Present

ACHIEVEMENTS

100%

Decrease in drop-off rate

27%

Increase in task success rate

4.12/5

Task ease rating

OVERVIEW

The Flow Account Portal provides businesses with a unified platform to manage their accounts, users, product purchases, and security settings.

When I first joined the team, portions of the design for both onboarding and returning users have already been drafted. However, after conducting user testing, our team discovered that this design prevented users from successfully completing product purchases. Therefore, my primary responsibility was to create seamless product purchase flows for all users.

PROBLEM

Users felt insecure about adding payment methods during onboarding and experienced confusion when purchasing products

USER TESTING

Discover issues in the first round of usability testing

Conducted moderated user testing with 5 participants aged 27-38. We identified 3 key issues based on participants' behavior and feedback:
1. Users felt insecure about adding payment methods during the onboarding process.
2. Users were confused by unclear product details when making purchase decisions.
3. Users wanted more control over editing their personal information.

DESIGN ITERATION

Revamp payment method submission to reduce user drop-off

Initially, users were asked to add payment methods when creating a new account. However, many felt insecure providing billing details to a company they were encountering for the first time.

I proposed two solutions: first, adding a 'Skip' button giving users the option to bypass this step, and second, only asking users to enter payment information at checkout.

Since Flow is a start-up and has yet to build strong user trust, I recommended the second option to stakeholders—only asking users to submit payment information at checkout. This approach avoids creating distrust of the company while still capturing payment details during the free trial period, aligning with our business strategy.

Recognition rather than recall - Design a product details section

Originally, product details were only displayed on the initial pricing page. During user testing, we discovered that as users navigated away from this page through the purchasing process, they found it difficult to remember pricing information. Additionally, they struggled to find the total price and a method of adjusting key product details, such as the number of enrolled users.

To address this, I added a component persistent throughout the purchasing process. This component displays the product name, tier, a numeric stepper to select the number of users, and the total price. This minimizes users' memory load and reduces their need to navigate back to the initial pricing page, thereby decreasing the possibility of users giving up on making purchases.

Provide users more control over their billing information

During user testing, participants expressed concerns over editing their billing address and removing previously-submitted payment methods.

I also proposed that the billing pages should be tailored to first-time buyers and returning customers, with distinct information and options displayed for each group.

For returning users, I built user flows enabling them to edit their billing address and payment methods.
‍
For first-time buyers, I added the option to save their billing address and to set a payment method as default, reducing repeated information submission for future purchases.

REFLECT

Takeaway

Creating New Workflows to Deliver an Improved User Experience

During the first round of user testing, we initially focused on iterating designs for returning users. However, as the project progressed, I began to question whether this approach was truly comprehensive. I recognized that overlooking new user scenarios could negatively impact both the user experience and our team's workflow efficiency.

Realizing the need for a broader perspective, I proposed pausing further iterations to rethink our approach. I initiated the creation of a new user flow diagram, ensuring that the team considered the full user journey, including new users. Once this plan was implemented, it not only uncovered missing pages in our designs but also allowed us to streamline the workflow and deliver a seamless purchase experience for both new and returning users.

Revamp user flows to eliminate drop-offs and increase product purchase success rate by 27%