The Backyard Market Website Upgrade
A total transformation of an online market experiencing customer engagement challenges
Project overview
The Backyard Market is a virtual farmer’s market in southeastern Florida, currently serving three communities. This non-profit initiative was born during the pandemic when in-person farmers' markets were put on hold, responding to a substantial need within the community. By securing grant funds, they were able to officially launch this remarkable program.
The platform was carefully designed to facilitate local buying and selling, creating an additional revenue stream for farmers and makers, increasing awareness, expanding their reach, and reducing food waste. For the local communities it serves, it provides an opportunity to discover and purchase local foods and goods in their area.
Project objective
The project objective comprehensive examination of user behavior on The Backyard Market's existing website to pinpoint the factors causing users to exit the platform without exploring its offerings. This involved conducting interviews with key stakeholders, in-depth content analysis, scrutiny of metrics and KPIs, market competition analysis, and an evaluation of the website's information architecture, among other methods.
The insights obtained from this research served as the foundation for a complete website redesign, with a primary focus on enhancing The Backyard Market's identity, purpose, and the value it offers to the communities it serves. The overarching goal being to boost sales and improve customer retention.
Timeline
7 Weeks
My role
Lead UX Designer
Product Designer
Team
Lauren Watt
(Product Manager)
Tools
Figma
FigJam
Adobe Photoshop
Optimal Sort
The process
Discover
Define
Design
Deliver
Next steps
Content Audit
Heuristic Evaluation
Market Research
Metrics & KPIs Audit
Competitive Analysis
Comparative Analysis
Persona
Problem Statement
How Might We
User Flow
Informational Architecture
Site Map
Tree Testing
Web Accessibility
Sketches
Mid-Fi Wireframes + Prototype
Usability Testing
Style Guide
...they understood exactly what our needs were, and provided us with the information and research needed to improve our project overall, and streamline our ideas/processes."
.png)
"Danny and Lauren were instrumental in identifying the key areas where we were losing revenue and demonstrated and conducted ways to address this...
- Courtney Ward
The Backyard Market Manager
Setting the foundation
To kick off the project, it was imperative to thoroughly evaluate The Backyard Market's present objectives, challenges, and pain points. This involved an initial stakeholder interview, as well as a comprehensive content audit and heuristic evaluation to identify both strengths and areas in need of improvement.
This research uncovered a number potential issues contributing to the current customer drop-off and lack of purchasing mentioned up in the initial stakeholder interview.
Main website pain points
Consistency and standards:
The website's information is currently presented in inconsistent and conflicting ways, forcing users to wonder whether different words, situations, or actions mean the same thing.
Error prevention:
There are several instances where users should receive confirmation before committing to specific actions. Not doing so is causing a lack of comprehension and trust among users.
Recognition rather than recall:
There is a critical necessity to reduce the cognitive load on users by enhancing the visibility of objects, actions, and options.
With a better understanding of how the content was causing difficulties for users, it was equally important to investigate the user journey and identify how and where users were navigating before leaving.
What the metrics & KPIs say
Since The Backyard Market's launch in April 2022, a wealth of information could be pulled form the metrics and KPIs, allowing for a deeper understanding of the user journey.
WORLDWIDE
The homepage bounce rate currently stands at 63.8%, signifying that more than half of the website visitors are exiting without further exploration. This suggests that the homepage might lack the necessary clarity and confidence to engage users effectively.
49%
2%
4%
8%
36%
A substantial 53% of users access the website through social media, with Facebook being the predominant source of traffic, contributing 49% of the total users. This is a commendable achievement, likely attributed to successful Facebook promotions.
61%
3%
36%
A significant 61% of users access the website via mobile devices. This underscores the importance of prioritizing mobile responsiveness to ensure that the mobile layout matches the quality of the desktop/laptop version.
Looking at the increase in user sessions clearly demonstrates the remarkable impact of targeted ads driving users to the website. This achievement is truly exceptional, and when coupled with a successful redesign, it holds the potential for significant increases in sales.
Furthermore, it's noteworthy that approximately 98% of website views stem from within the specified target areas served by The Backyard Market, further emphasizing the effectiveness of the ad targeting strategy.
The cart abandonment rate is notably high, indicating that 85% of users who add items to their carts do not complete the purchase. On average, around 70% of shoppers abandon their carts, making this high rate a potential indicator of checkout process confusion that requires attention.
The overall conversion rate for the 8,860 total sessions year-to-date stands at 0.33%. This figure highlights significant room for improvement, which is a promising opportunity when considering potential profits.
Understanding the market
The final significant step in this process was to synthesize the gathered findings and put them into context within the current market. This was achieved through a comprehensive competitive and comparative analysis.
Looking at the features, content, and how tasks are performed across a variety of direct and indirect competition enabled a deeper understanding of the strengths and weaknesses of The Backyard Market. This ultimately helped uncover a number of potential opportunities and sources of inspiration to pull from.
A few key takeaways
Confusion about 'how it works'
Users are immediately confused when they visit the the current website since there is no clear information explaining exactly what the purpose is, how it works, why they should shop there, etc..
Lack of customer funneling
There is no clear directive or statement indicating that users are intended to shop exclusively within their respective communities. This lack of clarity leads to confusion and an increased likelihood of making purchases they won't be able to receive and/or refunds.
All purchases must be picked up
It is not clearly explained that users they will need to pick up their purchases on a specific day, in a specific time window unless you go looking for it
Clarifying the informational architecture
Given the widespread user confusion surrounding how The Backyard Market operates, the necessity for shoppers to focus on their community offerings, and the lack of clarity in item retrieval, the 'define' stage began with an update to the website's information architecture.
A new information architecture was developed by applying industry best practices and insights from the 'discover' phase, and then a TreeTest was conducted with 84 unique participants, who completed various scenarios to assess the architecture's clarity and ease of use.
The results yielded strong feedback, with over 83% of users finding the updated architecture intuitive and clear.
Finding the target audience
Rachel was created based on insights from stakeholder interviews and collected data to represents our target user and their needs, experiences, behaviors, and goals.
Bio
Rachel works for the city of West Palm and is a big advocate for supporting those in her community who are making and growing products to sell. She is often very busy with family and work commitments, so she can’t often make it in person to the local farmers markets.
She loves the idea of a simple, online platform that allows her to order and pick up her local favorites, but it’s imperative that the process isn’t complicated or difficult.
Interests
-
Cooking + foodie culture
-
Environmental sustainability
-
Wellness + health
-
Community engagement
-
Traveling
Frustrations
-
Limited time
-
Confusing instructions
-
Heavy traffic + finding parking
-
Preservatives and pesticides
It was now time to hone in on the problem and look at the ways in which that problem could be solved.
Defining the problem
Problem statement
Rachel needs to better understand how The Backyard Market works so she can easily and confidently purchase goods from local vendors, and in turn, support her community.
How might we
HMW improve Rachel’s understanding and increase her confidence when purchasing local goods through the Backyard Market?
Developing the design
To map out how Rachel would navigate through The Backyard Market, it was important to develop a simple and clear user flow that encompassed all of the learnings so far in the discover and define stages.
The primary objective was to direct her to her specific location from the beginning, as the vendors, products, location information, and pickup details were all tied to this crucial first step.
To create the new website design, a design studio was conducted to create concept sketches and layout concepts for the key pages. After discussing the design elements and the rationale behind them, the final layouts and wireframes for the design were crated.
Results from testing
The next step involved testing the mid-fi wireframes for overall design clarity and user journey effectiveness in achieving targeted tasks.
Remote, moderated usability test sessions were conducted with 5 users matching the created persona, all of whom found the design to be fresh, intuitive, and clear.
Insights from the usability tests were put formed through affinity mapping to identify any recurring themes and/or issues, which were organized by priority against the project timeline, several of which were then integrated into the iterated design.
What testers said
"I found everything to be where I expected it to be. The structure and functionality felt pretty standard and feels very simple and to the point."
.png)
Iterations to the design
FAQ and vendor sign up
Testers still had several unanswered questions and concerns, particularly regarding specific order and pickup issues or questions. They suggested these could be added in an FAQ section. A similar need for clarity was observed among vendors interested in joining the market.
Incorporate the 'heart' of the company
Users loved the concept of The Backyard Market for its practicality but expressed a strong desire to connect emotionally with the company, its team, farmers, and vendors. They sought a deeper understanding of its core values and ethos, especially given its online nature.
Addressing accessibility issues
Numerous accessibility concerns surfaced during the evaluation of the updated design, particularly related to button labeling, hover/error state handling, color and contrast considerations, and more. The design and style guide iterations addressed these issues, resulting in a significantly enhanced level of accessibility.
Next steps
With the updated design taking shape, the next steps involve several smaller fixes listed below which would ideally be followed by more usability testing.
Immediate changes to the current site
During the development of the new website design, start by implementing the suggested list of improvements on the current site. These changes are intended to enhance users' comprehension of the purpose of the platform, how it works, and mitigate some of the current errors that are hindering sales.
Review product categories
Feedback from testers highlighted confusion related to some of the current product categories, such as 'miscellaneous.' Conducting a thorough audit and revision of these categories would help to alleviate confusion and enhance overall ease of use and satisfaction.
Elevate the website's copy
Due to time constraints, there was limited attention given to the formal copy of the updated website design. To continue enhancing the user experience, it would be extremely beneficial to continue refining the copy throughout the website and consider the possibility of hiring a professional. This will help with seamlessly integrating The Backyard Market's story, values, and ethos into the platform, ensuring consistency and resonance.
Guidelines for vendors
The current platform allows vendors to input their company and product information themselves, leading to significant variation in vendor pages. Implementing clear and structured guidelines during the sign-up process will not only create consistency but also instill trust and create a more cohesive, enjoyable experience for users.
These next steps will lay the foundation as the design moves closer toward the big ticket items. These include moving into high-fidelity design (incorporating color, visuals, design system, etc.), developing guidelines and design for responsive breakpoints, and the integration of comprehensive accessibility standards, such as semantic HTML, alt text for images, keyboard navigation testing, and more.
The Backyard Market has begun to unveil its identity and unleash its true potential. There is no doubt this platform is poised to make a substantial impact the communities it serves, increase profitability, create stronger customer loyalty, and elevate the overall user experience, promising a long and 'fruitful' future.
