Process Highlights

Design challenge & responsibilities overview

Challenge
Redesign the ecommerce website for Ort Farms.

Opportunity
Redesign product landing page (PLP) & product description pages (PDP) to enhance searchability & enable an easier online shopping experience.

Timeline

Feb 7-28, 2025

3 Weeks

Timeline

Feb 7-28, 2025

3 Weeks

Disciplines

User Experience Design

User Interface Design

Disciplines

User Experience Design

User Interface Design

Responsibilities

UX Research

Design Thinking

Wireframing

Prototyping

Responsibilities

UX Research

Design Thinking

Wireframing

Prototyping

Tools

Figma

FigJam

Notion

Canva

Tools

Figma

FigJam

Notion

Canva

BACKGROUND

Not all is as expected.

Ort Farms is a small, family owned farm located in Long Valley, New Jersey. While they’re incredibly popular for in-person shopping, ecommerce customers found difficulty navigating their website and making purchases. What I learned during this redesign was to leave my own assumptions at the door. While the idea of placing all of their products into an easy to navigate, aesthetically pleasing website sounded great, I learned that customers really wanted to shop for certain items in person, but would look for information about these products online.

The Process.

Research

Competitive Analysis

User Interviews

Affinity Map

Synthesis

Persona

Problem Statement

Site Map

User Flow

Ideation

Sketches

Wireframes

Hi Fi

Final Designs

Prototype

Usability Testing

Final Iterations

Reflection

Key learning

Conclusion

RESEARCH

Competitive & Comparative Analysis

Ort Farms resides in a rural part of New Jersey. The area is beautiful and filled with many other farms of different sizes and specialities. In my competitive analysis, I felt it to be necessary to compare large and small farms in the surrounding area, as well as local grocery stores. The comparative analysis, however, gave room in my research to look from a different angle. I researched local events (food truck festivals, for example), as well as a cider mill as these are popular in the local area and can certainly impact Ort Farms business.

Small Local Competitor: RH Farms

Pluses

Niche: Popular location specifically for apple picking

Developed reputation through word of mouth

Deltas

Small business: Limited offerings

Minimal social media footprint

Moderate Local Competitor: Tranquility Farms

Pluses

Large farmhouse: Spacious and an enjoyable shopping experience

Deltas

Location: Based in a more rural area

Large Local Competitor: Tranquility Farms

Pluses

Large farm: Large and very popular

Website Offerings: Lots of variety & information on the farms’ website

Deltas

Overcrowded: Can lose the charm of feeling local

Pricing: Due to high demand from out of town visitors, prices are generally very high

research

Affinity Mapping

The information taken from user interviews was populated into sticky notes that were then organized into groups. This allowed me to see the golden threads. What are users saying and how do we now make sense of it into usable information.

This affinity map illustrates that users love shopping at local farms and connecting with real people. They value farmers' recommendations, however, majority of users had not had good experiences when shopping on farms' websites.

SYNTHEISS

Persona

I wanted to create a user persona that embodied a frequent shopper of local farms based on the information gathered through user interviews and my competitive & comparative analysis. My aim is to encapsulate the users preferences, pain points and behavior in order to more clearly define the overall challenge and need for effective redesign.

SYNTHEISS

Problem Statement

Sarah loves the personal connection and fresh produce she finds shopping at local farms but needs a better way to learn about recommended products and upcoming events because farms' websites are typically difficult to navigate and don’t effectively present their offerings.

SYNTHEISS

Site Map

Ort Farms' original website had many 404 error pages and was incredibly difficult to make any purchases, or to find relevant information about in-season produce. The site map redesign organized the website in a way that is easier for users to navigate. A dedicated section for learning about what's in season and how to use these particular products, and an easy way to find all other offerings though the 'shop' tab.

SYNTHEISS

User Flow

In order to test a users ability to enter the new website & complete a purchase, the following flow was created. This would see users navigate through the 'shop' tab and arrive at the product listing page. Users would select a pie, then be redirected to a product description page of that pie. Finally, users would add the item to their card, go to the checkout and complete the purchase.

IDEATION

Sketching

Sketching is one of my favorite parts of design. Some of the ideas I had iterated on were how to best illustrate and balance the farms' offerings with their story. Who they are and what they stand for. These questions heavily influenced the design of the home page.

IDEATION

Wireframes

After completing a series of sketches and gathering inspiration as to what each page could and should look like, I began to create lo-fidelity mockups in Figma using a Macbook 14-inch frame before wiring them together to test the flow. Each page was iterated on multiple times. Tweaking, refining and working within auto layout in order to create a responsive design that was easy to navigate.

IDEATION

Color & Type

For the redesign, color was key. I aimed for a palette that truly reflected the farm: earthy greens, creams, and browns. Josefin Sans felt perfect for the typography. It's clean, readable style allowing the user to have an enjoyable experience and for the farms' message to stand out.

Testing

Final Product

Previously, users would enter the site and have to read through text heavy pages. In this redesign, a strong hero image had the intention to quickly capture the audience, while also giving immediate options to 'shop now' with a large call to action button and a clean nav bar.

Testing

Product Listing Page (PLP)

The PLP page has improved navigation with beautiful images of products for sale. This page enables users to see all 'baked goods' offerings, which is one of many options within the 'shop' tab.




Additional features on this page:

  • A filter which enables users to find what they want, quicker

  • Farmers' recommendations that speaks to users interest in what's in season

  • Transparent pricing

  • CTA which enables items to be quickly added to the shopping cart

Additional features on this page:

  • A filter which enables users to find what they want, quicker

  • Farmers' recommendations that speaks to users interest in what's in season

  • Transparent pricing

  • CTA which enables items to be quickly added to the shopping cart

