Web Design
Fall 2017

Permaculture Institute

This project focused on better meeting the needs of potential and new site visitors of Permaculture Institute's website by improving site navigation, site interaction, content strategy, and user interface design.

READ ON MEDIUMVISIT WEBSITE


The Challenge

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.

The Approach

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.

Goals

  • Design a responsive website in WordPress, with updated content, features, and audience 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.
  • Ensure coherent branding that aligns with the Permaculture Institute’s existing branding and marketing strategy.

Duration

16 weeks

Tools

Pen and Paper, Sketch, Whimsical, WordPress

Phases

Research, Strategy, Interaction Design, Wireframing and Prototyping, Testing, Launching

My Role

UX Strategist; Interaction Designer; UX Designer


The Design Brief

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.

Phase 1: User Research

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.

Diagram of a fictional persona representing a core user group. Diagram shows a person in her 30s holding a chicken.
Persona representing people who are generally curious about permaculture.
Document showing an older man in his 60s wearing a hat and sunglasses. The persona represents one user group of people specifically interested in Permaculture Institute.
Persona representing people who specifically visit Permaculture Institute’s site to read about and register for courses.


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.

Phase 2: Defining a Strategy

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.

Phase 3: Interaction Design

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.

Site map diagram showing the proposed information architecture, including page structure and hierarchy.
Site map.

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.

Task flow diagram showing a sample pathway a person might take on the website in order to register for a class.
Sample user flow for registering for a permaculture course. View in Whimsical here.

Task flow diagram showing a sample pathway a person might take on the website in order to apply for a diploma.
Sample user flow for applying for a diploma. View in Whimsical here.

Phase 4: Wireframing and Prototyping

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.

Set of four high-fidelity mockups of Permaculture Institute's updated website, in desktop view.
High-fidelity desktop mockups.

Phase 5: Testing, Iteration, and Launching

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.

Key Takeaways

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.

BACK TO PROJECTS
Connections are nice

Get in touch.

Whether you want to bounce ideas for a project, want to talk about design and decision-making, or just want to say hi, I'd love to hear from you.

CONTACT ME
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.