Huarache Farms
Case Study — Responsive Web Design
Role
UX Designer
UI Designer
Branding
Duration
Mar-Apr ‘21
2 weeks
Tools
Figma
Overview
Huarache Farms is a cooperative of backyard farms supporting local and sustainable urban agriculture and community development in Los Angeles. Not only do they sell their produce at their local Farmer’s market, but they recently launched their CSA produce boxes that they’d like to expand within the year. They are in need of a brand redesign and to create more awareness of their sustainable farming and their CSA produce box delivery services.
Goal
Design a responsive website (desktop, tablet, mobile) that covers core functionality
New Logo and branding
Create seamless CSA produce box checkout process
Research Goals
01. Analyze produce delivery service competitors to understand strengths and weaknesses
02. Get a better understanding of what motivates users to buy from local farms
03. Find pain points of user’s experience when purchasing produce boxes
04. Discover features that users find helpful
Research Methodologies
Competitive Analysis
Researched and compared various farm box or produce delivery service brands that were similar to Huarache Farms to better understand the competitive market and how users purchase.
User Interviews
Conducted user interviews to empathize and provide an in-depth understanding of the users’ values, perceptions, and experiences.
Findings
Goals: Users want the ability to customize farm boxes but have the option for curated boxes, along with having the freedom with the subscription frequency.
Needs: Users need cost-efficient produce options that are represented in high quality images of sample boxes or sample produce.
Frustrations: Most users explained their frustrations with produce that is unexpected or low-quality along with how long subscription boxes take to deliver.
Motivations: Users were motivated to spend more or purchase more produce items if they have free delivery or discount codes. They also mentioned that recipes were a great add-on feature.
Personas
Based on user interviews and market research, personas were created to represent Huarache Farms’ target audience. Having personas allowed me to communicate and empathize with the customer’s needs while guiding me with the decision-making throughout the project scope.
Sitemap
After looking at the competitive analysis and market research, I created a site map to show proposed screen pages and user flows based on the current Huarache Farms website.
User Flow
Before designing low-fidelity wireframes, I identified the main flow where the user would complete a task through individual steps.
Design
After forming research findings, personas, and IA, I began brainstorming website layout ideas through sketches. This led to generating wireframes for different pages.
While rebranding Huarache Farms’ brand identity, I was inspired by neutral, light colors that felt clean and modern, which were tied together through a mood board. From there, I created sketches of a variety of logos and continued with other decisions.
Sketches
Lo-Fi Wireframes
Logo Iterations
Responsive UI Designs
Usability Testing
Using our low-fidelity wireframes, I built a prototype for users to participate in usability testing and complete a task based on a specific scenario via Figma.
Overall Findings
All participants found the task to be very easy and seamless.
All participants found the layout of the website to be clean, organized, and simple.
Key Takeaways
Users rely on the navigation bar - participants mentioned they rarely click on CTA buttons.
Users are motivated by clear images/representation of the produce items they are about to purchase.
Users liked that the pricing of the farm boxes were in a range since it showed more transparency.
Users enjoy the intuitive customization process.
Improvements
Include operation hours & more information about customer service (potentially a chat box.)
Have more detailed language regarding the customization and billing process.
Have more membership perk information and where to find discounts.
Next Steps
Revisions
Make Iterations based on usability testing findings.
Test
Refine prototype and test again with older demographic.
Hand Off
Meet with developers to get an idea of project timeline to get site live.