Redesigning a website to enhance usability and brand recognition
Indigenous Environmental Network (IEN) is an international organization that supports environmental justice issues, wilderness preservation, and indigenous rights. There were many apparent pain points with their site. We identified the primary business goals in discussions with stakeholders: to improve site usability and develop a brand identity. This academic project was completed at the University of Washington as part of a master's level user-centered web design course.
User-Centered Web Design at the University of Washington
My Role: Designer & Researcher​
-
Created and facilitated card sorting activity and analyzed findings
-
Conducted usability tests with low-fidelity wireframes
-
Developed brand tenets and contributed to creating a cohesive and on-brand design guide
-
Collaborated with the team on competitive analysis, heuristics, persona development, and interactive prototype
The Team​
​
-
Designer & Researcher: Finn Kuipers
-
Information Architect: Meghna Nayak
-
Stakeholder Liaison & Researcher: Sudipti Garvey
-
Usability Expert: Freda Hu
-
Project Manager: Amae Kurre
​
Project & Business Goals
Usability
Improve information architecture and navigation to increase user satisfaction and trust, particularly trust with donors
Branding
Modernize the site to reflect that the organization is active and that they are an authority on important research and scholarship pertaining to indigenous environmental justice issues
Research
Competitive Analysis | Usability Testing | Web Analytics | Personas | Card Sort | Heuristics
Challenge
How might we present complicated site content that uses field-specific terminology in a welcoming and intuitive way?
Solution
Minimize cognitive load on the homepage, reduce text-heavy content by using unexpanded and expanded views, group resources for activists together, create a clear boundary between IEN's work and their collaborative work with allied organizations
Before Screencapture of IEN Homepage
.png)
Competitive Analysis
​
Key user tasks identified by stakeholders:
-
donating
-
locating reports and activist resources
-
contacting organization members
​
Our competitive analysis criteria included the key user tasks as well as navigation and content organization. We compared two similar websites (Climate Justice Alliance and Climate Network) to the IEN site.
Usability Testing
Findings:
-
The main usability issues were the inability to navigate well and discomfort with the donation flow.
-
There was a lack of trust due to the outdated site design
-
We identified a need for "bite-sized" information due to the complex nature of the site content
​
Web Analytics
We discovered a pattern of surveillance by a US government agency on pages about IEN's organizing activities. Additionally, we found that most international users accessed the site from Brazil.
​
Personas
​
​We created three personas: Philanthropist Paul, Active Member Melvin, and New Visitor Vicky. The Active Member Melvin persona lacked validity because stakeholders were still in the process of defining the member user group. The Philanthropist Paul and New Visitor Vicky personas were based on data gathered from stakeholders early in the research process.
Card Sorting Activity
Round 1: 4 Participants, 4 Completed Activities, 37 cards
Round 2: 2 Participants, 1 Completed Activity, 32 cards
​Insights
​
-
Terms were not beginner-friendly and required an understanding of environmental issues and campaigns
-
A third of the total cards were in all different categories in Round 1
-
Participants did not have mental models of how the site should work
-
There was a lack of understanding about how "campaigns", "issues", "statements", and "resources" were different
Heuristic Analysis
.png)
Challenge
Knowing that we would not be able to implement the live site following project completion, what deliverables would provide the most value to IEN?
Solution
It was important for us to understand the character of the organization so that our deliverables would have lasting value.
We created a design guide based on carefully curated brand tenets and in doing so, provided the organization with tools they could use for multiple projects in the future.
We also delivered a solid information architecture based on our research that heavily influenced the design of their current site.
Information Architecture
.png)
Selected Wireframes
Home Page
Our Work Page
.png)
Brand Tenets
Radical
IEN is a grassroots organization by indigenous people for indigenous people. IEN challenges the status quo in their fight for environmental justice.
Design Translation: powerful imagery, high contrast, bold and heavy type, images from marches
Professional
The IEN website inspires trust in the organization and its credibility in climate change research.
Design Translation: clear hierarchy, consistency between pages, close attention to spacing and grids, muted colors, special attention to Donate flow and design, transparency about donations
Authentic & Empowering
IEN represents modern indigenous communities and peoples, and rejects stereotypes and tropes. Frontline voices are brought to the forefront of the fight against climate change by IEN through major international platforms.
Design Translation: designs and imagery should always attempt to represent diversity across native communities
Global
IEN represents the largest international network of indigenous tribes by connecting activists all over the world with resources for organizing.
IEN is a credible resource for research on environmental justice issues.
Design Translation: account for pages being translated into multiple languages (English, Spanish, Portuguese), limit left justifying content
Design Guidelines
.jpg)
.jpg)
Reflection
We encountered some challenges in finding users of the site for testing even though we tried to get ahead by outlining for the client where we would need their input for the duration of the project. We recruited research participants from amongst the environmental groups on the University of Washington campus as a work around. The main obstacle to implementation was the lack of buy-in at the director level. Since the site was very content heavy, it was challenging to scope the project in a way that we could keep it within a 10 week timeframe while also adding value for the client.
​
If we had more time, we would do more usability testing on the high-fidelity version, spend more time presenting and getting client feedback. We would also spend more time choosing a color palette that passes accessibility testing. The client preferred a scheme that was not accessible, and we would have brought this point up sooner in our design process after doing an accessibility test.