4-H Ontario

4H-Ontario on a Mac

Summary: 
4-H Ontario contracted Sandbox Software Solutions to redesign their outdated website.  Their website was difficult for staff to maintain, website visitors found it challenging to navigate and the site did not meet current Ontario’s accessibly guidelines.

Sandbox Team:
1 UX designer/project manager, 1 project associate, 2 web developers

Project Scope:
Project included user research, analysis of research and recommendations report creation including website features, wireframes and information architecture as well as project management of site development.

My Roles:
User research and user experience designer, Google Analytics website statistics analyst, project manager

UX Skills Used:
User interviews, surveys, workshops, persona creation, card sorts, information architecture creation, wireframing

Launch Date:
November 2020

NOTE: The user research materials, wireframes and reports belong to Sandbox Software and the client.  The visuals below were created for this portfolio to provide an idea of my thought process on specific aspects of this project.

A reference for this project is available.

Problem

Through conducting workshops, interviews and surveys of a large variety of 4-H audiences I discovered there were a few issues that were mentioned consistently.

Primary Challenges

  • Website was not AODA/WCAG compliant
  • Site contained a lot of pages and the site search feature did not function well
  • Club projects are at the heart of this organization however not a lot of information was available to the public on all 150+ projects
  • All club projects were listed on one page and the list was not searchable

    Meet Susan

    Susa

    Susan is the single mom of a 10 year old daughter named Madeline or Maddy for short. Life is always busy.  In addition to being a sales representative for a large tech firm, she believes it’s important to volunteer her time as a PTA member at her daughter’s school.

    On weekends Susan and Maddy love to watch cooking shows, and spend time in the kitchen working with seasonal ingredients.  Both love to explore new foods and are planning to plant a garden this summer in their backyard.

    Club Project User Flow

    Below is a sample user flow which outlines how a site visitor would get information about a club project.

    Susan heard about 4-H Ontario’s diverse programming from a fellow PTA parent.  While watching TV, Susan takes a moment to visit the site to find out what food or agriculture related programming might be a good fit for Maddy.

    4-H Ontario Club Project User Flow

    NOTE:  The grey box on the diagram below indicates the user flow of the original website.  All 150+ club projects were all on the same page and listed under their respective categories.  As well each project only had a 1-2 sentence description versus having its own dedicated page.

    Club Project Page Features

    One major change on the new website, is that each club project has its own dedicated website page.  These pages contained a variety of features which are outlined below.

    The features of this page template make it easier for website administrators to market projects as well as simpler for website visitors to gain valuable information about a specific project.

    4-H Club Project Layout

    Unique URL
    Each project page has its own URL which makes marketing a specific project on social media or other materials easier.

    Flexible Call to Action Button
    On project pages, this button is usually set to “Become a member”.  However this page template allows this button to be customized as needed by website administrators.

    Flexible Widget Area
    This area allows for a variety of boxes to be enabled.  Fun Facts/FAQs, photos and testimonials are all options.  Depending on what’s enabled, the layout of this area will change.

    Club Project Locations
    Projects are led by associations.  There are many 4-H Ontario associations and each has website administrative access to their own association page.  If an association is leading a project, they add it through the website administration tools, and it will show on the appropriate club project page.

    Flexible “Related Pages” 
    For project pages, this area features up to 3 related projects selected by the website administrator.  For other pages which have the same green area, the administrator can select up to 3 “Related Pages” or “Related Resources” as needed.

    Reflections

    • The project was 3/4 complete when I left Sandbox.  I would have liked to have been involved in user testing, final site tweaks and launch.
    • It was essential to offer a variety of user research techniques in order to overcome challenges (i.e. some audiences had limited internet access, therefore phone interviews were optimal versus online survey)
    • I devised a “data mapping” document for this project in order to clearly communicate the user functionality of more complex systems both from the user perspective and website administrator perspective.  This documentation provided a clear road map of what needed to be programmed by the web developers.