SOUTH WHIDBEY TILTH

Website redesign for local farmers market & community non-profit

ROLE

UX Designer

DURATION

April-July 2023

TOOL

Figma

TEAM

Justin Luu

RESPONSIBILITIES

User Research

UX Design

Brand Identity

Visual Design

Final Screens

0.1 DESKTOP & MOBILE WEB LAYOUT.

0.2 BEFORE, AFTER.

0.3 FARMERS MARKET PAGE.

0.4 MOBILE SCREENS

Project Overview

Summary

An outdated community website in desperate need of a revamp.

South Whidbey Tilth is a nonprofit that promotes sustainable farming and supports local agriculture. They run a farmers' market while offering educational programs to encourage community involvement in bettering the environment.

During my time studying at the UW Architecture School, I worked with South Whidbey Tilth on organizing their spaces for community use and constructing a new farmstand.

Later, I reconnected with members to redesign their website, using input from the Whidbey Island community. The goal was to create a more user-friendly site that better highlighted their mission/ personality and improved engagement with visitors.

Problem

Background

How might we redesign South Whidbey Tilth's website to inform visitors and drive more engagement/ volunteering?

The South Whidbey Tilth website was outdated and struggled to engage the community. Key information and aesthetics of the website was lacking, limiting participation.

Through this project, I aimed to redesign the site to better reflect their mission and make it easier for users to stay connected and get involved with the Whidbey Island tilth community.

Current Website/ Old

Constraints

Shared Goals, the website must abide by and align with the Tilth values and business objectives.

Community Input, new redesign must address community concerns and balance preferences from members.

Existing Content, a new website must keep the structure and content from the existing website.

Optimization; must be optimized to work on all platforms and devices for all types of users.

Research

Current Usability Test

The current site is hard to understand and even harder to use.

I conducted a moderated usability test with 4 participants in order to see the current status and feasibility of the website. Where it's goal is to spread information and draw in visitors.

The participants concluded that the site was frustrating to navigate, difficult to seek targeted information, and aesthetically displeasing due to an outdated visual design. All factors contributed to a poor user experience with the current website.

"So I'm looking for the Whidbey Tilth Farmers Market information . . . I don't know where to start, there is just a lot off the bat."

"The colors of the website are not very eye catching everything is just…. green and not the same shades either."

"Everything seems to be kind of a mess on the main page, just text and buttons everywhere, no clear section and lots of random text everywhere."

"This site looks like it was made 20 years ago and hasn't been updated in 10 years."

"Sort of just feels like there's no structure to the page, nothing is aligned, hard to focus on just one thing."

"The nav is frustrating just links to pages and there's like 10 links that pop up when you hover. I expected a more modern look to represent such an innovative organization."

"What am I looking at, why is there only one event and so big on my screen it just looks bad."

"Trying to access the site on my phone was frustrating. The pages don’t resize properly, and I couldn’t easily find what I was looking for."

"If I wasn't doing this test I probably would have clicked off the website already it just doesn't keep my attention well."

Key Takeaways

No Visual Heirarchy

Contrasted images/ text, similar sizes, and text walls make the content hard to read. No visual prominence to the website at all.

Poor Navigation

Users had a hard time finding the information they were looking for. Unclear Labeling, redundant categories, nested tabs caused grief.

Inconsistent Design

The website is inconsistent, there are alignment issues and inconsistent elements, buttons, texts, all mess with the fluidity of the site.

Content Organization

Users were frustrated at the organization of the content on the website, too many navigation tabs that hard to find what they looked for.

Ideation

Solutions

Visual Heirarchy:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Visual Heirarchy:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Visual Heirarchy:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Navigation:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Navigation:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Navigation:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Inconsistent Design:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Inconsistent Design:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Inconsistent Design:

The information architecture should minimize the effort users take to find what they are looking for. Pages should be easily discoverable.

Solution:

Eliminating redundant pages and redesigning the information architecture should be the solution.

Design Solution

Design Idea

Implimenting Solutions

I conducted another usability test with 5 new individuals. I was mainly looking to test the solutions above with how the website would work. I uncovered some areas for improvement, as shown below.

Visual Heirarchy

The original design had little visual hierarchy. The information presented was cluttered and lacked focal points. Important information like market dates and locations are buried under dense text, and there are no clear calls to action, making it harder for users to engage. Images also don't break up the content effectively, leading to a visually boring layout.

Refined the visual hierarchy of the page. Leading with the Farmers Market date/ location information, with a clear call to action to "Visit Us" for more information behind a visually pleasing image of the market itself.

Information is centered and aligned drawing the eye.

Navigation

The navigation design is overly complicated. The menu is cluttered with too many options making it difficult to find what is needed.

Refined navigation reduces the clutter and only presents users with the most important pages. Secondary links within the actual pages make the navigation more precise and streamlined.

Content Organization

Original design had no content organizatin, some card layouts but just rough text, images, and buttons all over the page. No real patter to the layout and poor alignment.

The refined design is aligned and utilizes blocking from cards, images, and text blocks to organize information on the page. More aesthetically pleasing and easier to take in information with sufficient white space as well.

Final Designs

Final Screens

Retrospective

Success Metrics

Success Metrics for the new website would be evaluated in

-Increased Engagement: Page views, Time spent on website

-More volunteer and Event Signups from the Web Page

-Positive User Feedback

Project Takeaways

Collaboration

Collaborate with users early and often in all stages of your design, this can create an understanding between the designer and the target audience.

Metrics

Keep gathering metrics and data to inform on your design, by continuing to monitor your website it can point you to a successful future design.

Grandfathered

All the information and content you need will sometimes already be presented. It just needs to be emphasized and/or organized.

Testing

Always test your ideas and prototypes with users that actually have a stake in the product, this can give you valid feedback and improvement.

Next Project

TESLA R&D PROJECT MANAGEMENT APP

DESIGN

DASHBOARD

UNDER NDA

Internal dashboard application for Research & Design projects at Tesla improving project visibility and team collaboration for smoother operations.

SEE CASE STUDY

SEE CASE STUDY

SEE CASE STUDY