The "Promise" Feature
The delivery timeline provided to customers upon purchasing a product online is considered a "promise." FBN's online store is committed to fulfilling these promises to its customers. This project aims to design a "Promise" feature from scratch and integrate it into FBN's existing online store.
E-commerce
A new feature from scratch
3 months
My Role
As the lead designer, I designed the "Promise" feature from concept to implementation, collaborating with product managers, engineers, and logistics. Additionally, I worked closely with stakeholders like customer service and account executives throughout the entire project.
About FBN
FBN, or Farmers Business Network, is a farmer-to-farmer network and e-commerce platform. The store business provides users with an easy way to buy inputs with transparent pricing.
Problem Space
In-season users need to get their products as soon as possible. The timing of product delivery is vital.
Consumers in general, including farmers, expect fulfillment promises from e-commerce experiences.
FBN needs to measure the performance of its own logistics operation
Target Users
Primary Users:
Existing and new farmers who use the platform for their agricultural needs
Secondary Users:
Sales representatives and FBN agronomists who assist in providing advice and support to farmers
The Challenge
This project aims to add a new feature to the soon-to-be-replaced old website, presenting two challenges:
Integrate the new feature seamlessly into the existing flow and match the design of the old website.
Design the feature as a reusable component for future website redesign to save effort for all teams.
Hypothesis (HMW)
Help customers to understand the necessary delivery timing information for purchasing chemical orders.
Set clear delivery expectations on orders and provide visibility into those expectations post-order.
The Process
In the initial phase, I conducted user interviews to gather early insights on farmers' delivery expectations, revealing the critical importance of the delivery promise, especially for in-season orders. Collaborating with the PM and a stakeholder, we brainstormed initial ideas for the "promise" project.
I then created and tested design concepts with users, receiving positive feedback that the "promise" feature resonated with them and our direction was on track. Below are some initial user testing screens:
In the second step, I conducted a comparative analysis of leading e-commerce websites, gaining familiarity with current promise designs in the market and finding inspiration for enhancing the FBN store website.
2. Define
After conducting the initial research, I proceeded to create a customer journey map to gain a better understanding of how users would engage with FBN's current online store.
In this step, I delved into the existing shopping flow, envisioning how the "promise" project could elevate the overall user experience. Analyzing each step, I pinpointed potential pain points and compiled a list of improvement opportunities, drawing inspiration from external websites for illustrative examples.
In a design review meeting with the PM and stakeholders, we analyzed the customer journey map for design insights, set priorities, and created user stories and an MVP list.
The design process started by concentrating on key areas, and I broadened the scope to encompass all milestones from the beginning. This approach ensured a holistic perspective, maintaining consistency across all milestones and avoiding limitations on future design possibilities.
3 Ideation | Collaboration
With the complete design flow mapped out, I proceeded to refine the designs for the first milestone. Here are some examples of my design process.
Map the flow out for different user scenarios
Based on the user research, I collaborated with other team members to cover various user scenarios.
Collaborated with engineers and logistics teams to address various cases
Collaborated with teams to generate numerous use cases addressing user and technical requirements.
Mockup in different screen sizes for responsive design
Taking into consideration the responsive design, I mapped out various flows for different screen sizes.
4. Review | Prototype | Validation
Collaborating with the PM and engineers on various use cases, we conducted design reviews with the product team and stakeholders. I collected feedback, iterated my design, and made specific updates.
User Testing Round One | Test on Different Ideations
We explored and validated various designs, and refined them based on user testing results. Our chosen design ensures easy scanning for users without missing vital details. Moreover, as a reusable component, it streamlines efforts for all teams in future website redesigns.
Tested with 15 people. Tool: usabilityhub.com
User Testing Round Two
Following this, I created a screener survey to recruit our existing farmer users for moderated usability tests. Using Figma, I designed an interactive prototype and conducted the tests via Google Meet, as per my usability test plan.
Tested with 5 people, each person about 30-45 mins. Tool: Figma, Google meet
Go to Clickable Prorotype
Overall findings:
Positive feedback on easy location change and shipping options during checkout.
Areas to improve:
Shipping options not immediately clear with a quick scan.
Unclear if all conditions apply to pickup options.
To address the findings from the user testing, I made updates to my design.
5 Launch for Milestone One
Below are HI-FI wireframes for key frame designs.
Live at www.fbn.com
Use the location selector to navigate
Delivery Estimates on Chem Product Pages
Delivery Estimates at Checkout
Payment Methods Affect Order Processing
Delivery Estimates in Order History
6. Impacts
Digital retention
Since the farming business is seasonal, we evaluate the digital monthly active users (MAU) on a year-over-year basis. Our site-wide MAU for February has increased by 55% compared to the previous year. Although the Promise feature is only one of the contributing factors to this upward trend, it serves as a positive catalyst for growth.
7. Thoughts
Next steps:
Work closely with the customer service team to collect user feedback on the new feature.
Collaborate closely with the engineers to address any unique use cases.
Follow up with the logistics teams regarding the AUS and CAN designs.
Consult with the PM to strategize the design of the next milestone.
Key insights:
Through user testing, I discovered that enhancing design readability and aiding users in swiftly and effortlessly scanning through information is crucial for content-rich pages.
Below are my takeaways from this project:
It is essential to test designs with users, regardless of how many internal design reviews have already been conducted. User feedback is invaluable.
Collaborating closely with different teams can assist designers in designing more effectively and efficiently.