Web design · Project Management · Design for Social Justice
Towards greater impact and more support for FIP:
WITNESS website redesign
PROJECT OVERVIEW
WITNESS for Mass Incarceration (WITNESS) is a non-profit organisation working for 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.
🧰 Tools
🎨 Deliverables
👥 Team
👩🏫 Role
Interactive prototypes
Demo video
Figma
Project Process
1️⃣ Exploratory Research
Explore the possible design directions and set up guidelines
2️⃣ Schematic Research
Research on the website and create product structure
3️⃣ Iteration
Test with users to gather iterative insights for better deliverables
Jennie Lin
Nehal Sharma
Cici Lin
Keyi Zhang
Project manager
UX Designer
Settle down all design elements and finalize proposed design
4️⃣ Final Design & Delivery
Exploratory Research: Liability and visibility of impact are two deficiency that hinders WITNESS’s outreach expanding.
From WITNESS internal to other external non profits: Storytelling enhances the impact delivery.
To learn about the organisation's structure and how it and its website work, we set up a kickoff meeting with its founder, Evie. The meeting set a solid foundation for our exploratory research on the organisation and its website features.
Ecosystem map
We developed an ecosystem map to better understand the relationships between Witness and the main stakeholders and audience.
Insight 1: Witness has a simple organizational structure itself, so our design would be mainly for external stakeholders.
Insight 2: Funding comes mainly from funds rather than donations; thus, a donation flow will be developed to encourage contributions.
Insight 3: Current website visitors, most of whom possess a certain level of awareness about FIP.
Technical Analysis
We examined the information architecture and key flows of the current website and identified potential opportunities for improvement.
Insight 1: There is a need to streamline the current information architecture.
Insight 2: WITNESS may need to seek a balance of visual and textual content on the website.
Insight 3: WITNESS may show better visual hierarchy and consistency throughout the site.
Insight 4: The website content needs to transition from personal story to FIP stories.
Insight 5: The website needs a better organized of buttons and links on a page.
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.
Insight 1: Storytelling - Tailor the storytelling to WITNESS’s tone of voice and add storytelling structures/elements to smooth key flows.
Insight 2: Information Architecture - Design a neat and balanced website with a reasonable amount of information.
Insight 3: Homepage - Use visual segmentation for different sections
Insight 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.
About FIP: FIP is facing significant discrimination in the labor market. Storytelling as a powerful tool to build pathways for FIP’s reentry.
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.
UX & Storytelling: Use of visual UI elements like pictures and colours to create a memorable experience and build trust.
Interviews & Usability Testing
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, behaviours and motivations in the interviews to understand how users interact with the Witness website and uncover potential issues from the usability testing.
“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”
“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.”
Visibility of the impact: A compelling narrative, particularly when accompanied by visual elements, motivates people to donate.
Light and positive content: Some participants prefer a lighter interface, especially FIPs.
Website accessibility: Website accessibility should be considered. Too much text and all-caps passages were difficult to read.
The goal for the WITNESS website redesign: increase its visible impact and get more traffic
Based on the previous research, we synthesised into the following three insights:
01
Storytelling
Storytelling is an effective approach to help WITNESS achieve their missions and values.
02
Visibility of impact
The impact WITNESS and donors can make determine donors’ donation decisions.
03
Uplifting content
Positive visual and textual content can lead to more new FIP and external to break the stigma.
These insights led us to come up with the organisational and design principles. Based on these principles, we designed the overall strategies as our project guidelines.
Organisational principles
Design principles
Project Design Strategies
Schematic Research: determine key touchpoints for seamless storytelling experience on WITNESS’s website
From product system to website: three flows as the breakthrough points - about, events and donation.
According to our understanding of WITNESS, we created a product diagram to understand what role its website plays in its service/product system. We realized that the website has an irreplaceable role in showcasing everything about WITNESS to the public and action taking (particularly donations).
By understanding its key roles, we determined three key user flows that would help WITNESS expand its impact to more people and have more potential to get more traffic.
These flows led to a revised information architecture design. The redesign of information architecture was informed by tree testing with 12 participants.
According to the updated information architecture, we designed mid-fi (because of the tight time frame) and tested them with 8 participants before final delivery.
Iteration: Seek the balance between accessibility and rich storytelling.
Iteration insights: the content performs well in the showcasing visible impact of WITNESS, while lacking consideration of accessibility.
Based on testing the mid-fi prototypes, we have gained four key insights to refine our following design. The insights mainly pointed out that the mid-fi design lacked consideration about accessibility, as our target users varied a lot in tech proficiency. These insights directed us to iterate the mid-fi prototypes from four perspectives towards our design principles (particularly the inclusivity principle).
#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.
#Iteration 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.
#Insight 2: Consider accessibility when choosing colours.
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.
#Iteration 2: Enhance the website accessibility while maintaining brand identity.
The accessibility concern untangled our problem with the colour palette choice. The testing adoption of the original brand colours reveals the problem of low colour 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 grey.
#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.
#Iteration 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.
#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.
#Iteration 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.
Final Deliverables: showcase WITNESS’s story to gain more public attention and call for more donation.
After balancing the visual aesthetics, story density and accessibility, we have confirmed the final version of the redesign.
Style Guide
We have carefully selected a palette of sophisticated colours for our website, drawing inspiration from black, red, incarnadine, and white tones. This thoughtfully curated colour scheme not only embodies elegance but also aligns seamlessly with our client WITNESS’s website. In addition to our distinctive color choices, we have opted for the refined and modern Open Sans font to enhance the overall visual appeal of our web design, ensuring a harmonious and captivating user experience.
Final Prototypes
Our overall design was completed, following the design strategies within the organisational and design principles. We acquired the captivating image and compelling tagline from our client. In our communication strategy, we have adopted the use of concise and impactful short sentences to effectively convey our identity and announce upcoming events. By distilling our essence into a brief sentence, we aim to provide a quick and memorable snapshot of who we are as an entity.
Interactive prototypes (Figma)
Prototypes video
Future Steps: More focus on content for WITNESS and more strategic planning & communication skills for me
After the final presentation to the client, we successfully received positive feedback and persuaded the client to change their adherence to the original design through convincing user feedback and redesign deliverables.
Final presentation (client joined remotely)
Considering the better implementations and greater impact in the future, we have come up with the following suggestions for the client:
01
Positive content about the community
Leverage positive content and keep this content strategy consistent throughout the site. The content team can create videos and blog posts about FIP who received support from WITNESS.
02
03
Regular updates
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.
I also consider my future improvement to be a project manager/leadership role as I have gained much experience from this project. I have done well in time and task management, while there are still some aspects I can further improve on:
01
Being lead, but still ensure everyone gets an opportunity to contribute
02
Focusing more on completion, not too much perfection
03
Being patient and flexible when external help resources are not available