Developing a user-centric platform for climate displacement discourse
Climate Change Adaptation, Dispossession and Displacement (ADD+)-Website design
Project Overview
A comprehensive website design project for a newly funded academic research initiative focused on climate change adaptation, dispossession, and displacement.
Project Details
Role
Web designer, UX researcher
Duration
6 months
Responsibilities
Web Design, Branding, User research, Information Architecture, lo-fi & hi-fi designs, prototyping, usability testing
Tools Used
Problem
ADD+ is a newly funded academic project that needs to establish a comprehensive website for both external and internal users. The project lacks a digital presence to showcase their research findings on climate change adaptation, dispossession, and displacement, making it difficult for stakeholders, sponsors, and interested researchers to access important information and connect with project proponents.
Outcome
Successfully designed all unique pages for the ADD+ website, establishing a consistent design system and clear information architecture. Achieved 100% stakeholder satisfaction with unanimous consensus on the final design direction. The project now has a professional digital presence that effectively communicates their research impact to both academic and general audiences.
Key Results
Stakeholder Satisfaction
Complete consensus achieved on final design direction
Navigation Efficiency
Improvement in user ability to find team members and research materials
Compliant
Across 100% of UI components.
Process
Empathize & Define
- Stakeholder interviews
- Competitive Analysis
- Painpoints
Ideate
- Mood-boarding
- Information Architecture
- lo-fi designs
- hi-fi designs & prototyping
- branding
Prototype & Test
- Final designs & prototyping
Research & Analysis
Stakeholder Interviews
As ADD+ is a new project with no existing outputs, I conducted weekly client interviews to gain a deep understanding of what they wish to showcase on the website (and how). I also interviewed potential users of the website to better understand how best to meet user needs and make the website intuitive.
Insights from Client Interviews
Design Requirements from Stakeholders
For this project, I communicated thoroughly with the project's social media team (over 5 people), and it was crucial for all of us to come to unified consensus regarding design requirements. Below are the key specifications identified:
Intuitive People Directory
Make their 'People' directory as intuitive and accessible as possible for easy team member discovery.
Professional Academic Design
Clean professional looking design which clearly demonstrates the project's academic nature.
Comprehensive Content Pages
Required pages to provide project overview, display future academic papers/outputs, project media, and blog posts.
Advanced Search & Filtering
Website needs search and filtering options to find required contacts/team members easily.
User Research Insights
Insights from user interviews
I met with two students at the University of Waterloo (Master's and PhD students), who frequent such websites on a regular basis. They helped me understand the potential users better and cater the website content and design to their requirements. Below are the insights gained from these interviews:
- Users require comprehensive, easily navigable research materials
- Users would love to see legal frameworks, policy analyses, and community narratives are important.
- Open-access datasets and reports would increase the site's usefulness.
- Users want to see ground-level community engagement
- Clean, professional website design
- Advanced search and filtering capabilities
- Multimedia integration (videos, infographics, interactive maps)
- A well-organized repository of research would be beneficial.
Competitive Analysis
TBTI (Too Big To Ignore)
Strengths:
- Robust global network fostering collaboration among researchers and practitioners.
- Diverse content formats, including articles, videos, and reports, enhancing user engagement.
Weaknesses:
- Lacks interactive elements, such as forums or discussion boards, to facilitate real-time engagement.
TBTI website analysis
Resilience Research Centre
Strengths:
- Extensive research methodology documentation
- Strong focus on ground-level engagement
- Transparent data collection processes highlighted
Weaknesses:
- Academic-heavy language
- Overcrowded visual design
Resilience Research Centre website analysis
Climate Adaptation Knowledge Exchange (CAKE)
Strengths:
- User-friendly interface with robust search and filter functionalities.
- Emphasis on knowledge sharing and community engagement.
Weaknesses:
- Overwhelming volume of information
- Messy navigation
CAKE website analysis
Insights from competitive analysis
- Comprehensive & Searchable Content – A well-organized repository of case studies, research, and resources enhances accessibility and usability.
- Community Engagement Features – Forums, discussion boards, and collaboration spaces help foster connections among researchers, policymakers, and practitioners.
- Multimedia Integration – Videos, interactive maps, and infographics make complex information more digestible and engaging.
- Regular Content Updates – Frequent additions of case studies, news, and events keep the platform relevant and encourage repeat visits.
- Youth & Regional Focus – Targeting younger researchers and establishing regional hubs can expand reach and impact while promoting localized solutions.
- Guided User Experience – Curated content recommendations or topic pathways can help users navigate extensive information more effectively.
Pain Points of Potential Users
Through our research, we identified several key pain points that needed to be addressed:
Content Accessibility Issues
Many academic papers are behind paywalls, limiting access to important research.
Poor Navigation & Organization
Existing platforms can be difficult to navigate due to excessive or poorly categorized content.
Limited Interactive Content
Many sites rely on static text-based content rather than interactive maps, infographics, or videos.
Lack of Community Engagement
Few platforms allow researchers, policymakers, and practitioners to connect and exchange ideas.
Inadequate Filtering Capabilities
Users struggle to filter content based on specific themes, geographic regions, or research interests.
Information Architecture Challenge
Information Architecture
After researching similar projects' websites, I developed the general structure for ADD+'s website, which was refined through stakeholder feedback.
Final information architecture for the ADD+ website
Internal Challenge
Through client interviews, I found that the social media team could not agree amongst themselves on what structure to use for their 'Our Team' page. While some favoured a simple card view of all members with powerful filtering options (which I had suggested based on UX best practices), others wanted the 'Our Team's' structure to reflect the general hierarchy of the project members. To help guide the decision, I created visual maps demonstrating different possible layouts while explaining the UX implications and development considerations of each approach. I then used these designs to conduct user testing to determine which structure would best serve our visitors' needs. First, I read project documentation to fully understand the team's hierarchy. I made the following visualization to ease out the process.
Visualization of the project team's hierarchy, according to the project documentation
Team Page Options
To resolve this disagreement, I created multiple design options for the team page and conducted user testing to determine the most effective approach. Option #3, which featured a simple card-based layout with effective filtering capabilities, was ultimately selected for its simplicity, ease of use, and intuitiveness.
Hierarchy-based team page design
Tabbed Structure Design with single page
Single profiles page
Combined approach
Design Process
Mood Boarding
I created mood boards to establish the visual direction for the website, focusing on clean, professional aesthetics that would appeal to academic audiences while remaining accessible to the general public.
Mood board exploring visual direction for the ADD+ website
Lo-fi Designs
I created low-fidelity wireframes to establish the layout and structure of key pages before moving to detailed design.
Low-fidelity wireframes for key website pages
Hi-fi Designs & Prototyping
The high-fidelity designs incorporated the project's visual identity and refined the user experience based on feedback from the lo-fi testing phase.
High-fidelity designs for the ADD+ website
Challenges & Lessons
Challenges
- Convincing Stakeholders on UX Best Practices – The principal investigator preferred a hierarchical, multi-page team structure, whereas I proposed a one-page card view with powerful filtering for better usability.
- Overcoming Resistance to Change – To address this challenge, I onboarded the social media team and demonstrated how the proposed design would enhance user experience and accessibility.
Lessons Learned
- Communication & Trust – Regular, detailed, and clear communication helps build trust with stakeholders and establishes credibility as a designer.
- Strategic Stakeholder Engagement – Instead of direct opposition, collaborating with key team members can help advocate for user-centred design solutions more effectively.
Impact
- Designed all the unique pages for the project website.
- Established branding and visual identity.
- Conducted research on best practices for website development post-design to guide the next stages.
Next Steps
- Set up KPIs to measure website performance and track user engagement over time.
- Analyze website traffic and usability feedback to iterate and optimize the site further.