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 testing to drive data-informed design iterations.

COMPANY

Flow
A start-up developing a SaaS AI sales prospecting platform, aiming to provide innovative AI solutions to enhance efficiency for sales teams.

TEAM

1 project manager
3 UX designers (Me)
15 software developers

TOOL

Figma, Jira, Confluence, Google Suite, Slack

DURATION

4 months, July 2024-present (ongoing)

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, allowing users to enter payment information only at checkout.

Since Flow is a start-up and has not yet built strong user trust, I recommended the second option to stakeholders—allowing users to submit payment information only 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 about how to edit a new address or remove previous payment methods.

I also proposed that the billing information should be displayed differently on the billing page to cater to first-time buyers and returning customers.

Allow returning users to edit their billing address and payment methods. Additionally, provide a "Make Default" option for first-time buyers, enabling them to set their address and payment method as default to reduce repeated actions with each purchase.

REFLECT

Takeaway

Challenging the Workflow for 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.

Increased product purchase success rate by 27% and eliminated drop-offs by revamping user flows