Summer Grove Farmers Market
A group project that conducted in-depth research in order to develop a highly effective, streamlined farmers market website.
Tools & Tasks: Adobe InDesign & Illustrator, user interviews, wireframing, prototyping, usability testing, UI design
Course: UX Design Fundamentals | Bellevue College
Duration: 3 months
Project Overview
This project explores a fictitious farmers market's need for an informative and highly efficient website. Through careful research, my classmate and I developed a design that streamlines access to organization details, important forms, and a comprehensive event calendar.
The Competitor Website
My classmate Carlyn and I analyzed the Sammamish Farmers Market to understand common industry trends and the core functions of a farmers market website. We noticed the following pain points:
Poorly functioning events calendar
Unresponsive, dated layout
Repetitive content
Our goal was to create a website that creates easy access to important event details and forms.
The Sammamish Farmers Market served as a helpful comparison point for our design.
Business and User Goals
Business Goals
The Summer Grove Farmers Market hosts a seasonal farmers market to gather the community and support local farmers. The city council that oversees the market and its multiple vendors has the following goals in mind:
Launch new website by Summer 2020
Increase foot traffic by 20%
Attract more vendors and volunteer sign-ups
User Goals
The farmers market users (customers, vendors, and volunteers) also have several important needs:
Quickly locate market details
Comprehensive event calendar
Easy access to online forms
User Interviews
Before starting the user interviews, Carlyn and I identified the following assumptions about our users’ motivations for visiting the farmers market:
Buying fresh, organic produce is a priority
Supporting local farmers and businesses is vital
Next, we conducted a round of interviews to analyze actual user needs and expectations. We asked 2 participants the following questions:
Findings
Our user feedback revealed that consumers value the farmers market more for the overall experience and that buying organic isn’t a top priority with so many grocery stores close to home. It’s clear that the users truly value convenience above all. Read full interview transcript >
“It’s clear that the users truly value convenience above all.”
Persona
Carlyn and I created several personas to consider different user perspectives. My persona Marco, a local farmer wanting to register as a vendor, highlights the need for an easy online application process.
Website Structure
Our goal was to develop a main navigation that allows users to accomplish key tasks and quickly access important market details. We included a drop-down for Get Involved, where the registration forms are located.
Low-fidelity Wireframes
To begin the ideation phase, Carlyn and I sketched several rough outlines, which we then refined into our first draft of wireframes. The concepts feature simple interfaces that prioritize quick access to information.
My home page wireframe (first draft).
Carlyn’s Vendors page wireframe (final draft).
Carlyn’s Calendar page wireframe (final draft).
Paper Prototypes
After solidifying our wireframes, we created paper prototypes to visualize the remaining unbuilt pages and color coded their unique functions. This helped us examine the overall structure and prioritize the most relevant content.
Our Become a Vendor page prototype helped us create a basic structure.
We brainstormed each page’s content and core functionality: page sections (purple), expandable content (yellow), & internal or local links (blue).
Usability Testing
Carlyn and I collaborated with 2 different students to test our paper prototypes. We completed two separate tests and gave each user the same task. Our goal was to identify how users navigate the site and access key information.
Test 1: Find Event Details
We first briefed our peers as Carlyn’s persona, Tommy, who wants to attend the “Hawaiian Day” event with his young children. Our users were given the task of finding important event details.
Users 1 & 2 Path: Home > Calendar > select Hawaiian Day
Test 2: Find Vendor Application
Next our peers were briefed as my persona, Marco, who wants to become a market vendor. We asked our users to locate the vendor application.
User 1 Path: Home > Our Vendors > return to Home > Get Involved > Become a Vendor > click on download button
User 2 Path: Home > Get Involved > Become a Vendor > click on download button
Findings
After testing we asked the users if they felt that they successfully accomplished their tasks. Their answers were yes, but with some difficulties:
The taxonomy of Our Vendors is misleading. Both users were surprised that this page includes a list of current vendors and not the application to become a vendor.
The Calendar page doesn’t include a monthly view. User 2 mentioned that it would be helpful to see all upcoming events in one glance, while still being able to click on a day for more specific details.
Post-test Adjustments
Thanks to user feedback, we made several improvements to our designs:
Site Taxonomy: The Vendors tab includes a drop-down for all vendor related details. Similarly, the Volunteer tab displays all volunteer and sponsor information.
Home: We added a search bar above the main navigation (see next section).
Calendar: We included a monthly calendar with a comprehensive list below (see Low-fidelity section).
Final Wireframe
Our final wireframe focuses on a streamlined navigation for quicker access to important event details and documents.
Streamlined Navigation & Access
We adjusted the final navigation to improve access to important market details and applications.
The Finished Product
Branding & Logos
After our class finished, I continued to work independently to design a branding board and logo for the site. Inspired by the sunflower element, I chose warm golden tones to embody a cozy hometown feel.
Summer Grove’s branding board & logos.
I designed an event poster to envision the overall farmers market experience.
Final Mock Up
Next I created the high-fidelity mockup. I maintained a similar structure to my low-fidelity wireframe, but made several key enhancements:
Quick access utility navigation
Featured event slider
Comprehensive footer with full site navigation, newsletter subscription, and clickable map
Conclusion
This project challenged my critical thinking in many ways. Firstly, I learned that user and designer perceptions can differ greatly. It became clear early on that our assumptions didn’t align with actual user needs and motivations, which is why user feedback is crucial. Secondly, I learned the value of a strong site navigation and taxonomy, since it has the power to create a streamlined user experience.
Next Steps
1. I would continue to investigate the main navigation taxonomy by testing my possible solution (see Usability Testing section). To determine the most effective taxonomy, I would invite 10-15 users to participate in a closed card sort, and then conduct another round of site-wide usability testing.
2. I would also refine the Become a Vendor page structure. To improve access to the vendor application, I would invite 5-6 users to a participatory design sketching session. They would be asked to draw low-fidelity wireframes and mark the best location for the application buttons.
A special thanks to Carlyn Yoshida for her wonderful collaboration.