Redesigning a website to champion social, economic, and ecological justice for a nonprofit organization

DEFINE

PROJECT OVERVIEW

The focal point of this endeavor, conducted in an agile environment encompassing four sprints, is to revitalize and optimize the Global Justice Ecology Project's website to bolster its efficacy in driving donations and advancing the nonprofit's vital initiatives. Spearheaded by Tech Fleet, comprising a diverse team of professionals including a product manager, product strategists, UX designers, UX researchers, and content designers, this undertaking represents Phase 1 of a multifaceted approach toward digital transformation.

Problem:

Despite its noble mission and extensive outreach efforts, the Global Justice Ecology Project (GJEP) faces significant challenges in effectively mobilizing financial support to sustain and expand its vital initiatives. The current iteration of the organization's website fails to adequately capture and communicate the urgency and impact of its work, resulting in suboptimal engagement and limited donor conversions. This disparity underscores the pressing need for a comprehensive redesign of the GJEP website, focused on enhancing user experience, amplifying storytelling capabilities, and optimizing donation pathways to maximize fundraising efficacy. Through targeted improvements informed by user-centric design principles and rigorous data analysis, this initiative aims to bridge the gap between GJEP's mission and its online presence, empowering the organization to more effectively engage and inspire supporters in the pursuit of social, economic, and ecological justice.

Goal 1: Enhance User Experience and Engagement

  • Objective 1.1: Improve website navigation and information architecture to facilitate intuitive user journeys and enhance content discoverability.

  • Objective 1.2: Implement responsive design elements to ensure seamless accessibility across diverse devices and screen sizes.

  • Objective 1.3: Enhance visual storytelling capabilities through compelling imagery, multimedia content, and interactive features to captivate and engage visitors.

Goal 2: Optimize Donation Pathways and Fundraising Efforts

  • Objective 2: Implement data-driven strategies to personalize donation appeals and effectively communicate the impact of contributions on GJEP's mission.

Goal 3: Strengthen Brand Identity and Messaging

  • Objective 3.1: Develop a cohesive visual identity that aligns with GJEP's mission and values, fostering trust and recognition among website visitors.

  • Objective 3.2: Craft compelling and resonant messaging that articulates GJEP's impact and inspires action, leveraging storytelling to forge emotional connections with audiences.

  • Objective 3.3: Ensure consistency in brand voice and messaging across all website elements and communication channels to reinforce brand identity and amplify outreach efforts.

Client
Global Justice Ecology Project

Sector
Non-profit

Duration
4 months

Role
UX Designer

RESEARCH

Learning about the competitors

In preparation for the website redesign project for the Global Justice Ecology Project (GJEP), the UX design team conducted a comprehensive revised SWOT analysis of 7 of GJEP's key competitors in the nonprofit sector, with a primary focus on their user interface (UI) and user experience (UX). This analysis aimed to provide valuable insights into the competitor's strengths, weaknesses, and opportunities in terms of UI/UX, informing our strategic approach to optimizing GJEP's digital presence.

Visually Engaging Design

Captivate visitors with visually appealing designs, bold color palettes & contrast, and compelling imagery. Strong storytelling and guide the users through, help them make decisions.

User Friendly Navigation

Well organized content, user-friendly layouts and mobile responsiveness ensure seamless browsing, making it easy for visitors to find information.

Accessibility & Multilingual Support

Considerations like alt text, color contrast, and multi-language support cater to diverse audiences.

Donation Emphasis

Donation options are clearly presented, including cryptocurrency and various currencies, to encourage support for their causes.

Varied Content

Utilizing diverse content types, such as images, videos, and infographics, these sites effectively convey messages and engage visitors.

Homepage

  • Summary

    • Choose a color palette that will make a strong statement

    • Needs improvements on accessibility, usability, and responsiveness

    • Need to determine priorities of what users need to accomplish from this page (e.g.: Is it learning about the Featured Projects?)

  • Accessibility & Usability

    • Some buttons don’t work

    • Needs clear CTA button

    • Images lack alt text

    • Poor color contrast

  • Navigation

    • Navigation doesn’t scale well on smaller screens

  • UI Elements

    • Need to standardize hierarchies for text, especially on mobile

    • Uses a variety of colors and gradients

  • Summary

    • Need clear CTA

    • Overwhelming and outdate content

  • Usability & Accessibility

    • Easy to navigate, familiar layout, organized

    • Not immediately clear what actions are available without additional clicks and deeper dive into the separate initiatives

    • Some use of alt text, labels and multi-language support

  • Content

    • Large amounts of content when clicking on each initiative - not easily consumable

    • Outdated information makes it confusing - is taking action still possible?

    • Source code is displayed as part of the content, social media links not working.

    • Donate button mouse-over pulsing effect is intrusive

  • Responsiveness

    • Main navigation and other components don’t scale well for smaller screen sizes

