Green Gradient That Fades To Transparency
Home Icon

A Website Redesign That Transformed A Charity

A 48-hour hackathon to improve website functionality evolved into a long-term website redesign and service design project with an ambitious goal to future-proof the organisation!.

Role:

My Team:

Stakeholder

Project Scale:

Tools used:

UX Researcher

UI Designer, Project Manager, Scrum Master

NWFruit - Non Profit

January 2022 - August 2022

Figma, FigJam, Optimalsort, Trello, Miro, Calendly, Hotjar

Laptop

The Challenge

“In the 30 years since NWFruit was established, much has changed. Our organization recognizes that the tools we use to connect with the public and our members need to evolve in order to be socially impactful going forward.


We’ve realized that we need help modernizing our website to improve access and engagement with our members and the public."


Celeste Frisbee, NWFruit Secretary & Project Manager

The Brief

NWFruit took part in Democracy Lab’s 48-hour Earth Day hackathon event, to partner up with skilled volunteers to help reimagine their website and user experience in the following ways...


  • Improve internal communication and organisation.
  • Design a user experience to improve public outreach and awareness
    • Understanding typical habits of users and what new users would want to do when they land on their page.
  • Design a user experience to improve access to the fruit garden and educational programming.
  • Create a strategy for recruiting new volunteers, publicising opportunities, and onboarding volunteers.
  • Create content to support the volunteer recruitment strategy to build awareness and buzz.


Thought Bubble Illustration

That's a mighty big brief for 48hrs!


eyes

48 Hours

Isn’t Long

With a huge brief and a small amount of time we needed a strategy. We needed to focus on one main deliverable for the hackathon and decide what research we could conduct in 48 hours that would be beneficial to this particular project?

What Research

Already Existed?

Prior to the start of the project, NWFruit carried out a survey amongst it's members with the following goals:


  • Which existing and potential website features are of a high priority to it's members?


  • How accessible are tools and how functional is the existing website?


  • What website content or features would be valuable to the general public or potential volunteers?


The survey was yet to be analysed so that was my starting point...


User Profile Picture

24 Participants

calendar outline icon

January 2022

Software Development Icon

Google Forms

Survey

Insights

Website features identified as as a high priority need were:

Event Tickets

Publicity of events


Study Online Line Icon

Online training

and education

Event Icon

Calendar with a

shareable link

The following tools were the hardest to locate/didn't exist

schedule gradient icon

Calendar of events, meetings & parties

Membership Icon

Membership renewal

Video Library Collection

Library of educational videos

Affinity Mapping (already?)

It's not standard practice to affinity map survey results, however, NWFruit had conducted the survey prior to the Hackathon and had included an open-ended question that received 24 in-depth written responses. Out came Miro!

"Suggest ideas for web content, or features that are not currently offered on our website, and may be valuable by the public or for recruiting new members."

Site Map

A common issue uncovered from the affinity mapping was that the existing website was difficult to navigate. Our hackathon goal was to improve organisation as well as communication, so I skipped a few steps ahead in the design process to focus on IA (Information Architecture) and created a site map to better understand the existing layout.

Quotes Icon Vector. Quotemarks Outline, Speech Marks, Inverted Commas or Talking Marks Collection. Vector Line Art Illustration Isolated on White Background.

Navigation of the fruit garden tour is confusing.

Quotes Icon Vector. Quotemarks Outline, Speech Marks, Inverted Commas or Talking Marks Collection. Vector Line Art Illustration Isolated on White Background.

There's no focal point, it's hard to navigate

Quotes Icon Vector. Quotemarks Outline, Speech Marks, Inverted Commas or Talking Marks Collection. Vector Line Art Illustration Isolated on White Background.

I couldn't find become a member or donate

Card Sorting

I devised a hypothetical, more simplified site map and conducted a closed card sort to validate the new website categories.


I planned to conduct two card sorts, one with the general public and one with NWFruit members, to observe potential differences in their thought processes. The results of the general public card sort are displayed on the right. Unfortunately, the exercise posed a challenge for many charity members, whose average age was 71, and tech proficiency low, preventing me from testing this hypothesis.

Competitor Analysis

I also conducted four SWOT analyses of competitor websites for two reasons:


1) To help the research and design team understand the industry more, having no prior orchard experience we needed to understand the "lay of the land" better.


