K&G Farm
Product: A responsive web design of an e-commerce
Role: UX and UI Designer
Timeline: October 2020 - September 2021
Tools: Wordpress, Figma, Excel, Forms, Word, Adobe Illustrator, Maze.co
Background
The client: K&G Farm
K&G Farm is a small vegetable business operated by a Hmong family located in Fresno, CA. They are interested in having a website to sell their produce, expand their business to new customers, collaborate with other businesses, and continue building relationships with existing customers.
Goals and objectives
Create a responsive website that can be displayed on desktop and mobile devices
Develop K&G Farm brand to expand their business to potential customers and business partners
History of the client
Since the mid-1970s, more than 1300 refugee Hmong, Mien, and Lao families immigrated to Fresno to escape their war-stricken country. They were self-sufficient and grew their own food when they were still living in Laos. Now in the United States, many have become farmers and work on small plots of land growing food for themselves and selling vegetables to customers at small businesses such as ethnic stores and farmers markets. To generate more income, some of these farmers travel hours outside of Fresno to sell their vegetables. For K&G Farm, they travel every Saturday to San Francisco to sell their produce at a farmers market.
Hand-sewn cloth depicting the Hmong escaping war and persecution in Laos.
Research
Getting to know K&G Farm
I had several calls with K&G Farm to get a better understanding of my client so we can be strategic with our time, resources, and effort dedicated to this project. I facilitated our discussions around the SWOT framework:
What are the strengths of their business?
What are the weaknesses they face with their business?
What are the opportunities that can help elevate their business?
What are the threats that can harm their business?
Meet Julie, our persona
I sent a survey out via Facebook and Slack targeting people who buy groceries so I can understand their mental model. The survey focused on demographics, grocery shopping habits before and during COVID-19, determined how familiar they are with existing produce sold by K&G Farm, and what would encourage them to buy unfamiliar produce. Based on the data collected, I used the most common information such as age, marital status, behavior, and etc. and created Julie Yang.
Takeaways from SWOT analysis and survey
From the two activities, the client and I agreed the next step we can take to elevate their business is to add a pickup and delivery service for customers who live in Fresno and San Francisco. Based on the survey results and my client’s experience with the pandemic, more people are opting for pickup and delivery to avoid large crowds. Customers still expect convenience and high-quality produce even from a pickup and delivery service. K&G Farm will continue to sell in San Francisco so adding these services would be a great stepping stone to their business. As of now, they don’t sell in Fresno but it’s another opportunity they can pursue as their business can handle the bandwidth (get other family members involved with the Fresno location).
Gauging the online presence for produce
First, I started on my product roadmap and prioritized based on findings from the SWOT analysis and Julie, my persona. While talking to my client, we had trouble figuring how to sell produce online so I decided to compile a competitive analysis focusing on the main features one would find on an e-commerce website. I assessed the competitors based on the way they sell "heirloom tomatoes" to standardize my findings.
WordPress as a potential e-storefront
I started looking which e-commerce storefront to use for my client. I narrowed down my search and I decided to go with the Woo Commerce plugin for WordPress for its popularity. ⅓ of all websites on the internet are built on WordPress. I cross-referenced the product roadmap with the capability of Woo Commerce and it matched all the features.
However, there was one feature that was missing from the storefront: the filter.
As a Woo Commerce user, you can buy plugins to enhance your storefront. It didn’t come with a filter but there was a plugin that can be purchased. Since my client has a tight budget I decided a usability test with low fidelity wireframes would determine whether users actually use the filter feature when buying produce.
Information Architecture
Defining and structuring the skeleton of the website
K&G Farm grows a variety of vegetables all year round with many of them are seasonal. We had a conversation about whether to list all products on the site map with the chances of creating a poor user experience as all products won’t be available, however, we decided to list all the vegetables on the site map since we wouldn’t be making updates to the architecture of the website seasonally. As an alternative, the client created an Instagram and Facebook account as a way to keep customers up-to-date with what they’re selling for that season and increase their exposure to new customers.
Drafting low fidelity wireframes
Referring back to the product roadmap and the competitive analysis, I drafted the basics visual elements of the website. I also made sure to include the filter plug-in for the All Product page so I can test it out with users. You can view the low fidelity prototype on Figma or watch the walkthrough from this video:
Usability testing
Setting up the test for users
Objectives:
Determine the overall ease of use and flow of the website, as well as areas of confusion, or frustration for users
Determine whether the filter plugin is required when building the website
Subject: A low fidelity desktop prototype was used via Figma
Methodology: Unmoderated testing via Maze.co
Participants: 11 testers
Tasks:
You are interested in buying Green Grapes. Select the smallest batch of Green Grapes and save it in the cart.
You are interested in buying Roma tomatoes for dinner. Select the batch of 4 Roma tomatoes and save it in the cart.
Place your order in for a pickup.
Results from the usability test
Based on the results from the Maze testing, Task 1 and Task 2 were successful with scores above 90%. However Task 3 scored a success rate of 60%.
Task 1: Find green grapes
Success rate: 90.9%
8/11 testers used “Shop Now” from the navigation bar
3/11 testers used the search bar
Task 2: Find Roma tomatoes
Success rate: 100%
1/11 used the crumb and interacted with the filter feature on the All Product page.
5/11 testers used “Shop Now” from the navigation bar
5/11 testers used the search bar
Task 3 - Pickup your order
Success rate: 60%
4/11 testers didn’t click on “local pickup” initially and skipped directly to checkout
Task 3 had a 60% success rate due to the design on the Cart page. 4/11 testers skipped the shipping method and attempted to click to the next screen but realized they couldn’t move on unless they select “local pickup”, resulting in the highest misclicks from the entire test.
Based on the usability breakdown from the Maze report, the average misclick for Task 3 was 19.7%. I created two screens for the payment process and both had poor usability score with the highest misclick (highlighted in orange).
Iteration
K&G Branding
After user testing, it was time to draft the high-fidelity screens a user would see in real life. The client wanted their brand to convey:
Tradition: Hmong basket logo connecting roots back to their homeland; elephant foot design representing family, strength, the foundation of life
Fresh and high-quality: crisp, up-close images of fruits and vegetables
Local: site copy emphasizing nearby location, supporting small businesses
Three rounds of logo design later….
The client initially liked the logo on the left but it wasn’t responsive on a mobile device and users had a hard time identifying the image as a basket so I went back to the drawing board. These baskets are traditionally hand-woven together so I decided to hand-draw the basket using Procreate and transferred it over to Illustrator to convert it into a vector. After two more rounds of iterations, I compiled a set of four logos that would work well on a desktop and mobile device—they would also work on posters, prints, and social media—giving the client more flexibility to present their business on more mediums.
Once the logos were finalized, I compiled their UI style guide, typography, and other design elements for desktop and mobile.
Removing the filter plugin from the design based on poor results with user testing
Between the two tasks locating the grapes and Roma tomatoes, only 1/11 testers interacted with the filter on the All Product page. The other 10 testers used the search bar and navigation bar to complete the tasks. Based on the findings, K&G Farm is not required to buy the filter plugin as it doesn’t yield many usages. This also begs the question: should K&G Farm even host their store on WordPress? It’s clear that customization on WordPress can get expensive down the road. I removed the filter plugin from the design seen in the next iteration.
Based on user testing, removed the filter on the All Product page as 1/11 testers interacted it which isn’t enough of a reason to buy the filter plug-in.
Breaking down the payment process into small, digestible screens to avoid too many misclicks
From all the tasks, the biggest pain point discovered was from scheduling a pickup order. The task had a 60% success rate due to the design on the Cart page. 4/11 testers skipped the shipping method and attempted to click to the next screen but realized they couldn’t move on unless they select “local pickup”, resulting in the highest misclicks from the entire test.
I drew references from Chick-Fil-A as I believe they have a great user experience ordering in-person and on their app. On their app, they lay out their payment process into multiple screens, informing the user of the number of steps it will take to complete the order. Each screen starts off with a question to prelude the user to the action they will take in an easy, digestible manner. Each screen focuses on one task so the user won’t be bombarded with too much information. Having it in this format also ensures the user added all the necessary information for the restaurant to process their order quickly with no hiccups or confusion.
Based on user testing, Task 3 average misclick rate is 19.7% which can deter users from completing an order. I expanded the payment process from two screens to four screens in the final prototype, dedicating each screen to one clear task.
Final prototype
Voila! The final designs :)
I shared with the client the final prototype for what a user can see from a desktop and mobile view. They were very happy with the result :)
Reflection
Takeaways from this case study
Make sure you understand your client’s dreams, strengths, weaknesses, and places of growth and threats. They guide you through the design process and make the client feel more in control of their own product.
Low fidelity can save money, time, and headaches
It’s empowering and uplifting to serve my own community. I’ve learned to be a better designer, facilitator, and community member.
Down the future with K&G Farm
Determine whether to build the website with WordPress or use another platform