350 Seattle
350 Seattle is nonprofit based out of Seattle, WA that works towards climate justice.
This project was done in Design For Passion Summer Jam with University of Washington during Jun 23 - Aug 23.
Project Brief
Role
UX Design & Research
Duration
9 weeks
Stakeholders
350 Seattle
Collaborators
Simon Sun, Shaun Kalweit, Ayush Choudhary
Context
Have you ever felt confused or frustrated while using a non-profit website?
350 Seattle is a city specific climate justice movement which is born out of a nationwide 350.org mission.
The website was build a decade ago on Wordpress and lacked user-friendly and intuitive content that would engage existing and prospective supporters.
Keeping this issue in mind the website owner, Ben Jones wanted our team to conduct user research and website redesign to enhance the user engagement process.
Objectives
This research initiative aimed to improve the 350 Seattle website for enhanced user experience and engagement.
01
Learn how users of varying interest in climate change would approach the website and find useful content and action items to engage with.
02
Create design prototypes for different sections of the website with easy navigation and digestible content.
Timeline
This was a 9-week design jam, where each week was dedicated for specific activities that each of our member committed to perform asynchronously, followed up by weekly discussions amongst ourselves and with the client, Ben Jones.
.png)
Problem Space
Homepage
The homepage lacked clear knowledge about the organisation and inconsistent design.
Cards and CTAs
The cards lacked design principles and had mere labels without clear CTAs
Volunteer Form
The volunteer form did not provides information about what to expect from 'Join the movement' and how would lead to a much longer form taking their personal infromation.
Website Audits
GOOGLE ANALYTICS
In order to understand the existing user engagement with the website, we analyzed three recent Google Analytics reports (January, May, and June 2023). The most interesting findings from these reports pointed to the sections or pages of the website that the users were most interested in navigating. Based on the amount spent on that particular section or page and number of engagements, we found the following pages as the most engaged ones in the past 6 months of the year 2023.
01 JOIN US
02 ABOUT LEADERS
03 CALENDARS
04 ABOUT MISSION AND VALUES
05 SOLUTIONS
HEURISTIC EVALUATION
The heuristic analysis, conducted using the Nielsen Norman Group's 10 design heuristics, revealed several areas of the 350 Seattle website that warrant attention for improved usability.
Visibility of System Status​
​
ISSUE:
-
The current way that information and pages are organized often makes it difficult to find information.
​
SOLUTION:
-
Revise the information architecture, organizing pages in a way that meets user expectations.
Recognition Rather than Recall​
​
ISSUE:
-
The volume of text places a considerable cognitive burden on the user.
​
SOLUTION:
-
Pare down to only the essential text.
-
Create stronger text hierarchy for readability.
-
Implement icons and visual elements instead of text when possible.
Aesthetic and Minimalist Design
​
ISSUE:
-
Visually, the website is text-heavy and lacking in consistency, hierarchy, and contrast.
​
SOLUTION:
-
Update aesthetics and implement a design system to ensure visual consistency across the website.
Help users Recognise, Diagnose, and Recover from Errors​
ISSUE:
-
The website does not have a 404 error page, taking users to a blog post instead.
​
SOLUTION:
-
Create an error page for instances when the requested webpage cannot be reached.
COMPETITOR ANALYSIS
In order to gauge the effectiveness of the 350 Seattle website's user experience, we conducted a competitor analysis, evaluating similar platforms within the environmental activism domain. This analysis served to understand industry best practices, identify potential gaps, and extract insights that could inform our redesign strategy.
Competitors evaluated were eko.org, dailykos.com, and stopthemoneypipeline.com.
.png)
.png)
DEMONSTRATING IMPACT​
​
We observed a consistent practice of featuring and highlighting elements that showcase their impact or achievements. This often includes incorporating statistics, showcasing successful initiatives, and prominently displaying press releases.
​
DESIGN IMPLICATION:
-
Create a dedicated section on the homepage and potentially a new page to showcase impactful statistics, successful initiatives, and significant milestones. Utilize engaging visuals and succinct narratives to convey the organization's accomplishments effectively.
​
ONLINE CAMPAIGNS​
​
The other websites effectively emphasized their online campaigns through prominent placement on their homepages, making them difficult to overlook. Dailykos went as far as using popups to call attention to campaigns.
​
DESIGN IMPLICATION:
-
Utilize attention-grabbing visuals and strategic placement to highlight online campaigns on the homepage.
-
Keep consistent pages for campaigns.
​
VISUAL APPEAL​
​
It's evident that some competitors have placed emphasis on creating visually appealing interfaces. These websites effectively use imagery, color schemes, and layout to convey a sense of professionalism and engagement. The visuals play a crucial role in drawing users in and conveying the organization's values, achievements, and impact.
​
DESIGN IMPLICATION:
-
Incorporating similar attention to aesthetics to the 350 website can enhance its visual appeal and contribute to a more compelling user experience.
Interviews
PARTICIPANTS
We engaged in detailed interviews with four participants. One participant was entirely new to 350 Seattle, while the other three had limited involvement (attending 1-2 in-person events and engaging through the newsletter).
All participants identified as tech-savvy women, aged from late twenties to mid sixties.
APPROACH
The user interviews were conducted remotely via Zoom, with each session lasting approximately 40 minutes.
During the interviews, participants were asked to access the 350 Seattle website and share their screens to enable us to observe their interactions. We encouraged participants to think aloud, articulating their impressions, thoughts, and emotions as they explored the website. To gain a comprehensive understanding, participants were assigned specific tasks related to navigation, information retrieval, and engagement.
POSITIVE FINDINGS
Multifaceted Approach
Users found the wide range of involvement options and approaches to climate activism to be appealing."I like that they are getting involved in so many different ways against the climate crisis...attacking the climate crisis through various means and methods, so there's so many ways to get involved and educated." – User C
Mission Alluding to Collaboration
The organization's mission and messaging on the website alluding to cross-movement power and collaboration with diverse groups received favorable recognition from one participant.“The subtext to me is that we're trying to work with other groups, we're not just a bunch of white people chaining ourselves to trees.” – User B
PAIN POINTS & OPPORTUNITY AREAS
#1 PRIORITY: Lack of Clear Pathways to Involvement
All participants had trouble finding paths to engagement opportunities due to the website’s complex information hierarchy. Participants sought out centralized locations on the website with information on how to get involved, but found much of this information to be scattered and buried throughout the website."I think if I were to come here...I would want to get involved...I think it would just be cumbersome to figure out how." – User C
#2 PRIORITY: Absence of Showcased Accomplishments
All participants indicated a desire to see the organization's past achievements, successful initiatives, and tangible impact on the website. This was an important aspect when participants evaluated the site from the perspective of someone debating whether or not to get involved with 350 Seattle.
"I think it would be great to know what they have done in the past. That's a way to get really excited and inspired about joining a group. Like '...we helped convince this representative to agree to this bill, and this is what the bill did.' I'd say 'wow, that's evidence of what they did actually working’...That would inspire me to actually join the group." – User C
#3 PRIORITY: Lack of Textual Clarity and Conciseness
-
Volume of text: participants struggled to quickly grasp essential information due to the volume of text with little organization or hierarchy.
-
Values prioritized above logistics: after perusing the website for some time, User A described the content as “vague”, and User C similarly described it as “values-based” – they felt that the website should present more specific information about initiatives, the organization itself, and how to get involved.​
-
Ambiguous page titles: most participants indicated confusion caused by ambiguous or unclear names for website sections. Naming conventions at times failed to accurately​ encapsulate the content contained within those sections, resulting in users navigating to sections that didn't align with their expectations.
Design Recommendations
NEW INFORMATION ARCHITECTURE
-
Clear navigation: streamline the navigation menu by categorizing sections logically, based on user needs. Prioritize essential sections like "About Us" and "Get Involved" for quick access.
-
User-centric labels: use descriptive and intuitive labels for menu items, avoiding jargon or internal terms that might confuse users. Ensure the labels accurately represent the content within each section.
-
Consistent layout: maintain a consistent layout across pages, making it easier for users to understand the structure and find information consistently.
PROVIDE CLEAR PATHWAYS TO INVOLVEMENT
-
Centralize information: create a centralized section where users can easily explore various ways to get involved. (Such as the “get involved” landing page we designed.)
-
Events and calendar: ensure the events calendar is easily accessible and up-to-date. Consider both in-person and virtual events, along with comprehensive details about each event, such as purpose, location, and time. In addition to that, each event can have details about it like what can the volunteers expect, what supplies to bring, etc.
-
Highlight actionable items: avoid burying items like sign-up forms, individuals to contact, and other action items related to getting involved within a page - place these items in a noticeable location toward the tops of pages so that they are not missed.
SHOWCASE IMPACT
-
Showcase impact on homepage: dedicate a section on the homepage to showcase successful initiatives, achievements, impactful statistics, and/or succinct narratives, drawing attention to the positive change facilitated by 350 Seattle.
-
New page: Create and maintain an updated "Impact" or "Accomplishments" section to ensure users have access to the latest information about the organization's achievements. This page could also contain information about the organization’s history and ongoing efforts.
STREAMLINE CONTENT AND IMPROVE CLARITY
-
Information hierarchy: Organize content with clear headings and subheadings to allow users to quickly identify and navigate to relevant information.
-
Bulleted lists: Utilize bulleted lists to break down information into key points, making it easier for users to grasp important details at a glance.
-
Highlight key details: Use bold or italicized text to emphasize crucial information, ensuring it catches the eye during scanning.
-
Visual elements: Incorporate visuals like icons, images, and infographics to complement text and convey information visually.
-
Summarize with teasers: Provide concise summaries or teasers of longer content, allowing users to decide if they want to explore further.
ENHANCE VISUALS AND IMPLEMENT A SYLE GUIDE
-
Visual Consistency: Implement a style guide that outlines color palettes, typography choices, and consistent design elements. Following a guide ensures a unified and polished appearance across all pages, boosting brand recognition and reflecting professionalism.
-
Whitespace and Layout: Utilize generous whitespace to improve readability and create a clean, organized layout. A well-structured page with proper margins ensures a pleasing and comfortable browsing journey.
-
Engaging Visuals: Utilize images, icons, and graphics strategically to support content and engage users.
Information Architecture
Mid-Fi Prototypes
HOMEPAGE
.png)
WHAT DO WE DO?
GET INVOLVED
JOIN US (VOLUNTEER)
%20Rewamped.png)
Style Guide
GRIDS AND SHAPES
FONTS
COLORS
STYLE GUIDE IN ACTION
Learnings
Keep the platform and medium in mind while designing
​
During ideation for this project, we thought of different elements and design templates that would have a higher aesthetic and usability value, although due to the limitation of the website being built on Wordpress, we had to limit our designs within the considerations of the website.
Give qualitative experiences higher value than usability in the initial research phase
​
Initially, we had created a research guide in order to evaluate the basic usability of the website, but as we went through with the interviews, we realised that focusing more on the experiences and expectations that participants had with a not-for-profit platform was more crucial than determining usability while rethinking the website design.