2) To uncover competitive advantages and generate ideas for how we can improve communication and organisation through NWFruit's website.


The full analysis can be viewed here

Cloud Mountain

Orchard people

Olmstead

One Green World

SWOT

Analysis

Paper with Ripped Edge

Ideas for NWFruit

  • Breadcrumb bar
  • Contact details on every page - possibly in footer
  • Active blog or link to active insta feed
  • Search feature prominent
  • Member portal
  • Concise pages
  • E-commerce shop?
  • Infographics and animations to draw people in
  • Q&A section - not pop up
  • Promote physical orchard
  • Less text, more drop down tabs


Decorative Washi Tape
Paper with Ripped Edge

Strengths Observed

  • Good, simple navigation
  • Clear contact details
  • Strong active social media presence
  • Visually appealing
  • Good search functionality
  • Member portal
  • Short pages
  • CTA's in top third of homepage
  • Change language option
  • "ask a question" pop up
Decorative Washi Tape
Paper with Ripped Edge

Opportunities Observed

  • Regular updates = sense of community
  • E-commerce possibilities
  • Better visuals - animations & infographics
  • Less is more approach for writing part
  • Doesn’t have a physical orchard
Decorative Washi Tape
plus sign
Equal Sign

Functionality Research

I gathered inspiration from other non-profits to see how they'd incorporated communication features such as calendars and member portals into their websites. Great examples included:

Aspen Institute has a great public events feature

Good Gym has it all! A public-facing website, members portal and members calendar

Key Quantitative

Research Insights

Survey Line Icon

User Survey

Website features of a high priority to the existing members:


  • Publicity of events
  • Calendar with a shareable link
  • Access to online training and education
Website Icon

Website analytics

The page with the most views was:


Recommended Fruit Trees for the Puget Sound.


This shows the majority of traffic to the site is driven by geographical education needs.

People Playing Tug of War Glyph Icon

Competitive analyses

Similar websites have stagnant bulletin boards and event pages.


An opportunity for NW Fruit is that by providing regular updates will create a better sense of community and better buy in from website visitors

Wrapping Up

The Hackathon

After a crazy 48hrs the hackathon drew to a close and I presented our findings to the democracy lab team.


  • The website needed a full redesign, rather than just building in extra functionality, or redesigning certain pages.


  • We needed to conduct further qualitative research before any design work could commence.


  • We'd established a fantastic team and were committed to working as volunteers on the project until we had a prototype to hand over to the developers.

What Happened Next...?

  • The whole team committed to working on the project for 8 hrs a week until competition


  • As a team we needed to devise a way to work collaboratively across multiple time zones


  • We needed a way to measure the success of the project


  • We needed a new research plan!

Having a team dotted around the globe and a project of this scale we decided to implement the agile methodology of working, with Ira taking on the role of Scrum Master, a job he knew well from his professional career. Below is a screenshot from one of our weekly scrum meetings.

Measuring Success

1) Increase the number of website visitors


2) Increase the number of people attending events, having found out about the event through the website.


3) Increase the number of volunteer and member sign ups under 55 years old.


4) Higher satisfaction amongst members surrounding communication within the organisation - measured through an annual survey.

The New Research Plan...

Consisted of collecting as much qualitative data as possible through user interviews!


We had two target audiences so I decided to conduct two rounds of interviews each with different research goals.


The public was our primary target audience, but I started by interviewing NWFruit members and volunteers, as I could recruit interviewees easily and they would provide insights into problems they and NWFruit faced.

Member

Interviews

Research Goals


  • To better understand the functional needs and requirements of a members only portal


  • What problems the members currently face within the organisation and how they currently solve them. Not necessarily website-related


  • How members think NW Fruit is perceived by the general public and how they’d ideally like to be perceived


  • What they think NW Fruit does well/better than similar organisations


  • Their own experiences and behaviours surrounding volunteering, donating, learning, blogs and managing calendars.


User Profile Picture

8 Participants

Software Development Icon

Calendly & Zoom

Clock

45 - 90 mins each

The full interview script can be viewed here

Affinity Mapping

(round 2)

To conduct more effective user interviews, I always record sessions to stay focused on meaningful dialogue. After each interview, I review the recording and document key comments and observations.

Slight Problem...

Having been taught that sorting by the groups below was a good place to start, I soon realised these categories worked better with smaller data sets. It was hard to find common themes with such a large amount of data as groupings were too large, see below

