Pay by the OPL
About half a year before the project began, the FBN Finance team introduced the FBN Operating Line (OPL), a general line of credit that enabled customers to cover expenses related to operating their farm.
However, users were unable to use it as a payment option during checkout on our store. As a result, enabling OPL in the checkout flow became a top priority for both the finance and store teams.
5 weeks
My Role
Led the store team's design efforts for OPL payment implementation, enhancing the user experience. Collaborated with the finance team's designer to streamline the OPL application process. Worked closely with cross-functional teams to ensure successful OPL implementation and adoption.
Context & Problem
Previously, FBN noticed higher transactions per customer with financing orders, comprising 80% of the total booked value for US orders. About six months before the project, the FBN Finance team introduced the FBN Operating Line (OPL), a credit line for farm expenses. However, customers could only use it for store purchases by withdrawing funds first. To address this, the store and finance teams prioritized integrating OPL into the checkout flow.
Design Challenge
Target Users
Primary Users:
Existing and new farmers who require financing loans to make purchases.
Secondary Users:
Sales reps and FBN agronomists
Goals (HMW)
Promote FBN Operating Line visibility and ease of use during checkout.
Simplify and expedite the OPL application process for quick approval and smooth order completion.
Allow users to revisit checkout at any point during the OPL application.
Offer clear and concise information on payment methods for user-informed choices.
The Process
1. Understand
To kick off the project, we convened for an opportunity definition meeting, setting our goals and expectations. Within the meeting, we gathered initial directions and insights to guide our project. With a basic understanding of the initial design, we promptly delved into the initial use case study. Using Figjam, we mapped out all the use cases and questions that needed discussion with our PM, fellow team members, and stakeholders.
Key Design Questions:
Determine the optimal placement of operating lines among existing payment options.
Identify incentives encouraging users to choose the operating line over other payment methods.
Streamline the payment process for growers and facilitate informed choices between payment options.
Anticipate potential unintended consequences of introducing a new payment option and develop mitigation strategies.
After the Initial Use Case Study, we had multiple in-depth discussions with our PM, engineers, and stakeholders to collectively understand the problem and synthesize pain points.
Pain Points:
Store customers lack awareness of FBN Operating Loans and their benefits, as well as the distinctions between Operating Loans and Inputs Financing.
Finance customers are unaware of store products and cannot use them as payment methods for FBN store purchases.
Users require clearer information on the advantages and disadvantages of various payment options for informed decision-making.
2. Define (1st Round) | Initial Ideation
Following the business team's directive to keep the project simple and within the store team, I defined use cases. This streamlined approach aimed to make OPL visible during payment and handle applications post-order submission, ensuring focus and minimizing distractions at checkout for a small design scope and tight timeline aligned with the upcoming purchase season.
There are four use cases:
Next, I drafted the initial wireframe flows and presented them in the core stakeholder design review meeting with our PMs, relevant stakeholders, and engineers for feedback.
The Core Stakeholder Design Review was successful, receiving positive feedback. Ready for implementation, we're optimistic about meeting the project deadline.
3. Re-Define | Ideation | Collaboration
After secondary stakeholder reviews, we noted concerns about the initial design's potential negative impact on operational efficiency and potential burden on teams, especially with no additional headcount for the new feature.
Stakeholder Feedback:
Operating loans' absence in the order management system hinders support and approval, posing challenges for customer experience (CX).
The CX and Finance operations teams may encounter substantial manual work processing operating loans for a store transaction.
Embedding the application process in the checkout flow will reduce the need for follow-up, benefiting the store team.
Project Direction Update & Scope Enlarged
Direction Update
In response to stakeholder feedback, the team decided to update the project direction by opting to integrate the application process into the checkout flow.
Scope Enlarged
The project's scope change requires collaboration between the store and finance teams to meet the upcoming purchase season deadline.
New Design Challenge
The project scope expanded, but the deadline remained unchanged.
Design Collaboration:
As the lead designer, I collaborated with a finance team designer to develop the new feature. I handled store-side design, while she managed the operating line application process, with less than two weeks to finalize the design.
Design Considerations:
Mitigate abandonment risk by carefully handling operating loans in the checkout flow (e.g., avoiding customer redirection).
Consider the checkout experience for admin (sales) users versus end customers.
After updating use cases, I swiftly entered the ideation phase, creating user-friendly ways for initiating applications during the payment session. I validated the design across all breakpoints (desktop, tablet, and mobile view) to ensure no usability issues. Here are some ideation examples:
I collaborated with the finance team's designer to create updated wireframe flows, considering all use cases. The goal was to ensure a smooth and user-friendly process flow.
In our collaborative efforts, we conducted stakeholder and engineer reviews to align with both business needs and technical limitations. Simultaneously, we worked closely with the marketing and legal teams for a thorough copywriting review. Our aim was not only to finalize the Operating Line copy but also to enhance the description of the Input Financing Loan, ensuring users can easily distinguish between the two options.
4 Prototype | Validation
Next, we collaboratively created an interactive prototype for user testing. Due to our tight timeline, we opted for unmoderated testing. We developed a testing plan in consultation with our team's research lead.
User Testing
We crafted a usability test guide and conducted moderated tests with the guided flow, aiming to assess if the design and content met users' expectations, ensuring it was intuitive and easy to use.
Tested with 5 people. Tool: usertesting.com
Clickable Prorotype （Happy Path)
Clickable Prorotype (Sad Path)
Overall findings (store side):
Most of the assigned tasks were successfully completed by the users.
The key information was easily noticeable and understandable by the users.
The design and content met our users' expectations.
Areas to improve (store side):
Enhance button copy to ease user anxiety and encourage clicks.
Allow easy return to the checkout flow if the requested amount doesn't meet our requirements.
To address the findings from the user testing, I made updates to my design.
Incorporated user feedback into prototypes and conducted another round of testing, receiving positive feedback. Collaborated with engineers for smooth implementation, thoroughly quality-assuring details on the staging website before launching the updated version.
5 Launch | Key Screens
Below are HI-FI wireframes for key frame designs.
Live at www.fbn.com
6. Initial Impact & Data Analysis
We launched this feature at the end of October, and within just three months, we've already seen 318 users apply the operating line during checkout. Despite the majority of our users preferring the cash payment method, we're observing a notable upward trend in adoption.
During the design process, we strategically incorporated the "Learn More" button next to the "Apply Now" button to alleviate user anxiety and stimulate engagement. Initial user testing yielded positive feedback on this addition. However, by utilizing Amplitude, I found that only 20% of users clicked on the "Learn More" button, with the majority proceeding directly to apply for the loan.
This indicates our users prioritize immediate action over seeking details, emphasizing the need to tailor design and messaging to user behavior and preferences, and to continuously monitor and optimize.
7. Thoughts
The project's scope expanded during the design process, and working with a cross-functional team under a tight timeline posed a challenge. However, I gained valuable experience in managing unexpected changes during the design process.
Next steps:
Collect feedback from end users and gather data to identify areas for improvement.
Takeaway from this project:
Small projects can expand and pose deadline risks. Gather feedback from end users to improve.
Work with available resources to create the best solution for stakeholders and user-friendly experience for end users.