Online Store Redesign
Originally an agronomic data analytics company, Farmers Business Network (FBN) has transformed into a comprehensive Ag e-commerce retailer. As the website's purpose and strategy have evolved, a redesign is now necessary to align with these changes.
My Role
As the lead designer, I managed the end-to-end redesign of the categories page, conducting research, user interviews, design mockups, prototypes, user testing, and QA. Collaborating with another designer on the product detail page, we closely worked with the product manager, engineers, stakeholders, and sales channels to make informed decisions.
Set the Context
The FBN store website evolved in purpose and strategy, prompting a necessary overhaul. We initiated the redesign by focusing on the homepage and design system, setting the tone for the redesign 2.0 project
E-commerce
A complete overhaul
5 months
Key Problems
The original FBN store design was tailored to meet the needs of its time but lacked crucial user experience elements for efficient self-service.
Inadequate product showcasing hindering customer engagement
Lack of strategic focus despite excessive content
Difficult product discoverability
Inconsistencies across store pages
Limited scalability for additional product categories
Mobile design not optimized despite significant mobile traffic
Dependence on sales and customer reps for order assistance
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
Goals (HMW)
Facilitate an efficient purchasing process by enabling farmers to discover products based on agronomic needs.
Provide users with relevant promotional and educational materials for informed decision-making.
Implement a modular and scalable solution catering to farmers' requirements across diverse product categories.
Prioritize a mobile-first approach for redesigning the store to accommodate the significant mobile user base.
Encourage self-service product purchasing for farmers, reducing reliance on sales representatives.
The Process
As the initial step, I participated in a five-week-long FBN store fundamental research session. The goal was to gain a better understanding of farmer motivations and behaviors throughout the online shopping journey. We conducted moderate user interviews and here are the core insights relevant to my sub-category page redesign.
Core Insights
Farmers prioritize excellent service over prices. (Service over price)
Trust in retailers' prompt fulfillment is crucial. (Trust in retailers)
Ad purchasing is a circular journey. (Circular ad journey)
Farmers prefer simplified data for decision-making. (Farmer-friendly data)
Social proof promotes new product adoption. (Social proof)
Growers seek unbiased advice. (Seeking unbiased advice)
Design should accommodate multitasking farmers. (Accessible design)
Retailers and growers have different purchase timing. (Purchase timing difference)
After conducting research, we synthesized the findings and created an FBN farmer behavior map that outlines potential behaviors farmers may exhibit during their process. In order to better visualize and organize the insights, observations, and quotes gathered from interviews, we have developed four personas.
Next, we conducted a comparison analysis of ten leading e-commerce website designs from the farming industry and beyond to gain insights into best practices. Subsequently, we conducted a design audit of our entire store website, reviewing all categories across various breakpoints and in different countries to identify areas for improvement.
2. Define
During the discovery phase, we focused on understanding the goals of our users and identifying their major pain points. Following that, we pinpointed the design constraints, set up our design principles, and outlined defined milestones. Milestone 1 was:
Milestone One
Prioritize mobile devices in the design to all farmers access our site in the field.
Prioritize solution-based content over technical jargon
Enable stakeholder updates through content component design
Scalability for diverse product categories
Out of scope: search, planning features, checkout flow, order history
For this milestone, the focus is on two primary design areas: the category page redesign and the product detail page redesign. Since I am responsible the category page redesign, this case study will specifically delve into the design journey for this aspect.
We worked closely with our stakeholders to create a site map, going through several iterations to ensure easy navigation and organized content.
We created user flow to optimize key tasks on the store website, streamlining the user experience. Additionally, I assessed the necessary category page types for all six categories. Here is an example of user flow for the crop protection category page:
3 Ideation | Collaboration
Guided by identified page types, I crafted key atoms to explore diverse page layouts. After defining the page information architecture, I created low-fidelity wireframes. I articulate the rationale behind each design, and actively invite feedback to ensure collaborative decision-making.
Product Card Design
To improve the original FBN website, we aimed to create a clear product display for users to easily choose what they need. We added photos to enhance the visual presentation and allow for easy scanning. Here are some of the ideations we explored for the new product display design:
To move forward with the design, we made assumptions and selected design Option C for the product card.
Consideration of longer-name products.
Sufficient space for displaying details on product card.
Stakeholders will provide product images to match standard requirements.
I developed a generic content list, ensuring consistency across categories and addressing unique needs. After stakeholder discussions, the product card content list was finalized for each category. Mockups, using actual product content, maintained a consistent design. Stress testing on the product card image area ensured flexibility for diverse product images across breakpoints.
Filter Design
In the initial milestone, I designed the filter pattern, exploring three options for the store website. Collaborating with stakeholders, I integrated actual content into design ideation for all eight categories, narrowing down to two designs for user testing.
4 Prototype | Validation
I crafted high-fidelity wireframes within our design system, maintaining communication with the engineering team for technical feasibility. Collaborating with another designer, we developed an interactive prototype for user testing.
User Testing Round One | Test overall navigation flow
We devised a usability test plan and carried out usability tests to assess whether the design and content met our users' expectations, and to confirm if it was intuitive and easy to use.
Tested with 5 people. Tool: usertesting.com
Go to Clickable Prorotype
Overall findings:
Navigation was found to be easy.
Users were able to quickly locate key product information.
The design and content were found to meet our users' expectations.
Areas to improve (category page):
Users prefer the following card to peek more from the screen.
Users prefer a faster method to comprehend generic products.
To address the findings from the user testing, I made updates to my design.
User Testing Round Two | Test the filter design
I generated prototypes to evaluate suitable filter patterns for our website. In a usability test, two groups interacted with different filter designs, completing the same task. Both designs were effective, but Option B proved faster in task completion. Consequently, Option B was selected as the final design direction.
Tested with 2 user groups, each group 5 people. Tool: usabilityhub.com
Go to Clickable Prorotype A
Go to Clickable Prorotype B
5 Launch for Milestone One
Below are HI-FI WIREFRAMES for key frame designs.
Live at www.fbn.com
6. Impacts
The data extracted from Amplitude graphically portrays a striking 192% surge in store orders submitted by all users within six months of the successful launch of the new store design. This accomplishment is further underscored by a significant total order increase of 890 compared to the same period last year. These insights gleaned from Amplitude reinforce the resounding success and impact of the redesigned platform.
7. Thoughts
Collaborating with other designers and stakeholders to redesign a website from scratch was a challenging but rewarding experience. Throughout the entire process, from research to final launch QA, I took on the responsibility of managing each step.
Post Launch Milestone 1
Improved the compactness of the product card component.
Enhanced the scannability of the "as compared to" section.
Takeaway from this project:
Assumptions are a natural part of the design process, but it's crucial to validate each one during or after designing.