Change of

Approach

I had more success spotting trends and patterns when organising the data into categories based on features, functions and the interview goals. This round of mapping generated 20 different categories, 3 of which are displayed below and the full affinity map can be viewed here

Events

Education

Website needs

Organising Insights

Key insights were split into the following 3 groups as this seemed like a logical approach to addressing them. The full list can be viewed here

Red

Service design issue. Solutions to be determined by NWFruit Board of Directors

Blue

Mixture of service design, CX, UX and UI.

Whole team approach needed to find solutions

Black

CX, UX, UI issue. To be fixed by research and design team

What We Can’t Fix

One of the interview goals was to understand what problems the members faced on a day to day basis to see if we could solve those problems through features and functions of the new website.


Whilst many of the issues uncovered could be solved by the website redesign team, there were a number of problems that came to light that needed solutions determined by the NWFruit Board of Directors. These included:


  • What benefits does a paid member get over a volunteer?


  • The orchard is a demonstration place. Educating the younger generation and passing on skills by “doing” should be the main education focus.


  • What the onboarding process will be for new volunteers?


  • Organisation needs to revisit and review the vision and mission statement


What We Can Fix

  • Major concern as to how difficult maintenance of the new website will be
  • A real need for younger volunteers to get involved
  • The community aspect of the organisation is really important and needs shouting about
  • Members' main motivation to join the organisation was education - to learn how to care for fruit trees at home or to utilise or develop their special horticultural skill set
  • A lot of members and volunteers don't want to get involved with the back-of-house jobs
  • Tabs on the website aren’t helpful and it’s difficult to find information
  • “Help” is the motivation to donate, however, people are much more likely to donate, if they have a personal connection to the organisation
  • Add more context to the donation page to increase donations
  • Volunteer and membership benefits need to be more clearly defined

Organisations Strengths

In UX, we tend to focus on problem-solving, but it's essential not to overlook the strengths. Identifying NWFruit's strengths was crucial, as we wanted to integrate them into the website redesign.


  • Community and camaraderie “When people move to a new town they look for the kind of congregation NW Fruit offers”


  • The physical orchard


  • The testing of varieties and techniques - not being done anywhere else in USA


  • Body of region specific knowledge is vast amongst the members


  • Virtual tour

General Public Interviews

Research Goals


  • Understand their awareness level of NW Fruit and other similar organisations?


  • Discover how people obtain horticultural advice, in particular any apps or websites that are used


  • Understand the motivation behind becoming a member or volunteer for a non-profit or charity, and uncover pain-points and frustrations people have experienced as a member or volunteer


  • How people find out about events and general interest in virtual tours


  • What motivates people to donate to organisations and what deters them from doing so
User Profile Picture

6 Participants, under 55, interest in gardening, volunteer experience

The full interview script can be viewed here

Clock

45 - 60 mins each

Software Development Icon

Calendly & Zoom

Affinity Mapping

(round 3)

This time round I interviewed 2 fewer people and kept the interviews shorter to make the analysis more manageable, so grouping feedback by behaviours and attitudes was possible.

I also grouped by features and functions as this proved effective with the previous affinity mapping exercise and was again useful this round. The full affinity map can be viewed here

Social media

Donations

Climate change

Apps/podcasts

Events

General Public

Insights

  • Volunteering faces a time commitment barrier


  • Volunteering challenges include lack of training, onboarding, and organisational issues


  • Personal connections drive donations


  • Young people donate time, not money


  • Credit cards are preferred for donations; diverse payment options are necessary


  • Charity status and financial transparency are crucial for trust


  • Trust in NWFruit is linked to Washington State University's reputation


  • In-person gardening advice is trusted, but most turn to Google


  • Reputable sources are preferred over the top Google listings for online research


  • Casual research occurs on phones; extensive projects are on desktops


  • Facebook is how people hear about events and keep track of what they’re attending


  • Only interest in newsletters would be if they were a member. Insta accounts and podcasts favoured over blogs

User Personas

opted for personas instead of archetypes for this novel product and unexplored problem space. This approach allows the design team to empathise with users and base decisions on their needs. Sabena, our main persona, emerged from non-member interviews and will guide the design as the primary user. Carl, derived from member interviews, serves as a secondary user.

Woman Planting Rooftop Garden
Senior Man


