︎




Towards greater impact and more support for Formerly Incarcerated People


Web Design

WITNESS to Mass Incarceration Website Redesign


︎︎︎View Prototype


Client
WITNESS to Mass Incarceration (WITNESS)

Responsibilities
Manage project, conduct generative research, user testing, interview, make design strategies, wireframes, prototypes, especially for home page and story page.
Duration
Sep – Dec 2023

Team
Keyi Zhang, Cici Lin, Jennie Lin, Nehal Sharma



Project Overview


WITNESS for Mass Incarceration (WITNESS) is an organization aimed to support Formerly Incarcerated People (FIP). It is dedicated to transforming the lives of FIP by advocating for long-term solutions, fostering economic empowerment, and building generational wealth. Following extensive research, through strategic and comprehensive design including restructuring, streamlined navigation, visualizing impact, and humanizing FIP content, we intend to transform the WITNESS website into a hub that empowers FIP, cultivates community networks, raises awareness, and inspires support and donation, providing a dynamic and engaging online experience.




A Solid Foundation of Our Study


Before starting the research, we have synthesized these three goals to direct our research from the initial meeting with our client Evie, the founder of WITNESS.

ORGANIZATIONAL PRINCIPLES:

  • Empowering: WITNESS empowers formerly incarcerated individuals through sustainable social enterprises and economic empowerment.
  • Connecting with Community: WITNESS builds community networks for FIP to rebuild their life.
  • Comforting & Improving Quality of Life: WITNESS makes life safer for people who were incarcerated and to help people build successful lives once they are home.
  • Raising Awareness: WITNESS aims to bring awareness among the society regarding FIP, people who can support the community by donations.

From here we started our exploratory research and evaluative research.




Ecosystem Map

We developed an ecosystem map to better understand the relationships between Witness and the main stakeholders and audience.

Insights:

  1. Witness has a simple organizational structure itself, so our design would be mainly for external stakeholders.
  2. Funding comes mainly from funds rather than donations; thus, a donation flow will be developed to encourage contributions.
  3. Current website visitors, most of whom possess a certain level of awareness about FIP.


Technical Analysis

We examined the IA and key flows of the current website and identified potential opportunities for improvement.



Insights:

  1. A need to streamline the current information architecture.
  2. Seek a balance of visual and textual content on the website. Currently, in some sections, all-caps, white-on-black paragraphs may bring some visual burden.
  3. Show better visual hierarchy and consistency throughout the site.
  4. Transition from personal story to FIP stories, add more people’s stories of formerly incarcerated stories, to resonate more.
  5. Better arrange the number of buttons and links on a page, and also make them more organized.

Competitive Audit

To understand what competitors are doing on their websites and generate insights for our design solutions, we evaluated seven websites focusing on seven features: Homepage, Navigation, Information Architecture, Key flows and pages: Donation and About, Visual style and Storytelling.

Insights:

  1. Storytelling: Tailor the storytelling to WITNESS’s tone of voice, add storytelling structures/elements to make key flows more smooth.
  2. Information Architecture: Design a neat and balanced website with a reasonable amount of information.
  3. Homepage: Use visual segmentation for different sections.
  4. Donation: Always have donation CTAs clear and easy to access. Consider using the Donation button, floating box, floating beak to emphasize on donation.



Literature Review

We conducted surveys to gather insights on existing knowledge in FIPs, designing for non-profit organizations, storytelling from articles, videos, news and blogs.

Insights:

  1. About FIP: FIP is facing significant discrimination in the labor market. Storytelling as a powerful tool to build pathways for FIP’s reentry.
  2. About non-profits & donations: Use stories to explain ‘why to donate’ and call for donors. Tell positive stories to show the impact of WITNESS directly.
  3. UX & Storytelling: Use of visual UI elements like pictures and colors to create a memorable experience and build trust.

Understanding the Audience of WITNESS Website

During our user testing process, we conducted interviews and gathered feedback from five participants: one potential visitor and four FIPs referred by our client. We wanted to learn about the mental models, behaviors and motivations in the interviews and to understand how users interact with the Witness website and uncover potential issues from the usability testing.



Insights:

  1. “I would like to learn about people I’m impacting, definitely I want to see like a story of at least a few of them, and how my money could make a change to their life” – People base their decision to donate on two crucial factors: the transparency of the organization and the reliability of the payment gateway.
  2. A compelling narrative, particularly when accompanied by visual elements, motivates people to donate. Visualizing the impact can further enhance and broaden WITNESS’s network.
  3. “So one thing about prisoners… 
I want to see wood and flowers  because my world was concrete and steel. Now, I want brightness around me.” – Some participants prefer a lighter interface, especially FIPs.
  4. Participants had difficulty locating Events on the website.
  5. Website accessibility should be considered. Too much text and all-caps passages were difficult to read.


After thorough research, we’ve consolidated three main insights.

Research Insights




Design Principles

We also formulate and establish our Design Principles based on research and organizational principles. It includes Trust-building, Inclusive, Efficient, Unified and Engaging.

