Washington Wildlife First (WWF) conducts important work on behalf of wildlife conservation, but struggles to raise awareness and gain support from a broader audience. My team collaborated with the organization to reveal underlying problems and strategically resolve them in a refined site experience that aligns more effectively with the ambitions of stakeholders and the needs of site visitors. I'm currently refining a design system and working with the team to prepare for developer handoff.
WWF is a nonprofit organization focused on reforming wildlife legislation in Washington state. Their mission is to protect fish, wildlife, and natural spaces by addressing current issues with the state's management practices, in hopes of transforming them for the better. Our team redesigned the website for WWF to optimize the experience for first-time visitors who may not be familiar with the organization.
Washington residents lack knowledge about issues surrounding their state's department of fish and wildlife. WWF wants to change this by sharing their mission with a broader audience to raise awareness and gain additional support for their work. Stakeholders include founders, project clients, and board members at WWF.
We identified a distinct path of pages throughout the site to create and test. It follows the likely experience for a first-time visitor that decides they want to take action, fulfilling stakeholder goals. The decision for this path is driven by stakeholder goals and research insights.
In order to make a confident decision about supporting a wildlife preservation advocacy organization, wildlife enthusiasts need simplicity, transparency, empathy, up-to-date information, trust, and usability. How might we advance this through the WWF site?
The team and I used a "How can we" user journey approach to brainstorm ideas for the redesign and organize our goals for resolving each problem.
I assumed leadership as we entered the design phase, as I enjoy this iterative, problem-solving process. We took a progressive advancement approach to wireframing to prioritize the essentials. I sketched multiple versions of each screen, strategizing towards WWF's shortcomings and drawing inspiration from competitors.
I stepped from low- to mid-fidelity, conducting A/B tests on various elements throughout. At a certain point, time constraints required us to adopt an agile workflow and make a strategic choice between furthering mobile versus desktop designs. After consulting with the team, I decided desktop would be the more efficient path for moving forward to usability testing, high-fidelity designs, and presenting to stakeholders.
The existing navigation fell short in emphasizing the information users need and the actions stakeholders want them to take. It caused confusion, was redundant, and omitted key elements. Our team conducted card sorting, talked through reasonings, and examined competitor navigation strategies. The restructured IA addresses previous issues, making navigation more succinct, accessible, user-centric, and aligned with stakeholder goals.
After presenting findings to stakeholders for buy-in, we began testing our defined user path: the likely experience for a first-time visitor who decides they want to take action. Below is the desktop wireflow.
We tested the mid-fidelity prototype using the same framework as our first user test on WWF's current site. This allowed us to compare KPIs and, therefore, evaluate the effectiveness of the new design.
We gathered insights based on participant responses and behavioral observations to conclude the following:
Needs improvement
Area of strength
While bringing the design to hi-fi, I knew a system with specifics for the front-end developer and future designers would be essential. I defined and documented details of the style and components in product design guidelines.
Currently, I am working on global token, alias token, and component libraries using Figma variables to ensure this system is consistent, scalable, and WCAG compliant. This system will be an efficient way to translate future design iterations to code. It works as a shared language between developers and designers by providing very intentional and defined specs of design decisions. Future designers will also benefit from this, and it is a great opportunity for me to enhance my skills.
A third round of usability testing allowed us to evaluate the success of our refined designs by using the previous framework again and making comparisons.
Needs improvement
Area of strength
To the right is the homepage – 1 of the 7 new pages we designed. It successfully captivates a diverse audience, evokes empathetic emotions, and quickly conveys WWF's mission.
We presented our prototype and findings to Washington Wildlife First and, fortunately, received outstanding feedback and overwhelming support from their team. They decided to move forward with developing this new site in hopes of sharing their mission with a broader audience, raising awareness, and gaining support.
– WWF stakeholders
Since our team operated within the constraints of a tight deadline, the adoption of an agile workflow was invaluable. This enabled us to adapt to changing needs, deliver incremental progress, and keep the project aligned with WWF's dynamic needs. Flexibility was key, as I often had to pivot and address unexpected details, honing my skill of advancing projects rapidly while maintaining a product at all times. Equally crucial was our commitment to advocating for the target user among stakeholders. Sharing our professional, research-backed expertise was vital in moments of stakeholder hesitation. We successfully identified problems and proposed user-centric design solutions that the organization was reluctant to implement.