Sabena

The "sustainable" lawyer


Woman Planting Rooftop Garden

42

Mount Vernon




  • Wants to learn how to care for her fruit trees from a reputable, trustworthy source.
  • Is new to area, has more free time than before and is keen to feel part of a community.
  • Very passionate about sustainability and combatting climate change.

Sabena recently moved to Mount Vernon with her partner looking for a quieter more simple life having lived in San Francisco for the past 20 years. She's interested in sustainable living and is excited about the prospect of growing her own food on the half acre of land they now own. There are already a few established apple and pear trees in the garden however she doesn't know anything about caring for them.


Historically Sabena always called her mum to ask for horticultural advice, however the climate in Washington State is unique to America and her mum isn't able to provide solid advice.


Sabena is a lawyer by trade and is highly organised, very curious and likes to know all the facts and background before getting involved with charities or non-profits.



  • Challenging herself and learning new skills
  • Seeing progress
  • Learning through reading and videos
  • Tactile experiences, being able to see, touch, taste and smell things
  • Communicating through slack or Whatsapp


Likes

Aim at Target
Applicant
Peace hand sign

Goals & Motivations

A bit about Sabena...

  • Having her time wasted
  • Poorly organised organisations
  • Lack of training in new situations
  • Poorly designed and hard-to-navigate websites
  • Charities that aren't transparent with impact or money
  • Virtual tours - get me on the ground1
Worried Person

Frustrations

  • Organised
  • Efficient
  • Extrovert
  • Fact checker
  • Manages her life via her mobile or apple watch
  • Uses her laptop for in depth research projects
  • Prefers podcasts to blogs
  • Planning and organising
  • Research and analysis
  • Interpersonal


  • Sustainability and the environment
  • Social equality

Skills

Tech Savviness

Personality

Interests

Senior Man

Personality

Applicant

A bit about Carl...

  • Very eager to learn new things
  • Learns by doing
  • Loves to combine his passion towards a social cause with the work they do

Carl has been a volunteer for more than 5 years with NWFruit. He loves to educate himself on fruit gardens and enjoys being a part of the community. He loves connecting with people, learning from them and supporting them in their learnings as well. He values in-person touch over virtual life and lives close by which makes it easy for him to volunteer frequently.


He's a bit tech savvy and has offered to support the organization with computer related work, however he is definitely someone who wants to get his hands dirty at the fruit garden and not be behind a desk all the time.


He looks forward to his work days at the organization and is also very keen on bringing in new younger volunteers, helping to train them in their roles and continue building a nurturing community at NW Fruit. =

Tech Savviness

  • Is knowledgeable about IT/computers
  • Has basic software and hardware knowledge to figure out how to run a new computer or mobile application.
Peace hand sign

Goals & Motivations

  • To have a website which is easy to maintain and update on regular basis.
  • To continue the community and social aspect at NW Fruit and see it grow through events, tours, and increasing the number of new volunteers.
  • To educate himself and learn new things by being able to quickly and easily navigate the website to find information and resources.

Interests

  • Continue developing their horticultural skill sets


Carl

The "learn by doing" kinda guy!


67

Mount Vernon

Retired



Worried Person
Aim at Target

Likes

Frustrations

  • Be a part of demonstration organization where he gets to learn by doing
  • Community support
  • Events to learn and meet people


  • Has a very hard time finding information on the current website.
  • There aren't enough volunteers at the organization to keep maintaining the orchard.
  • Is unable to satisfy his learning appetite. The website has old information and hasn't been updated in a very long time.

Skills

  • Knowledgeable on horticulture
  • Information Technology
  • Collaboration and team work


Unlocking success with a friction free onboarding redesign

90% of users who downloaded the mobile app dropped during the onboarding journey. I designed a friction free, “try before you buy” experience with the goal to reduce this number to 60%.



Role: UX Designer

Stakeholder: Da Vinci (Macademia)

Industry: Ed-tech, Entertainment

iPhone Frame
iPhone Frame
iPhone Frame

Coming VERY soon!

A native mobile app with the mission to make finding financial advice easy and accessible for millennials. As the sole UX/UI designer I was responsible for all research and design work.




Role: UX/UI Designer

Stakeholder: SET

Industry: Finance

Let’s Chat!

Message Envelope
Call Symbol

+447404588302

Briefcase Glyph Icon