Understanding the current website layout and design

In our endeavor to reinvigorate the Global Justice Ecology Project (GJEP) online platform, our team embarked on a comprehensive assessment of the current website landscape. Traversing its pages, features, and functionality, we meticulously explored the homepage, main content sections, and navigation menus, while evaluating design elements such as typography, color, buttons, and visual hierarchy. Moreover, our scrutiny extended to accessibility considerations, ensuring inclusivity for all users. Through this immersive process, we gained profound insights into the website's strengths, weaknesses, and opportunities, laying the groundwork for strategic intervention and the creation of an enriched digital experience that aligns seamlessly with GJEP's mission and resonates with its diverse audience.

Take Action Page

Donate Today Page

  • Summary

    • Clear CTA & purpose of the page

    • Layout feels unbalanced

    • Overwhelming donation methods

  • Navigation

    • Unbalanced feel, especially on mobile

  • Usability

    • Functional buttons, helpful progress bar

  • UI Elements

    • Inconsistent button shapes

    • Clear form fields, responsive design

  • Accessibility

    • Lacks language options

    • Good text color contrast as well as text sizing

Donate Page

  • Summary

    • Too much text at the top, needs a simple CTA

    • Multi-color scheme takes away from the seriousness of the cause

    • Needs stronger visual hierarchy

    • Opportunities for better organization of content

  • Navigation

    • On mobile there are no break points, content gets cluttered

  • Usability & Accessibility

    • Twitter logo is missing, FB/YT links go nowhere

    • Language icons on top/bottom are not functional and could
      be condensed into dropdown

    • Consider color contrast, animations, font size

  • UI Elements

    • Pulsing buttons are distracting/unnecessary

    • Gold text vibrates on gradient

    • White icons on yellow circles lack contrast

    • Button treatment is inconsistent

IDEATE

Optimizing user experience through site map redesign

Following our comprehensive assessment of the Global Justice Ecology Project (GJEP) website, we recognized the imperative to refine its information architecture to enhance user experience and facilitate seamless navigation. Through meticulous analysis and strategic planning, we devised a new site map aimed at optimizing content organization and accessibility. Drawing upon insights gleaned from our exploration of the website's existing structure, we reimagined the layout to ensure logical flow, intuitive pathways, and clear categorization of information. By charting this new course for GJEP's digital landscape, we set the stage for a more cohesive and user-centric online experience that empowers visitors to engage meaningfully with GJEP's mission and initiatives.

Crafting user-centric website designs

Building upon the foundation of our redefined information architecture, each designer on our team embarked on the next phase of GJEP's digital evolution: sketching designs to breathe life into our vision. Armed with insights gathered from our exploration of the existing website and informed by the newly crafted site map, we engaged in a collaborative process of ideation and iteration. Through a series of sketches, individually crafted by each designer, we translated concepts into tangible visual representations, exploring layout options, interface elements, and interactive features. With each stroke of the pen, we sought to capture the essence of GJEP's mission while prioritizing usability, accessibility, and aesthetic appeal. These sketches serve as the blueprint for GJEP's digital transformation, guiding our journey toward a revitalized online presence that resonates with audiences and advances the cause of social, economic, and ecological justice.

DESIGN

Transforming ideas into user-centered digital experiences

Continuing our journey of digital transformation for the Global Justice Ecology Project (GJEP), our team transitioned from conceptual sketches to the creation of digital wireframes. Drawing inspiration from our collaborative ideation sessions and guided by the newly defined information architecture, each designer meticulously translated our sketches into digital wireframes, infusing their unique perspectives and expertise into the process. To ensure unity and cohesiveness across the designs, we collectively chose a UI kit that provided a consistent design language and visual style. These wireframe prototypes serve as the foundational framework for the website redesign, delineating the layout, structure, and functionality of each page with precision and clarity. With user experience at the forefront of our design ethos, we iteratively refined these wireframes to ensure intuitive navigation, seamless interaction, and optimal engagement. As we embark on this transformative journey, these digital wireframes stand as a testament to our collective commitment to advancing GJEP's mission and fostering a digital experience that empowers and inspires.

