UX Case Study: Permaculture Institute Website Redesign

How might we get people interested and invested in studying and practicing permaculture?

Demonstration of siphoning water during a permaculture course.

The Challenge

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 redesigning the Permaculture Institute’s website with a new WordPress theme, clear site navigation, search engine optimization, reliable features for engaging visitors (including e-commerce,) and content that showcases the Institute’s extensive collection of media.

Goals

  • Redesign the Permaculture Institute website in WordPress, with updated content, features, and calls to action/user interactions, including functional e-commerce for class registrations.
  • Define clear, logical information architecture so that people can better navigate and interact with the new site.
  • Optimize the new site for major search engines to support efforts to improve site traffic.
  • Ensure responsive design to fully support the different needs of customers viewing the site on various screen sizes (e.g. mobile, tablet, desktop.)
  • Ensure coherent branding that aligns with the Permaculture Institute’s existing brand/marketing strategy.

Guiding Questions

  • How might we improve the way current and new visitors engage with the Permaculture Institute’s website?
  • How might we create a fresh website that (1) is easy to use, (2) is easy to maintain, (3) supports visitors in taking actions, like registering for classes, and (4) is consistent with the Permaculture Institute’s existing brand identity?

Process

GOALS, STRATEGY, & SCOPE

  • Clarify and articulate stakeholder goals and needs for site redesign.
  • Review and assess status of existing site.
  • Articulate the target audiences (current and future/desired audience.)
  • Develop a research-informed understanding of how key stakeholders and target audiences engage with Permaculture Institute online.

CONTENT STRATEGY + INTERACTION DESIGN

  • Design and review proposed information architecture for new site (e.g. site map).
  • Design and review user flows for key tasks, including course registration and payment.
  • Discuss and review content strategy with client.

BUILD, OPTIMIZE, & TEST

  • Design high-fidelity prototype directly in WordPress, using selected theme.
  • Edit, optimize, and upload media files (e.g. resize/crop, adjust resolution.)
  • Load, format, and publish pages with selected text and media content.
  • Optimize each page for search engines.
  • Set up site analytics to capture data on site traffic.
  • Conduct usability testing to identify potential issues/pain points people may encounter when using new site.

LAUNCH, MONITOR, & EVALUATE

Go live with updated site and troubleshoot technical issues as needed.


User Research

While time and resource constraints limited me from conducting in-depth primary research, I worked with my client to identify two main types of users: (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.

The user personas served as crucial anchor points throughout the design process — as I proceeded with interaction design and prototyping, for example, I referred to the persona to consider whether the proposed architecture, flow, and content would meet the needs and goals of our target audiences.

Defining a Strategy

Based on the user personas and empathy maps, as well as the needs of my client, we identified the following common priorities on which to focus:

  • The most important call to action of 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.
  • 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.

Key metrics for the success of the design included:

  • Overall increase in site traffic by 50% over six months
  • Increase in program registrations by 25% over twelve months
  • Increase in customer donations by 25% over twelve months
  • Decrease in errors with class registration and payment by 50% over twelve months

Interaction Design

I worked with my client 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. After conducting a brief content audit of Permaculture Institute’s existing website, I developed a site map to clearly define the information architecture and to help steer the site layout.

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 program information and register. They were also important to map out how people would engage in secondary interactions, like contacting the organization and finding resources to learn more about permaculture.

With the site map and user flows in hand, I was ready to move into wireframing and prototyping.

Wireframing and Prototyping

While we were eager to move into high-fidelity prototyping directly in the staging site, I spent some time developed low-fidelity sketches as a blueprint for the design in browser. There were a few key templates 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. The templates were also valuable because many of the sites’ subsequent subpages could be easily designed using the defined templates.

I quickly moved from sketching to prototyping in browser, and with the help of the WPBakery Visual Composer plugin, I was able to easily design pages as outlined in the sketches. Moreover, since the Visual Composer requires no coding skills, I was able to teach my client how to use Visual Composer along the way, so that he’d feel comfortable making edits where needed. The drag-and-drop functionality of Visual Composer, along with live previewing capabilities, made the prototyping process much more efficient than the traditional WYSIWYG (What You See is What You Get) WordPress editor.

This project involved migrating content from the old site to the new site; because most of the content already existed, the project required minimal emphasis on content strategy. The client’s overall goals for content was to be able to retain existing content — blog posts, language about permaculture, course descriptions, and educational resources — while ensuring that the site would feel crisp and free of clutter.

My client and I concurrently worked on the high-fidelity prototype; he curated images and set copy, while I prepared the page templates, set hyperlinks, curated iconography, and designed the navigation menu. Through this truly collaborative design process, we were not only able to ensure that the client’s experience as the site administrator would be smooth and enjoyable, but that we could discuss, and ultimately reach consensus, design decisions along the way.

We were fortunate to work with a WordPress theme that had built-in responsive design. I was able to design page layouts on one screen, and that the designs would essentially automatically account for smaller screen sizes and that elements would stack and resize as needed. However, there were some instances during the testing phase in which we identified elements that were not responsive, and had to make design adjustments to resolve the issues.

The scope of the project did not involve branding and marketing strategy. My client had worked with another designer to develop a logo and style tile, so I worked with these existing tools to shape the visual design of the product. Because it was a collaborative design process with my client, we agreed that he would lead many of the visual design decisions, including fine-tuning the color palette and selecting typography, while I would work to ensure consistency in tone and ease of use within the overall user experience.

Testing and Iteration

Due to resource constraints, including our tight timeline, my client and I opted for 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. We had co-designed the site in browser using a staging site, and a common bug we encountered was broken links. With the help of the Velvet Blues plugin, we were able to automate many of the link corrections, but made several manual corrections as well.

Another priority area for testing was with payment for courses and for donations. After setting up and integrating Woocommerce with PayPal, I successfully made two small purchases and verified that the Institute received the payments.

While we will continue testing and monitoring the site after launch, my client and I felt that the site was ready enough to launch. Taking the adage “perfect is the enemy of done” to heart, we pushed the site from staging into its live state.


Key Takeaways

I was especially excited by this project because it was a truly collaborative endeavor with my client throughout. 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 my client in many of design processes and strategies, including a deeper understanding and confidence with backend Wordpress administration, visual design, and troubleshooting common technical issues.

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.

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. I would have also conducted usability testing with the high-fidelity prototype of the website pre-launch, especially with a focus on content strategy and interaction design, to identify any key errors that people might experience when completing core tasks, like registering for a course. While I will continue to monitor the assess the site post-launch, I recognize that the limited research and testing throughout the initial design process may result in fine-tuning in the future.

Like what you read? Give Erika Harano a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.