Panthera Website

Challenge

When this project came down the pipeline, one of the questions was figuring out, ‘Why were they looking for a redesign?’ At very first glance, the web design was slick, the mission was well thought out and Panthera branding, logo and photo collection illustrated their mission effectively. What we found out after taking a closer look was that all the pages melded together, aimlessly wandering the site without any clear CTA and design with accessibility in mind was needed.

The goal of this project was to be able to design for Drupal, a content management system for an admin to make updates to the site, which they frequently did with new articles, campaigns, and photos. So not only did we have to collaborate closely with the client to create a site that the team could use but craft the best experience for the end user.

Research

We needed to be nimble at each stage in the project to keep up with the timelines. Developers were creating the back end environment while I designed the front end. But first, to understand the landscape, we dedicated a couple of months to foundational research before mapping out user flows and discussing potential concepts and look & feel.

The initial design research stages were cumulative, each building on the last.

Analytics

Auditing and understanding user behaviors on the existing platform to understand where users were spending the most time on the site, entering and leaving. This data shone light on the user demographics and habits on the site.

Competitive Analysis

Exploring common themes from indirect and direct competition non profit organizations.

Interviews

Surveying stakeholders and subject matter experts on their take on the development, to understand existing workflow and review feedback.

Findings

1. The build process needed to be flexible for both the client and end user. We were limited to creating a management system within Drupal. We established an amount of templates, and embeddables that the client could build their pages off of to curate a meaningful experience for the user.

2. Rethinking the page information architecture. Pages were lacking in CTAs, navigation menu made it difficult for users to find relevant information to the content they were looking for, and boost accessibility with their existing brand.

3. Creating international pages. The Panthera brand organization has a wide reach and wanted this to be operable in numerous languages and destinations.

Design and Testing

I documented and presented foundation research on the user base to Panthera leaders, designers, content curators, and researchers using Miro, a whiteboard tool to collaborate on user personas and journeys. This weekly meeting gave a place to collaborate on our findings and thoughts to shape the site.

Using their most common demographics from user research, we were able to talk about the journey and user flow a visitor would take on the site. We were able to discover and define important userflows.

After initial discovery, we were able to refine the user flow chart and craft a top level navigation for the pages of the site.

We switched gears into designing styletiles to define the look of the brand and help make some visual decisions for Panthera while we created low fidelity wireframes.

This required weekly meets with developers to gather details on the backend work and parameters on what page types were possible.

The developers, Panthera and I worked on numerous iterations of wireframes to suit limitations of Drupal. Sitewide blocks were not able to come in the body/WISYWIG of the page, and had to come after. It was a push and pull to explain how content shoud flow in these spaces without sacrificing design.

To see and find out more of the design process, please contact me.

Check out the live page of Panthera.org