Design Strategies

To bring those principles to life in the actual design process, we made our design strategies. They involve more detailed planning and specify the actions to implement our design principles effectively. They are categorized into three key aspects: Flow, Visual, and Content.







Ideation



Product Diagram




Key Flows





Information Architecture

Informed by the explanatory research and tree testing with 12 participants, we mapped out the information architecture of the site.




Wireframing








Iterations


Insights

Based on testing the mid-fi prototypes, we have gained key insights to refine our following design.

💡Insight 1: The use of imagery enhanced the immersive and engaging storytelling

In the mid-fi prototypes, we replaced the existing website images with full-width and positive ones. This attempt received much positive feedback from the testers. They could read the uplifting story from these images, especially the full-screen landing page image.

💡Insight 2: Consider accessibility when choosing colors

The user testing and accessibility audit results showed that the current colour palette that the WITNESS website is using does not meet some accessibility standards. As inclusivity is one of our design principles, we need to twist the colour scheme for accessibility whilst maintaining WITNESS’s unique brand identity.

💡Insight 3: Avoid using dense content on the website

While we were trying to tell a thorough story about WITNESS on the website, we included high-density content which could stop users from continuing reading. Some content chunks were also repeated across the site to cause redundancy.

💡Insight 4: Build logistic plots and transitions for WITNESS’s story

Content chunks are the story plots we created for users in the WITNESS’s story. Between some plots, there were no smooth transitions. This lack of storytelling elements caused confusion among users.



Improvements

These insights directed us to iterate the mid-fi prototypes from four perspectives towards our design principles.

✨Improvement 1: Maintain the consistency of positive content

Given the positive feedback from our choice of positive imagery, the overall content was decided to be maintained consistently positive. In addition to replacing other images with positive pictures, the plain text was revised into friendly and warm sentences. The overall tone of the site and vibe is aimed to be engaging and welcoming. In headings, straightforward phrases were adjusted into welcoming short sentences – e.g., Contact Us to Reach out to us for any help & The Story to See our moments.









✨Improvement 2: Enhance the website accessibility while maintaining brand identity

The accessibility concern untangled our problem with the color palette choice. The testing adoption of the original brand colors reveals the problem of low color contrast, and hence low readability. To address this issue, the brand red was adjusted into a darker adjacent red. Also, pure black in a transparent gradient was adjusted into a solid dark gray.




✨Improvement 3: Reorganise WITNESS’s story content to keep simplicity and clarity

We removed the programs from the homepage as it’s repetitive with the other projects section. Also, we placed the 2 FAQ category sections on their own page respectively to simplify reading.



✨Improvement 4: Add transitions in between content chunks to ensure seamless storytelling

Contextual elements were decided to be supplemented to the WITNESS story on the site and bridge the understanding gap between each story plot. For instance, on the homepage, the heading and more project information were added in between the projects and news sections. These elements add more context to this section. It eventually ensures seamless storytelling on this page.





Design Implementation

Style Guide Brief

We have carefully selected a palette of sophisticated colors that not only embodies elegance but also aligns seamlessly with our client’s exceptation. 



Final Prototype




︎︎︎ Prototype Link



Future Steps

For better implementations and greater impact, we have identified key steps for WITNESS:
  1. Leverage positive content and keep this content strategy consistent throughout the site. For example, in addition to the images and welcoming text we have adopted in the prototypes, the content team can create videos and blog posts about FIP who received support from WITNESS to visualize the positive impact of WITNESS.
  2. Implement the proposed design on suggested Squarespace templates, like Lusaka and Comet. These templates have a similar visual and content style to our proposed design and show little tech barrier to implementing design.
  3. Update WITNESS website content more frequently and regularly. The constant and routine updates can improve the SEO and bring more traffic to the WITNESS website, then more likely to increase its donations via the website.



What I learned

This project was a transformative journey that deepened my understanding of Formerly Incarcerated People (FIP) and their unique challenges. Initially, I had limited exposure to the realities faced by FIP, but through this experience, I gained invaluable insights that have forever changed my perspective.

Balancing the client's vision and preferences with user needs was a delicate dance. As the founder and driving force behind WITNESS, our client had a deeply personal connection to the cause. It was crucial to respect her vision while ensuring the website resonated with its intended audience – the FIP community and supporters. Through open communication and a user-centered approach, we struck a harmonious balance, creating a design that seamlessly blended organizational goals with user feedback and principles.

The journey of transforming the WITNESS website was about more than just design; it was about understanding, empathy, and amplifying the voices of a community often overlooked. Every design decision, from streamlining navigation to strategically designing content, aimed to deliver a user-friendly and engaging website that forged a strong connection with FIP and their supporters, bolstering the overall impact.

One of the most profound lessons came from the client's own words: "What's going to surprise you the most, even though you've read about them and talked to them, is you're going to fall in love with them."This project has been a catalyst for personal growth, reminding us of the transformative power of design and the importance of amplifying voices that deserve to be heard.
 







 
©Created by Keyi 2024
︎  Contact me
︎  LinkedIn