Testing

Product Description Page (PDP)

Previously, users would find it difficult to find anything to purchase. With the new redesign, users are now able to easily find what they want, as well as experiencing an improved ease at which items can be added to the card and purchased.




Users are also able to read more information about the products, helping them to learn about what's in season which was an important discovery in my user research.


Information about allergies was also added to help users with any dietary restrictions.

Users are also able to read more information about the products, helping them to learn about what's in season which was an important discovery in my user research.


Information about allergies was also added to help users with any dietary restrictions.

reflection

Conclusion & Learning

Completing this redesign within a three week period presented some challenges. Leaving my assumptions at the door is where I started this project. I listened and referenced back to the user persona throughout the project which helped me in design decisions such as adding a farmers' recommendations section in the filter on the PLP.


I also had some feedback in usability testing and took the time to address these minor issues before finalizing the product. As an example, the home screen had text overlay on two of the images. The readability was not very clear, so I made the decision to separate the text and image, and reorganize them in a way that was clean, clear & legible.


I found genuine fulfillment in my work for this project. It is my commitment to always producing my highest level of work and keeping the user front and center in my design thinking which helps me to deepen my understanding of the user and of people in general.


I'm excited for what's next!

research

Affinity Mapping

The information taken from user interviews was populated into sticky notes that were then organized into groups. This allowed me to see the golden threads. What are users saying and how do we now make sense of it into usable information.

This affinity map illustrates that users love shopping at local farms and connecting with real people. They value farmers' recommendations, however, majority of users had not had good experiences when shopping on farms' websites.

SYNTHEISS

Persona

I wanted to create a user persona that embodied a frequent shopper of local farms based on the information gathered through user interviews and my competitive & comparative analysis. My aim is to encapsulate the users preferences, pain points and behavior in order to more clearly define the overall challenge and need for effective redesign.

SYNTHEISS

Problem Statement

Sarah loves the personal connection and fresh produce she finds shopping at local farms but needs a better way to learn about recommended products and upcoming events because farms' websites are typically difficult to navigate and don’t effectively present their offerings.

SYNTHEISS

Site Map

Ort Farms' original website had many 404 error pages and was incredibly difficult to make any purchases, or to find relevant information about in-season produce. The site map redesign organized the website in a way that is easier for users to navigate. A dedicated section for learning about what's in season and how to use these particular products, and an easy way to find all other offerings though the 'shop' tab.

SYNTHEISS

User Flow

In order to test a users ability to enter the new website & complete a purchase, the following flow was created. This would see users navigate through the 'shop' tab and arrive at the product listing page. Users would select a pie, then be redirected to a product description page of that pie. Finally, users would add the item to their card, go to the checkout and complete the purchase.

IDEATION

Sketching

Sketching is one of my favorite parts of design. Some of the ideas I had iterated on were how to best illustrate and balance the farms' offerings with their story. Who they are and what they stand for. These questions heavily influenced the design of the home page.

ideation

Sketching

Sketching is one of my favorite parts of design. Some of the ideas I had iterated on were how to best illustrate and balance the farms' offerings with their story. Who they are and what they stand for. These questions heavily influenced the design of the home page.

IDEATION

Sketching

IDEATION

Wireframes

After completing a series of sketches and gathering inspiration as to what each page could and should look like, I began to create lo-fidelity mockups in Figma using a Macbook 14-inch frame before wiring them together to test the flow. Each page was iterated on multiple times. Tweaking, refining and working within auto layout in order to create a responsive design that was easy to navigate.

IDEATION

Color & Type

For the redesign, color was key. I aimed for a palette that truly reflected the farm: earthy greens, creams, and browns. Josefin Sans felt perfect for the typography. It's clean, readable style allowing the user to have an enjoyable experience and for the farms' message to stand out.

Testing

Final Product

Previously, users would enter the site and have to read through text heavy pages. In this redesign, a strong hero image had the intention to quickly capture the audience, while also giving immediate options to 'shop now' with a large call to action button and a clean nav bar.

Testing

Product Listing Page (PLP)

The PLP page has improved navigation with beautiful images of products for sale. This page enables users to see all 'baked goods' offerings, which is one of many options within the 'shop' tab.



Additional features on this page:

  • A filter which enables users to find what they want, quicker

  • Farmers' recommendations that speaks to users interest in what's in season

  • Transparent pricing

  • CTA which enables items to be quickly added to the shopping cart

Testing

Product Listing Page (PLP)

The PLP page has improved navigation with beautiful images of products for sale. This page enables users to see all 'baked goods' offerings, which is one of many options within the 'shop' tab.

Testing

Product Description Page (PDP)

Previously, users would find it difficult to find anything to purchase. With the new redesign, users are now able to easily find what they want, as well as experiencing an improved ease at which items can be added to the card and purchased.

Users are also able to read more information about the products, helping them to learn about what's in season which was an important discovery in my user research.


Information about allergies was also added to help users with any dietary restrictions.

reflection

Conclusion & Learning

Completing this redesign within a three week period presented some challenges. Leaving my assumptions at the door is where I started this project. I listened and referenced back to the user persona throughout the project which helped me in design decisions such as adding a farmers' recommendations section in the filter on the PLP.


I also had some feedback in usability testing and took the time to address these minor issues before finalizing the product. As an example, the home screen had text overlay on two of the images. The readability was not very clear, so I made the decision to separate the text and image, and reorganize them in a way that was clean, clear & legible.


I found genuine fulfillment in my work for this project. It is my commitment to always producing my highest level of work and keeping the user front and center in my design thinking which helps me to deepen my understanding of the user and of people in general.


I'm excited for what's next!