Kirkaberry Farms eCommerce Redesign - Superb Shopping for Super Foods

How might a UX/UI refresh of a local business website's improve the B2B eCommerce experience, while introducing growth potential for B2C eCommerce?

Client:

Kirkaberry Farms

Industry:

e-Commerce, local small business

Timeframe:

3 weeks

My Role:

UX Research, Design Speculation/Scoping, Design System, UI refresh

Team:

Solo project

Tools:

Google Forms, Miro, Figma

Conducted exploratory survey to gauge current product awareness and prospective B2C demand in urban areas.

Restructured the official website's information architecture, eCommerce UX workflows, and cross-platform experience.

Introduced new design system with WCAG AA compliance, guiding website UI refresh.

Overview - An Enhanced Cross-Platform Online Shopping Experience Outreaching to a Potential B2C Market

Research Uncovered Consumer Interest Levels and User Flow Pain Points

User Interest Survey	Competitive Analysis
Most respondents were unfamiliar with haskap berries, often comparing them to blueberries, and saw fruit consumption as a nice-to-have rather than a necessity. Interest in purchasing was neutral overall, though a few respondents showed curiosity about potential health benefits like cancer-fighting properties. Responses in Google Forms.	Compared Kirkaberry's website with Flourist, a local supplier of artisanal flour and premium ingredients. Kirkaberry’s website would benefit from clearer navigation and improved product card design to enhance visual appeal. Refining product page hierarchy and simplifying the checkout process would improve navigability, while condensing content on the About page would reduce information overload.

User Interest Survey

Competitive Analysis

Most respondents were unfamiliar with haskap berries, often comparing them to blueberries, and saw fruit consumption as a nice-to-have rather than a necessity.

Interest in purchasing was neutral overall, though a few respondents showed curiosity about potential health benefits like cancer-fighting properties.
Responses in Google Forms.

Compared Kirkaberry's website with Flourist, a local supplier of artisanal flour and premium ingredients.

Kirkaberry’s website would benefit from clearer navigation and improved product card design to enhance visual appeal.
Refining product page hierarchy and simplifying the checkout process would improve navigability, while condensing content on the About page would reduce information overload.

💡How might we streamline the online shopping process for a potential B2C market by reducing friction in product discovery, selection, and checkout to encourage more confident purchases?

B2C Persona and User Journey

View User Journey Map on Miro

Refreshed Design System for Accessibility and Modern Aesthetic

Design Tokens

Colour palette and typefaces were chosen to accommodate the scale of this project, with room to grow in the future.

UI Components

Tokens are the foundation to creating components used throughout the UI, such as product education pages, eCommerce pages, and the checkout process.

View the design system in Figma.

Lo-Fi Mockups

Sketched lo-fidelity mockups were used to determine UI and new user task flows such as checkout.

The Redesign - an Educational, Engaging, and Exciting Shopping Experience

View Figma Interactive Mockups for Mobile and Desktop.

If you actually like reading, view this project's full case study.

Reflections and Takeaways

💚Desired Outcomes	🧠Lessons Learned
Confusion over navigation and structure is reduced, and navigating from educational content to shopping pages is clear and direct. Turnover increases Churn decreases the B2B market continues to thrive, with the B2C experience being accessible, multi-platform-compatible, and visually appealing.	Improving the accessibility, structural hierarchy, and visual design of a website can be instrumental in growing a small business's online presence. The volume of information in the current product education page drove me to manage and prioritize written content. For extended outreach, Kirkaberry Farms could pair with local businesses that serve as pickup points for customers in nearby towns (ie. Osoyoos, Rock Creek, Westbridge). Such a system would assist in distributing consumer-sized fresh products. The farm already supplies to at least one winery in Oliver, which could help to expand a pickup system to other local businesses.

💚Desired Outcomes

🧠Lessons Learned

Confusion over navigation and structure is reduced, and navigating from educational content to shopping pages is clear and direct.

Turnover increases
Churn decreases
the B2B market continues to thrive, with the B2C experience being accessible, multi-platform-compatible, and visually appealing.

Improving the accessibility, structural hierarchy, and visual design of a website can be instrumental in growing a small business's online presence.

The volume of information in the current product education page drove me to manage and prioritize written content.
For extended outreach, Kirkaberry Farms could pair with local businesses that serve as pickup points for customers in nearby towns (ie. Osoyoos, Rock Creek, Westbridge). Such a system would assist in distributing consumer-sized fresh products. The farm already supplies to at least one winery in Oliver, which could help to expand a pickup system to other local businesses.

Overview - An Enhanced Cross-Platform Online Shopping Experience Outreaching to a Potential B2C Market

Research Uncovered Consumer Interest Levels and User Flow Pain Points

B2C Persona and User Journey

Refreshed Design System for Accessibility and Modern Aesthetic

The Redesign - an Educational, Engaging, and Exciting Shopping Experience

Reflections and Takeaways

Overview - An Enhanced Cross-Platform Online Shopping Experience Outreaching to a Potential B2C Market

Research Uncovered Consumer Interest Levels and User Flow Pain Points