Permaculture Institute, a non-profit organization that trains people across the globe in environmentally sustainable practices, needs a way to invite new and existing site visitors to study and learn with the organization.
A responsive website that clearly communicates Permaculture Institute’s offerings, allows for visitors to easily review and register for programs, and offers easy backend maintenance for site administrators.
Pen and Paper, Sketch, Whimsical, WordPress
Research, Strategy, Interaction Design, Wireframing and Prototyping, Testing, Launching
UX Strategist; Interaction Designer; UX Designer
The Permaculture Institute is a non-profit organization that provides trainings and resources to support people in learning about, and practicing, permaculture. The Permaculture Institute’s existing website was designed several years ago and was in need of a fresh look and improved navigability. This project focused on designing a responsive website with clear site navigation, search engine optimization, and reliable features for engaging visitors.
We started by developing a research-informed understanding of how key stakeholders and target audiences engage with Permaculture Institute online. I worked with the Permaculture Institute team to identify two main types of site visitors: (1) people who were specifically visiting the Permaculture Institute’s website to register for a program, and (2) people who were new to permaculture and stumbling across Permaculture Institute’s website by chance.
I developed personas to explore some of the core goals, needs, desires, and pain points of people within the two target groups. Through the subsequent design process, I referred to the personas to consider whether the proposed architecture, flows, and content would meet the needs and goals of our target audiences.
Based on the user personas and empathy maps, as well as the needs of the Permaculture Institute team, we identified three common priorities on which to focus.
First, the most important call to action on the website would be program registration. It would be essential that site visitors can easily navigate to their program of interest and successfully register for a course.
Another key function of the site would be to inform people of all backgrounds about what permaculture is, why it matters, and how it applies across sectors and industries. It would be critical that the website clearly articulates this information in a way that is exciting, enticing, and easily digestible for people, whether they are brand new to permaculture, or have been practicing permaculture for years.
Third, people access the website from across the globe, on different devices and with varying speeds of internet. It would not only be necessary for the site to be responsive, but to be lightweight, so that people with limited internet bandwidth could interact with the site without compromised speed.
After conducting a brief content audit of the existing website, I worked with the Permaculture Institute team to co-create a site map that met the primary objectives of showcasing the organization’s programmatic offerings — its Permaculture Design Courses and its Diploma Program — while offering people with an experience that is clear to understand and easy to navigating from their very first visit.
I then developed a set of user flows in order to delineate the potential paths that people would take when interacting with the site. The user flows were especially crucial to ensure that we would design the necessary pages and calls to action to allow people to easily view content and engage with the site through registering for programs and donating funds.
While we were eager to move into high-fidelity prototyping directly in the staging site, I developed low-fidelity sketches as a blueprint for the designs. There were several key pages to design: the home page, a general course offerings page, a page for each course, a registration page, a checkout page, a donations page, an about page, and a resources page. The low-fidelity sketches were key to identifying overall design direction, experimenting with page layouts, mapping key calls to action, and iterating early. I then transitioned into designing high-fidelity mockups.
We had a very lean and lightweight usability testing period that involved quickly gathering feedback to discover bugs, identify areas of structural and aesthetic improvement, and spot gaps in the design. After rounds of iteration, we launched the site in January 2018 -- and we continue to monitor and adapt the site based on patterns from visitor feedback.
Collaboration matters. Rather than being handed a design challenge and presenting a solution at some mutually agreed-upon ‘end point,’ we worked together as partners the entire time, and continue to do so. This set up not only allowed for frequent check-ins about project progress and project satisfaction, but it allowed me the opportunity to train Permaculture Institute’s team in many of design processes and strategies, including a deeper understanding and confidence with backend Wordpress administration, visual design, and troubleshooting common technical issues.
Always do research. If there had been more time and resources available through this project, I would have liked to prioritize user research through surveys and interviews. I would have recruited people who were generally interested in permaculture, ecology, environmental justice, and/or design philosophies, and would have recruited people who had previously participated in permaculture programming through Permaculture Institute. I also would have conducted thorough competitive analyses of other websites in the permaculture industry in order to develop a better understanding of the kinds of digital experiences that similar organizations and companies offer.
Gather feedback early and often. Additionally, I would have prioritized usability testing prior to the launch of the live site. Gathering feedback on proposed site architecture from people in our target audience groups would likely have informed the overall accessibility and navigability of the website. While information architecture can be reviewed and modified in future iterations, gathering input early on may have mitigated potential issues that arise down the line.