Sherry Strydom
UX designer

Fresh & Local

eCommerce website allowing shoppers to purchase produce straight from the farmers

Purchase goods from your local farmers

An eCommerce website targeting the eager shoppers in the US

It is no secret that with the recent pandemic people have started shopping more online. Moreover, the average shopper has become more picky with their choice of shopping platform. When there's so many sites to choose from, you've got to be unique and deliver a state of the art shopping experience.

Rapid Farm have decided to allow shoppers to purchase farm produce straight from the farmers (without a middle man fee), when they guarantee the quality and freshness of the produce they buy.

I was recruited to restructure the website's UX and suggest an alternative, more intuitive interface

The Guidelines

  • Must be intuitive and easy to use

  • Portray the company's agenda - quality, freshness & quick delivery

  • Allow one click purchase

  • Encourage shoppers to open an account and reorder on a weekly basis

  • Create a unique mini-site for farmers to present their produce within the marketplace

Lots to do. Let's get started

Research
Fresh & Local eCommerce Website

The Existing Website

The first task in the project was to analyze the existing website and see what we have to work with. We sat down for a long meeting to discuss the various functionalities that exist plus the ones we would like to add. Since the website was already developed (yet not launched) we tried to see how to redesign the UI without having the need to reconstruct the back end.

Our Conclusions

  1. We need a new & simple navigation method

  2. New features need to be added for both UX and retention purposes

  3. User account need to be created

  4. All-around UI design upgrade need to be done to support the vast amount of new screens & functions

  5. We have to keep it simple, friendly and enjoyable

Fresh & Local eCommerce Website

Personas

Based on the market analysis done by the client, we generated a few persona cards demonstrating the characteristics of the market we would like to target in the POC. We referred to them throughout the entire product development process.

We've divided the market to 2 main types of people -

  1. Families - Parents who would like to purchase healthy, premium products but lack the time of going to an actual store

  2. Young individuals - Mainly vegans or vegetarians interested in purchasing quality produce on a weekly basis

Competitors Analysis

We have conducted a wide competitors analysis when we focused on US based companies - old or new, claiming to provide the same service as Fresh & Local

The main focus of our search was on the following

  • UX & UI Analysis - How intuitive the competitors' website is? Did we fully understand the navigation method and what was expected of us as users to do?

  • Functionalities - Does the competitor allow various functionality that is crucial to users when online shopping?

  • Variety - What's the variety of products like? How many farms can you purchase from within the marketplace?

  • Added Values - We have compared our added values to the competitors' which could also be used as a feasibility test

Fresh & Local eCommerce Website
Requirements

Customer Journey

To understand how customers find and interact with the service, we created a Customer Journey Map. Most eCommerce websites have a similar customer journey map. Despite this, we added a few added values that act as additional steps in the process - as to improve the experience on the website.

The journey map helped us identify the major pain points in an online shopping experience and pre resolve them by drafting various technological solutions for each point. Moreover, it helped us anticipate user's expectations and wireframe accordingly.

Fresh & Local eCommerce Website
Fresh & Local eCommerce Website

Flow Chart

Once we have concluded on a navigation flow for the user, we have created a general flow chart

Fresh & Local eCommerce Website

Sketches

I usually start the design process with low fidelity sketches. This is the way I iterate through many design options quickly.

Before moving onto creating the wireframes on my laptop, I sketch out the main wireframe to make sure we have all functional specifications covered. Usually it takes about 2-3 drafts and lots of blank sheets of paper to get it right.

Wireframes
Fresh & Local eCommerce Website

Wireframes

The wireframes were created based on all the previous stages when I focused on the initial guidelines. We chose to illustrate the site based on a few crucial points -

  • The brand is still unknown to the public, thus needs to increase awareness - to do so, we created a wide home page, allowing the user to learn more about the brand before making a purchase

  • Hard sale VS soft sale - The category & product screens were created with user in mind, encouraging the user to purchase but also presenting useful information

  • Farms are given the ability to design their own mini-site, thus encouraging farms to become a part of the community

  • My account area gives a set of added values for the end client such as real-time package tracking, order cancellation and one click customer service chat

  • Overall navigation method is set to be intuitive and simple with a low learning curve

View the full project

https://invis.io/Q4YU3WFMW8K

7
Iterations
39
Screens
112
Hours Completed
35
cups of coffee