Removing Barriers to Sustainable Food Information
Increasing Engagement with Clarity
Tilth Alliance is a nonprofit organization based in Seattle that is working to change the way food is grown, distributed and eaten in Washington state.
Their mission is to promote healthy food, healthy earth & equal access to food. They do this primarily through educational programs and providing direct support and resources to all of the players in our food system - from farmers to eaters and everyone in between.
SCOPE
Responsive redesign
Landing page
Navigation
Registration
MY ROLES
User Research
Information Architecture
Visual Design
TOOLS
Sketch
Adobe XD
Optimal Workshop
Considering the Business
As part of my UX certificate program at the School of Visual Concepts, I worked on a redesign of the Tilth Alliance website using the following business assumptions:
BUSINESS PROBLEM
Collecting donations and registering people for classes is still mostly manually performed by volunteers, despite the ability for these actions to be done online.
BUSINESS GOAL
More donations and class registrations completed online to free up the time of volunteers to work on more high-value projects.
Understanding Users
My first step was to understand the needs and expectations of potential users of Tilth Alliance. I conducted an online survey of 14 people in the Seattle-area with an interest in food health & sustainability. In addition, I conducted a usability study on the existing site. I found that:
10
participants were aware of Tilth Alliance
but,
only
2
participants had been involved in Tilth programs
Why?
many were confused about mission & programs
Another interesting finding - the top food-related interests of the participants were Nutrition, Environmental Impact and Food Equity.
These interests directly align with Tilth Alliance’s programs, so there is opportunity to better communicate this to the community.
Synthesizing Research Results
While synthesizing the results of research, I noticed an emerging trend - there were two groups of people who were likely to engage with Tilth Alliance in Seattle.
1
Donors
Their values aligned with those of Tilth Alliance. They are able to participate financially, but might not have time to physically participate. They want to ensure programs like Tilth can maximize their social impact.
2
Participants
Those whose values align with Tilth, and are interested in taking classes, attending events or volunteering. They tend to be more interested in gardening and cooking, and are motivated to engage when this content is easy to discover.
These findings informed the development of two personas that guided the design process.
After analyzing and synthesizing all of my findings, I defined the design opportunity for this project.
Design Opportunity
How might we design a web experience that is informative and compelling and prompts users to engage with Tilth Alliance?
Improving the Landing Page
The landing page gives users a first impression of the organization as a whole. It must reflect the mission and values of the organization, but also clearly communicate points of action.
Identifying the Points of Friction
Using the personas developed from research findings, I evaluated the existing landing page from the perspective of a potential user. I found several points of friction:
Challenges:
Multiple menus
No clear path
What is "Learn"?
Desktop
Challenges:
No clear story
Content overload
Mobile too small
Mobile
Simplifying the Content
In order to tackle the problems of content overload and confusing navigation, I first performed a content inventory of the existing site. I found:
261
pages of content
17
pages of duplicate, outdated or misplaced content
49
external links
There was definitely an opportunity to re-think the site’s content and architecture. After analyzing and evaluating the content of the existing site, I removed excess content and began the process of streamlining the taxonomy of the information. My goal was to make the majority of the content discoverable quickly from the primary and secondary navigation. I also wanted to eliminate the need for a list of quick links on the landing page.
In order to understand how users would intuitively expect the information to be grouped and organized, I conducted an open card sort study of the top 3 levels of navigation. From there, I was able to outline a simplified navigation system that solved the problems of content overload & confusing navigation
Enhancing the Story
Once the navigational structure was defined, it was time to make the landing page content more compelling. During research, potential users like Amy had a hard time understanding Tilth’s message. When I evaluated Tilth’s social media presence, though, I found a wealth of engaging content, imagery that conveyed the human side of Tilth's impact, and descriptions of activities. I leveraged this existing content and used it to enhance Tilth’s story on the landing page.
Responsive design allows for mobile experience that is clear and interactive
Persistent donation CTA
Simplified navigation
Imagery that enhances story and adds a human element
Clear mission statement
Program categories with descriptions and links
Posting of upcoming events and classes with links to associated pages and sections
Embedded social media posts, which provide timely info and "follow" call-to-action
Streamlining Registration
One way the community becomes more engaged with Tilth Alliance is through the educational programs. It is important that potential participants, like the persona Jack, can easily register for a class.
Identifying Points of Friction
Again, I used the personas to inform an evaluation of the class registration section. When Jack tries to register for a class on the existing site, he finds the following challenges on the Adult Classes page:
Challenges:
Too much content
Must choose view to start browsing
"Should I read class descriptions first?"
Optimizing the Flow
The existing registration process requires too much clicking, reading and decisions. This opens up the potential for users to abandon the process. I proposed a straight path to a single class list page and eliminated upfront decisions.
Redesigning Class List Page
Next, I re-designed a single class list page that allows users control over their view through contextual controls, like sorting and filtering. The users can expand and collapse additional class information without moving to another page.
Filtering
control
Clear location
Sorting control
Class card highlights on hover
Expandable
description
Measuring Success
Using user-centered methods, I proposed a redesign of Tilth Alliance’s landing and class listing page that meets user needs and business goals. However, the real test to the success of this new design could be validated through post-launch metrics.
1
Increase in online donations
2
Conversion rate of online class registrations
3
Usability testing to determine whether solution
conveys Tilth's story
Credits:
Device mockups are from Facebook design
Persona avatars were created on GetAvataaar.com
Imagery in redesign is from Tilth Alliance's Instagram page
Website Redesign
Tilth Alliance