Hero Section

Having a video as background makes for a more engaging experience for the users.  It captures the users attention and provides more dimension to the website.  

Storytelling

Sections like success stories and statistics for better storytelling. These sections will provide users a better picture on what issues GJEP is tackling, why it’s important, why users should take action, and GJEP’s accomplishments.  

  • CTA section to highlight a petition, event, or donation

  • Different options to give/donate

  • Added a pie chart to visualize how donations are being used and added a donate button.

Donation Impact

Having a section to highlight donation impact and where the money goes provides visibility and builds trust with users and donors.

Gathering stakeholder feedback to select design elements

In our pursuit of digital excellence for the Global Justice Ecology Project (GJEP), the culmination of our design journey involved gathering feedback and condensing multiple design variations into a unified vision. With four distinct design iterations in hand, our team engaged stakeholders including the client and other cross-functional teams in a collaborative voting process, soliciting their valuable input and insights. Each stakeholder's perspective served as a beacon guiding us toward design refinement, as we diligently incorporated feedback to distill disparate concepts into a singular, cohesive vision. Through this iterative process of refinement and alignment, we endeavored to harmonize our design approach with stakeholder expectations, ultimately forging a path toward a digital experience that embodies the essence of GJEP's mission and resonates with its diverse audience.

Synthesizing stakeholder feedback into a singular design vision

As the culmination of our collaborative journey towards digital transformation for the Global Justice Ecology Project (GJEP), our team seamlessly merged diverse perspectives and synthesized stakeholder feedback to create a singular, refined design vision. Building upon the insights garnered from stakeholder input and iterative refinement, we meticulously integrated elements from multiple design variations into a unified whole, crafting a comprehensive solution that embodies the essence of GJEP's mission and resonates with its diverse audience. This final design iteration represents the culmination of Phase 1, serving as the foundation upon which next designers will build and refine in Phase 2. Incorporating data from user research and testing, future designers will iteratively enhance the design to further optimize user experience and achieve our shared vision of social, economic, and ecological justice through innovative digital solutions.

Social Media

A section allotted to promote social media accounts like Instagram in homepage and news and media pages. An opportunity to bring in younger audience and provide them an alternative platform to be informed and involved. 

  • CTA section to highlight a petition, event, or donation

  • Calendar can be used to add events, petition deadlines, important dates, etc 

  • Having a calendar adds visual variety but also can help increase engagement, boost event visibility, and improve organization

  • Created icons for each issue for visualization and content organization

  • A filter option was added (issues and location)

  • Clickable carousel for petitions so users can browse through current petitions Added a pie chart to visualize how donations are being used and added a donate button.

  • Replaced volunteer section with fiscal sponsorship program but keeping volunteer section wireframes in Figma

  • Adding a section for users to nominate non-profits they believe could benefit in joining GJEP’s fiscal sponsorship program

  • Added current nonprofits participating in the program

Learning experience

Working within a multidisciplinary team alongside fellow designers, cross-sectional colleagues, and our client has been an invaluable learning journey for me. Throughout this experience, I've not only honed my design skills but also developed a deeper understanding of collaboration and adaptation in a dynamic environment.

I'm genuinely thrilled to have had the opportunity to collaborate with such a diverse and talented group of individuals. Each team member brought unique perspectives and expertise to the table, fostering an environment rich in learning and growth. I found myself constantly inspired by my peers, learning from their approaches and techniques, and incorporating new ideas into my own design process.

Moreover, navigating the complexities of a collaborative environment where diverse ideas and personalities intersect has been a profound learning experience in itself. I've learned the importance of effective communication, active listening, and compromise in fostering productive teamwork. Embracing change has also been a significant aspect of this journey, as we encountered shifts in team composition with members coming and going. Through these transitions, I've developed resilience and adaptability, learning to embrace uncertainty and go with the flow, ultimately emerging stronger and more flexible in the face of challenges.

Overall, this experience has not only made me a better designer but also equipped me with invaluable skills and insights that extend beyond the realm of design. I'm grateful for the opportunity to have been a part of this collaborative endeavor, and I look forward to applying these learnings as I continue to grow and evolve in my design journey.