joad
Celebrating farm-to-table connections through an e-commerce redesign that brings farm stories to life.
Sole UX Designer
Jun - Oct '24
Figma, Pinterest
the problem
No one loved the old website and it showed.
Leprendo's website lacked a clear brand identity and emotional resonance, making it feel like a generic e-commerce marketplace platform. Although the co-founders aimed to spotlight farm stories, the site primarily focused on products with little storytelling to support that vision. Meanwhile, users expressed a desire for transparency and authenticity but struggled to learn about the farmers or connect with the origins of their food.
the solution
A thoughtful redesign that brings brand, story, and product together.
I led a full design process to transform Leprendo into joad, a marketplace that balances commerce with storytelling. The redesign keeps products at the forefront while bringing farm stories to life through a more intuitive and meaningful experience.
By simplifying navigation, reorganizing content, and creating a cohesive visual language, joad now supports both product discovery and storytelling. The result is a platform that feels authentic, approachable, and true with both user needs and brand values.
kickoff
Building alignment with the co-founders
I began by meeting with Leprendo’s co-founders to better understand their goals and expectations for the redesign. During our conversation, they shared their frustration with the existing website, which felt like a generic e-commerce marketplace. They clarified that the new website (later named joad) wouldn’t replace Leprendo, but serve as a separate platform with a stronger brand identity and emotional connection.
Their vision for the redesign was clear: they wanted a platform that could tell authentic farm stories and build a deeper sense of connection with users. I also walked them through my design process, explaining that I would begin by understanding the business context before conducting user research to inform the design direction.
screener
Recruiting the right users
With the project goals in place, my next step was to connect with real users. To recruit participants for interviews, I created a screener to identify people who matched joad's target audience: adults in their 20s to 40s who had experience purchasing farm-sourced specialty goods.
Since joad serves a niche market, I needed to ensure participants genuinely engaged with these types of products. The screener received 27 responses, of which 11 qualified for interviews. To be eligible, participants had to at least occasionally seek out and purchase farm-sourced specialty goods.
I then segmented participants based on how much farm stories influenced their purchasing decisions. These segments helped shape my interview questions and provided early insight into different user motivations.
user interviews
Understanding what drives people to buy local
Out of 11 qualified participants, I interviewed 6 over Zoom (4 primary users and 2 secondary users). The goal was to understand what motivates people to buy farm-sourced specialty goods, how they make purchase decisions, and what role storytelling plays in building trust. I also tailored my interview questions based on how important participants said these stories were to them in the screener.
Here are some key takeaways from those conversations:
website evaluation
Potential areas of improvement in the current website
In the second part of the user interviews, I asked participants to explore the original Leprendo website and share honest feedback on their overall experience. This included their impressions of website’s layout, clarity, and usability. Below are some of the key takeaways from their feedback:
Break up and reorganize the product description
Participants found the product descriptions overwhelming and difficult to scan. They suggested breaking the text into shorter paragraphs, adding clear section headers, and separating the farm story into its own dedicated section.
Strengthen the farm-product link
Participants wanted a stronger connection between each product and the farm it came from. They expected to easily access information about the farm’s location, story, and farmers, and felt that having this context would built trust and make the shopping experience more meaningful.
Improve visual consistency and cohesion
Participants noticed a lack of visual consistency across the website, which made the experience feel disjointed. They were distracted by mismatched image sizes, unclear icon meanings, and design elements that didn’t follow a cohesive visual theme.
Personas
Balancing logic and emotion in purchasing decisions
Using insights from user interviews, I then developed two personas. One key finding was how users balanced logos (logic and reasoning) and ethos (emotional connection and trust) when making purchasing decisions.
Those who leaned toward logos focused on practical factors, like where a product came from, how it was made, and what ingredients it contained. Meanwhile, those influenced by ethos were drawn to farm stories and the passion behind the work. Most participants considered both, but the weight they placed on each varied. In these personas, Scott leans more toward ethos, while Emma is guided by logos.
My consolidated HMW question
Project goals
How prominent should farm stories be featured?
As I entered the ideation stage, one tension became clear: a disconnect between user needs and business goals. From user interviews, it was evident that while participants valued farm stories, their primary focus remained on the products themselves. Meanwhile, my clients wanted the farm stories to play a more prominent role on the website.
To address both needs, I aimed to strike a balance by designing an experience that keeps products front and center while making farm stories easy to find and explore.
User Need
Business Goal
Design Solution
feature prioritization
Collaborating with stakeholders to outline and prioritize features
To define the project scope, I organized a collaborative working session with the co-founders. We started by consolidating all our ideas into a single list, including features they want for their website with additional ones I proposed based on user and business needs.
Together, we used the MoSCoW method to rank each feature by importance and feasibility. This exercise helped us align on priorities for the initial design phase and identify which features to reserve for future development.
sitemap
Simplifying the sitemap to improve product discovery
Before refining the existing map, I first asked my clients which navigation items they no longer wanted to keep. They identified Blog as unnecessary, so I removed it. From the original structure, I kept Categories, Our Farms, and About Us, renaming Categories to Shop to better reflect standard e-commerce terminology.
I also removed the Home link, since it’s common practice for the website logo to serve as the homepage anchor. Additionally, I took out Explore, which overlapped with Shop, and moved Contact to the footer, which aligns with familiar navigation patterns found in most e-commerce websites.
See how the sitemap transformed from before to after!
USER FLOWS
Tracing the journey from story to checkout
Since joad functions as an e-commerce marketplace, I focused on two key user flows: browsing and purchasing products, and learning about the farms behind them. These paths represent the main reasons users visit the site: to shop or to connect with the story behind what they’re buying.
wireframes
Laying the groundwork for design
With the navigation established, I moved on to defining the structure and content of key pages, including the homepage, product details, and farm profiles. To guide this process, I drew inspiration from competitor websites and reviewed usability studies from Baymard Institute to understand common e-commerce patterns and best practices.
As I developed the wireframes, I adapted these patterns to fit joad’s unique user needs and business goals. For example, I introduced filters that accounted for both food preferences and farm-specific attributes, creating a more relevant shopping and meaningful shopping experience.
moodboard
Understanding the new brand vision
My clients asked for my help in developing the branding for joad. To better understand their vision, I invited them to create and share a Pinterest moodboard. Alongside that, I provided a list of brand values and asked them to choose the ones that best represented their desired identity.
From their moodboard, I noticed a clear preference for earthy tones, clean layouts, and natural textures. Using these insights, I began my own visual exploration to translate their ideas into a cohesive design direction.
style tile
Which one better captures your vision?
After spending countless hours exploring color combinations, refining logo concepts, and testing typography pairings, I narrowed the options down to two style tiles. While they may appear similar at first glance, each carries a distinct tone and visual direction.
The left style tile features a muted color palette accented by a touch of neon yellow-green, paired with brighter imagery to create an energetic feel.
The right style tile adopts a darker palette with bold accent colors, and the imagery follows suit with dark backgrounds to maintain visual consistency.
first round
3 major improvements in my design
For this round, I recruited 4 participants with experience shopping for farm-sourced goods and conducted usability tests over Zoom. As it was my first time testing mid-fidelity wireframes, I realized they needed more detail than I had prepared. Without written descriptions, participants could only comment on layout and navigation rather than content strategy. Still, the feedback was valuable and guided the following improvements.
Reassess the Homepage content and structure
❌ The homepage received mixed feedback from participants, each with different preferences regarding the content and structure.
✅ I kept only one section about Joad’s mission and values, moving it to the bottom of the page so product browsing remains the main focus. The alternating product-and-story format was retained, but the first two sections now spotlight products to better orient users toward shopping.
Redesign the Farm Profile page
❌ Several participants noted that the layout resembled Facebook. While not inherently negative, it risked making farm profiles appear like social accounts where users could message or interact with farmers directly.
✅ To prevent confusion, I redesigned the layout to feel more distinct and focused on providing informative content about the farm.
Add more content to the profile card
❌ A few participants mentioned that the profile cards looked sparse and wanted to see more information included.
✅ I added a short preview to each card using an excerpt from the farm's "Introduction" section. This makes the cards feel more engaging and helps users decide which profile to explore further.
second round
3 additional but subtle improvements
I converted the mid-fidelity wireframes into a high-fidelity prototype and conducted 5 usability tests over Zoom. As before, all participants had experience shopping for farm-sourced goods, with 3 returning from earlier interviews or tests.
With the designs now closely reflecting the final product, I focused on how users perceived and engaged with the content. This helped address a gap from the first round, where limited information made it difficult to give feedback on clarity and tone.
Add an arrow icon for nav items with a dropdown
❌ Although participants didn’t mention it during testing, I later noticed that navigation items with dropdown menus lacked clear visual indicators.
✅ To improve usability and align with UX best practices, I added arrow icons next to dropdown items. This helps users quickly distinguish between expandable menus and standalone links.
Organize the list of farms alphabetically
❌ A participant suggested that sorting farms alphabetically would make the list easier to scan.
✅ Farms were initially grouped by state and then alphabetically within each group. However, with only a few listings at this stage, a purely alphabetical sort improves usability. As the directory grows, we can revisit state-based categorization.
Update accordion label to include 'Nutrition Facts'
❌ Two participants mentioned that they expected to see nutrition facts included on the Product Details Page.
✅ The information was already listed under the 'Ingredients' accordion, but its label wasn’t clear. I updated it to 'Ingredients & Nutrition Facts' to make the content easier to find.
mockups
An e-commerce marketplace that blends product discovery with farm transparency to create a shopping experience that's meaningful, informative, and rewarding.
Homepage: Where Shopping Meets Storytelling
From featured products to farm stories, the homepage invites you to shop, learn, and connect with where their food comes from.
Easy Product Discovery with Accessible Filters
Products are sorted into clear categories, with filters placed in a more visible location. This makes it easier for you to refine your search based on your individual preferences and needs.
In-Depth Product Pages with Visuals, Stories, and Details
Each product page includes key details like farm details, nutrition info, and customer Q&A, so you know exactly what you are getting and where it comes from.
Directory of Farms with Dedicated Profiles
Discover the people behind your food. Each farm has its own profile where you can learn their story, watch videos, and explore the products they offer.
key learnings
What wisdom did I gain?
Recruit research participants who reflect your target audience.
Early on, I learned the importance of recruiting participants who match the target user profile. Although this approach extended the recruitment timeline, it resulted in higher quality, more applicable insights and gave me greater confidence in making design decisions.
Ensure wireframes are detailed enough to receive useful feedback.
In the 1st round of testing, several participants found the wireframes vague and struggled to give helpful feedback. One person recommended adding more detail to convey the intended experience. That comment stuck with me, and I plan to apply it in future projects so users can interact more meaningfully with the design.
next steps
So, what's next on the agenda?
Conduct usability testing with real customers.
All participants I tested were prospective users who had expressed interest. We avoided using customers’ purchase email addresses for recruitment, so we did not contact active customers during initial research. With more time, we will revisit recruitment through appropriate channels.
