Develop for Good
Crafted a clear and accessible experience for data-driven impact
Overview
As a UX designer for Develop for Good, I partnered with the Center for New Data (CND), a civic tech non profit, to redesign their website and strengthen how they communicate their mission of protecting voting rights through data science and AI.
Our team delivered a mission-driven redesign built on Squarespace, to balance accessibility and flexibility so that nontechnical staff could easily maintain the site over time.
Media
Role
UX Designer
Team
1 Product Manager, 1 Design Manager, 7 UX Designers
Timeline
October 2023 - March 2024
Tools
Figma, Squarespace
Context
Building a tech-forward presence
The Center for New Data (CND) is a non-profit non-partisan organization that uses data science and AI to protect voting rights. This is done through the Voting Access Monitor, that helps journalists, researchers, and civic partners identify voting barriers and advocate for equitable access to the polls.
However, their existing site made it difficult for the general public to understand:
CND’s mission
What the organization actually does.
How their tools work
Products seemed technical and hard to interpret.
Why their work matters
Their value wasn't clearly communicated
Through an initial audit and discussions with the client, we identified a few pain points:
Outdated visual design: Low contrast, dense layouts, lack of clear CTAs, and older styling made the site feel disconnected from the technical rigor of their work.
Text-heavy pages: Long paragraphs, limited hierarchy, and few visual cues made scanning difficult.
Navigation challenges: Broad categories like Initiatives and About buried content, forcing users to jump between unrelated sections.
Unclear product story: Their tools were not surfaced early, and users struggled to understand how CND creates impact.
This gap between their mission and digital experience is what prompted a full redesign.
Project objective
Modernize CND's digital presence
Our redesign focused on three main goals:
1
Implementing a modern design, with strong hierarchy, clear typography, simplified layouts, and updated visual patterns that allows for a seamless user experience.
2
Ensuring relevant information is prominently displayed on the website so the user can gain a better understanding of the organization.
3
Shifting to a more product-focused strategy by highlighting the organization’s data products. This helps in demonstrating their impact in the field for potential clients visiting the site.
Solution
A redesigned experience that makes civic information easy to explore
We delivered a fully restructured, mobile-responsive website built on Squarespace’s native components, giving CND a clean, modern platform that communicates their mission clearly while remaining easy for staff to maintain.
Before & after the redesign
How structural changes improved clarity across key sections
These changes focused less on reducing content and more on restructuring information to support scanning and hierarchy.
Hero section redesign
Before
The original hero used a generic image and broad mission statement that didn't clearly surface CND's tools or offerings.
After
A product-forward layout is introduced with clear hierarchy and tool mockups, making CND's work more tangible at entry.
Work & impact overview
Before
No clear headings and limited hierarchy made it hard to quickly understand the scope of CND’s work.
After
Section headings and iconography create clear categories and visual anchors to support faster scanning and provide a stronger overview of CND's work.
Partners & approach
Before
Approach, partners, and signup content were visually compressed, with low contrast and tight spacing reducing clarity.
After
The redesign separates these elements into focused sections with improved spacing and contrast, strengthening readability.
Design process
How we brought the site to life
Discover — Client alignment
Understanding the client and constraints
During the first few meetings with the client, we got to know more about the organization and the project’s goals, including:
Target users and their primary goals
General public and volunteers
Learn about voting access
Discover ways to get involved
Donors and collaborators
Understand CND's mission
Evaluate impact
Voting rights activists/partners
Access tools
Apply data to advocacy
Motivation behind the project
Modernize the brand
Create a product-forward digital presence that reflects evolving tools.
Empower the team
Enable non-technical staff to manage and update content independently.
Explain the tools clearly
Help users quickly understand what each product does and how it supports voting rights.
Why Squarespace?
Our client has been using Squarespace and after thorough discussion and analyzing tradeoffs, it has been decided that they will continue to use the same tech stack due to team familiarity and capacity constraints. Engineering requests were out of scope, so our team focused entirely on UX, information architecture, and visual design within this technical boundary.
Squarespace allowed nontechnical staff to manage content independently.
It reduced costs and dependencies on external developers.
It forced us to prioritize information clarity and user experience over elaborate UI flourishes.
Design Principles
Our team was to focus entirely on the website’s overall design and emphasize client satisfaction. We aligned on three principles based on CND’s mission and political neutrality:
Neutral by design
Avoid political color associations or emotionally charged imagery.
Simple by structure
Communicate through hierarchy, not visual noise.
Accessible by default
Prioritize color contrast, font legibility, and mobile responsiveness.
Define — Competitive analysis
What effective civic-tech websites get right
Recidiviz: Clear storytelling through strong hero visuals
Uses a large headline with a supporting sentence
High-contrast hero visual draws attention to the organization’s mission
Primary CTA is placed above the fold, improving task visibility
Benshi: Clean, modern visual identity
Whitespace ratio reduces cognitive load
Single accent colour and large typescale create clear hierarchy
Navigation is concise, information is easier to locate
Turn.io: Strong product-first narrative
The hero frames the product UI, helping users understand its purpose
CTAs guide users toward conversion actions
Key patterns observed
Across all these website, we identified patterns relevant to CND's redesign
1
Immediate mission clarity
Through a focused hero section.
2
Structured storytelling
Structure that moves from “what the tool is” to “how it works” to “impact.”
3
High scannability
Supported by large typography, clear sections, and reduced visual noise.
4
Clear credibility signals
Through partners, case studies, or product screenshots.
These insights helped us prioritize a product-first hero, simplified navigation, and a clearer content hierarchy for CND.
Define — Content mapping
Rebuilding the information architecture for clarity
To guide the redesign, we audited CND's existing website and discussed with the client how their content should be structured and communicated. The old information architecture relied on board categories such as Initiatives and About, which made it difficult for users to understand where specific content lived and how different sections related.
We conducted a content mapping session to align the site structure with key user goals. Our discussions informed the following structural changes:
Navigation bar:
Before
Proposed Navigation Bar
Broad categories like Initiatives and About Us made content harder to find
Product information buried under multiple layers
Impact content split across several sections
Key actions lacked visual or structural priority
Donate was not emphasized as a primary action
After
Revised Navigation Bar
Clear product-first structure
Voting Access Monitor
Polling Equity Project
Impact consolidated into one dedicated section
About reorganized to clarify team, approach, and partners
Get Involved simplified into a single section
Donate emphasized as a primary CTA
Homepage structure:
Before
Proposed Homepage
Simple hero with limited context
Content spread across sections with no hierarchy
Approach, user types, and stories grouped loosely
Difficult to understand what CND does at a glance
After
Revised Homepage
Hero communicates mission and product immediately
Clear narrative flow: What we do → How it works → Why it matters
Core services visualized for quick scanning
Impact, news, and partners framed as credibility signals
Develop — Template
Pivoting to templates
Given our tight deadline, we decided to pivot towards using a Squarespace template rather than implementing a custom design. After initial design explorations, we worked closely with the client to define the key information users needed to find quickly:
An overview of CND’s mission and values
Key statistics that communicate impact
Information about the organization’s products and initiatives
Clear CTAs, like contacting the organization or donating
We also considered what users would likely want to do on the site and made sure the structure could support these tasks efficiently.
Evaluating template options
The final chosen template!
All of the templates we considered.
We reviewed multiple templates, comparing
Content hierarchy: could users quickly find mission, stats, and products?
Navigation clarity: were key actions easy to locate?
Visual alignment: did color palettes and layouts support CND’s approachable yet professional brand?
Flexibility: could the template adapt as the organization grows?
The final chosen template!
Why we chose this template
We selected a template with a clean hero section, simple navigation, and subtle animations that immediately highlight CND’s mission. Its neutral palette integrated seamlessly with the brand, and the layout allowed clear presentation of statistics, products, and calls to action. Overall, it offered a scalable, user-centered foundation that balanced clarity, flexibility, and ease of maintenance.
The final chosen template!
Develop — Style guide
Defining the visual direction
Once the structure was approved, I defined the visual direction and style guide. Our visual direction needed to support the project’s objectives while balancing CND’s neutral brand requirements with a modern, compelling look:
Authoritative
Reinforces credibility for journalists and researchers
(via clean type hierarchy and structured layout)
Warm
Humanizes data-driven work without political overtones
(via neutral blues + cream neutrals)
Modern
Supports the shift toward a product-focused strategy
(via simplified UI patterns and updated visual framing)
Typography prioritized readability; color choices avoided political associations while offering enough contrast to support accessibility.
Style Guide
Typography
Simple fonts and standard sizes were chosen to maximize readability and accessibility across devices.
Colour Palette
Neutral blues and creams formed the foundation, staying aligned with CND’s nonpartisan brand. Complementary orange accents were introduced to draw attention where needed, while remaining feasible within the Squarespace color limitations.
Develop — Product mockups
Visualizing the product experience
To help users quickly understand CND’s products, we designed custom product mockups for the hero and key product sections. These illustrate how their tools work and what kind of insights they provide, giving users a more concrete entry point into the product experience.
Early product screens used to explore key states before translating them into mockups.
Final mockups used in the hero and product sections to visually represent CND’s tools.
Deliver — Results
Modernizing CND’s brand and experience
After implementing the rebranding efforts, the Center for New Data has undergone a few changes and the final design achieved three key outcomes:
Modern Experience
Updated IA, clearer hierarchy, structured storytelling.
Stronger Credibility
Neutral visual system reinforces nonpartisanship.
Better Usability
Improved mobile layout, readability, and accessibility.
“It was inspiring to work alongside Develop for Good’s students, and seeing them want to contribute to strengthening our democracy in meaningful ways”.
— Martine Chaussard and Jacqueline Edwards
What I learned
Challenges
Navigating tight deadlines
Working under setbacks and tight deadlines meant having to focus less on perfecting every detail. As a team, we had to identify how we can create the most impact for users and our client, and commit to those decisions.
How to balance vision with feasibility for great design
Since CND's brand needed to stay neutral, we had to design in a way that was tech-forward and compelling without leaning into partisan visuals. Our visuals had to communicate inclusivity and trust.
Key Takeaways
Limitations can't be avoided but they don't have to limit the solution
Working within the given constraints in Squarespace pushed me to think how I can design with intention. I learned how to adapt creativity to the platform while still maintaining a clean and modern experience. Good UX isn't just about unlimited freedom, it's about making meaningful decisions with what's available.
Great design is created through collaboration and not just handed off
Focusing on collaboration with a nonprofit team taught me how important communication is to meaningful design. I learned how to translate abstract goals such as neutral, data-driven, and non-partisan into concrete design decisions.
Personal reflection
Looking back on the term…
Working with Develop for Good gave me the amazing opportunity to design for a real cause and see how thoughtful design can have a tangible impact. Collaborating with passionate designers and mentors helped me to not only grow my design skills, but also my collaboration and communication. I'm especially thankful for the guidance and encouragement I received throughout the entire project as it reminded me why I love designing products that helps others.
Special thanks to:
Stephanie & Shabicha: Thank you for being great leads to help guide us through the project and keep us on track so that we could reach our deadlines.
Emmett, Anupriya, Jonathan, Yvonne, Katie & Rosalie: Fellow UXers! It was a pleasure to work with each and every one of you, and get the chance to learn alongside all of you. Wishing you guys the best of luck with everything!
Good design bridges cultures. Great design builds belonging.
Thanks for checking out this case study! If you have any questions or want to know more, don't hesitate to contact me. While you're still here, please feel free to check out my other work or learn more about me. :)
Develop for Good
Crafted a clear and accessible experience for data-driven impact
Overview
As a UX designer for Develop for Good, I partnered with the Center for New Data (CND), a civic tech non profit, to redesign their website and strengthen how they communicate their mission of protecting voting rights through data science and AI.
Our team delivered a mission-driven redesign built on Squarespace, to balance accessibility and flexibility so that nontechnical staff could easily maintain the site over time.
Media
Role
UX Designer
Team
1 Product Manager, 1 Design Manager, 7 UX Designers
Timeline
October 2023 - March 2024
Tools
Figma, Squarespace
Context
Building a tech-forward presence
The Center for New Data (CND) is a non-profit non-partisan organization that uses data science and AI to protect voting rights. This is done through the Voting Access Monitor, that helps journalists, researchers, and civic partners identify voting barriers and advocate for equitable access to the polls.
However, their existing site made it difficult for the general public to understand:
CND’s mission
What the organization actually does.
How their tools work
Products seemed technical and hard to interpret.
Why their work matters
Their value wasn't clearly communicated
Through an initial audit and discussions with the client, we identified a few pain points:
Outdated visual design: Low contrast, dense layouts, lack of clear CTAs, and older styling made the site feel disconnected from the technical rigor of their work.
Text-heavy pages: Long paragraphs, limited hierarchy, and few visual cues made scanning difficult.
Navigation challenges: Broad categories like Initiatives and About buried content, forcing users to jump between unrelated sections.
Unclear product story: Their tools were not surfaced early, and users struggled to understand how CND creates impact.
This gap between their mission and digital experience is what prompted a full redesign.
Project objective
Modernize CND's digital presence
Our redesign focused on three main goals:
1
Implementing a modern design, with strong hierarchy, clear typography, simplified layouts, and updated visual patterns that allows for a seamless user experience.
2
Ensuring relevant information is prominently displayed on the website so the user can gain a better understanding of the organization.
3
Shifting to a more product-focused strategy by highlighting the organization’s data products. This helps in demonstrating their impact in the field for potential clients visiting the site.
Solution
A redesigned experience that makes civic information easy to explore
We delivered a fully restructured, mobile-responsive website built on Squarespace’s native components, giving CND a clean, modern platform that communicates their mission clearly while remaining easy for staff to maintain.
Before & after the redesign
How structural changes improved clarity across key sections
During the first few meetings with CND, we focused on understanding their mission, users, and how their site was being managed. These conversations led us an early decision: staying on Squarespace to support their workflow and constraints.
Hero section redesign
Before
The original hero used a generic image and broad mission statement that didn't clearly surface CND's tools or offerings.
After
A product-forward layout is introduced with clear hierarchy and tool mockups, making CND's work more tangible at entry.
Work & impact overview
Before
No clear headings and limited hierarchy made it hard to quickly understand the scope of CND’s work.
After
Section headings and iconography create clear categories and visual anchors to support faster scanning and provide a stronger overview of CND's work.
Partners & approach
Before
Approach, partners, and signup content were visually compressed, with low contrast and tight spacing reducing clarity.
After
The redesign separates these elements into focused sections with improved spacing and contrast, strengthening readability.
Design process
How we brought the site to life
Discover — Client alignment
Understanding the client and constraints
During the first few meetings with CND, we focused on understanding their mission, users, and how their site was being managed. These conversations led us an early decision: staying on Squarespace to support their workflow and constraints.
Target users and their primary goals
General public and volunteers
Learn about voting access
Discover ways to get involved
Donors and collaborators
Understand CND's mission
Evaluate impact
Voting rights activists/partners
Access tools
Apply data to advocacy
Motivation behind the project
Modernize the brand
Create a product-forward digital presence that reflects evolving tools.
Empower the team
Enable non-technical staff to manage and update content independently.
Explain the tools clearly
Help users quickly understand what each product does and how it supports voting rights.
Why Squarespace?
CND had been using Squarespace for their original site and after discussing their needs for flexibility, available resourecs, and long-term maintenance workflows, continuing with Squarespace became the most practical choice for a few reasons:
It allowed nontechnical staff to manage content independently.
It reduced costs and dependencies on external developers.
It forced us to prioritize information clarity and user experience over elaborate UI flourishes.
Design Principles
Our team was to focus entirely on the website’s overall design and emphasize client satisfaction. We aligned on three principles based on CND’s mission and political neutrality:
Neutral by design
Avoid political color associations or emotionally charged imagery.
Simple by structure
Communicate through hierarchy, not visual noise.
Accessible by default
Prioritize color contrast, font legibility, and mobile responsiveness.
Define — Competitive analysis
What effective civic-tech websites get right
Recidiviz: Clear storytelling through strong hero visuals
Uses a large headline with a supporting sentence
High-contrast hero visual draws attention to the organization’s mission
Primary CTA is placed above the fold, improving task visibility
Benshi: Clean, modern visual identity
Whitespace ratio reduces cognitive load
Single accent colour and large typescale create clear hierarchy
Navigation is concise, information is easier to locate
Turn.io: Strong product-first narrative
The hero frames the product UI, helping users understand its purpose
CTAs guide users toward conversion actions
Key patterns observed
Across all these website, we identified patterns relevant to CND's redesign
1
Immediate mission clarity
Through a focused hero section.
2
Structured storytelling
Structure that moves from “what the tool is” to “how it works” to “impact.”
3
High scannability
Supported by large typography, clear sections, and reduced visual noise.
4
Clear credibility signals
Through partners, case studies, or product screenshots.
These insights helped us prioritize a product-first hero, simplified navigation, and a clearer content hierarchy for CND.
Define — Content mapping
Rebuilding the information architecture for clarity
To guide the redesign, we audited CND's existing website and discussed with the client how their content should be structured and communicated. The old information architecture relied on board categories such as Initiatives and About, which made it difficult for users to understand where specific content lived and how different sections related.
We conducted a content mapping session to align the site structure with key user goals. Our discussions informed the following structural changes:
Navigation bar:
Before
Proposed Navigation Bar
Broad categories like Initiatives and About Us made content harder to find
Product information buried under multiple layers
Impact content split across several sections
Key actions lacked visual or structural priority
Donate was not emphasized as a primary action
After
Revised Navigation Bar
Clear product-first structure
Voting Access Monitor
Polling Equity Project
Impact consolidated into one dedicated section
About reorganized to clarify team, approach, and partners
Get Involved simplified into a single section
Donate emphasized as a primary CTA
Homepage structure:
Before
Proposed Homepage
Simple hero with limited context
Content spread across sections with no hierarchy
Approach, user types, and stories grouped loosely
Difficult to understand what CND does at a glance
After
Revised Homepage
Hero communicates mission and product immediately
Clear narrative flow: What we do → How it works → Why it matters
Core services visualized for quick scanning
Impact, news, and partners framed as credibility signals
Develop — Template
Pivoting to templates
Given our tight deadline, we decided to pivot towards using a template rather than implementing a custom design. So, once we finished exploring initial designs and having conversations with our client on the type of information they wanted to include on the site including statistics, call to actions, and information about the organization and their products, we then looked through Squarespace for templates that we could use for the website redesign.
We also considered what users would likely want to do on the site and made sure the structure could support these tasks efficiently.
The final template and why we chose it
The final chosen template!
All of the templates we considered.
We reviewed multiple templates, comparing
Content hierarchy: could users quickly find mission, stats, and products?
Navigation clarity: were key actions easy to locate?
Visual alignment: did color palettes and layouts support CND’s approachable yet professional brand?
Flexibility: could the template adapt as the organization grows?
The final chosen template!
The final template and why we chose it
We selected a template with a clean hero section, simple navigation, and subtle animations that immediately highlight CND’s mission. Its neutral palette integrated seamlessly with the brand, and the layout allowed clear presentation of statistics, products, and calls to action. Overall, it offered a scalable, user-centered foundation that balanced clarity, flexibility, and ease of maintenance.
The final chosen template!
Develop — Style guide
Defining the visual direction
Once the structure was approved, I defined the visual direction and style guide. Our visual direction needed to support the project’s objectives while balancing CND’s neutral brand requirements with a modern, compelling look:
Authoritative
Reinforces credibility for journalists and researchers
(via clean type hierarchy and structured layout)
Warm
Humanizes data-driven work without political overtones
(via neutral blues + cream neutrals)
Modern
Supports the shift toward a product-focused strategy
(via simplified UI patterns and updated visual framing)
Typography prioritized readability; color choices avoided political associations while offering enough contrast to support accessibility.
Style Guide
Typography
Simple fonts and standard sizes were chosen to maximize readability and accessibility across devices.
Colour Palette
Neutral blues and creams formed the foundation, staying aligned with CND’s nonpartisan brand. Complementary orange accents were introduced to draw attention where needed, while remaining feasible within the Squarespace color limitations.
Develop — Product mockups
Visualizing the product experience
To help users quickly understand CND’s products, we designed custom product mockups for the hero and key product sections. These illustrate how their tools work and what kind of insights they provide, giving users a more concrete entry point into the product experience.
Early product screens used to explore key states before translating them into mockups.
Final mockups used in the hero and product sections to visually represent CND’s tools.
Deliver — Results
Modernizing CND’s brand and experience
After implementing the rebranding efforts, the Center for New Data has undergone a few changes and the final design achieved three key outcomes:
Modern Experience
Updated IA, clearer hierarchy, structured storytelling.
Stronger Credibility
Neutral visual system reinforces nonpartisanship.
Better Usability
Improved mobile layout, readability, and accessibility.
“It was inspiring to work alongside Develop for Good’s students, and seeing them want to contribute to strengthening our democracy in meaningful ways”.
— Martine Chaussard and Jacqueline Edwards
What I learned
Challenges
Navigating tight deadlines
Working under setbacks and tight deadlines meant having to focus less on perfecting every detail. As a team, we had to identify how we can create the most impact for users and our client, and commit to those decisions.
How to balance vision with feasibility for great design
Since CND's brand needed to stay neutral, we had to design in a way that was tech-forward and compelling without leaning into partisan visuals. Our visuals had to communicate inclusivity and trust.
Key Takeaways
Limitations can't be avoided but they don't have to limit the solution
Working within the given constraints in Squarespace pushed me to think how I can design with intention. I learned how to adapt creativity to the platform while still maintaining a clean and modern experience. Good UX isn't just about unlimited freedom, it's about making meaningful decisions with what's available.
Great design is created through collaboration and not just handed off
Focusing on collaboration with a nonprofit team taught me how important communication is to meaningful design. I learned how to translate abstract goals such as neutral, data-driven, and non-partisan into concrete design decisions.
Personal reflection
Looking back on the term…
Working with Develop for Good gave me the amazing opportunity to design for a real cause and see how thoughtful design can have a tangible impact. I'm especially thankful for the guidance and encouragement I received throughout the entire project as it reminded me why I love designing products that helps others.
Special thanks to:
Stephanie & Shabicha: Thank you for being great leads to help guide us through the project and keep us on track so that we could reach our deadlines.
Emmett, Anupriya, Jonathan, Yvonne, Katie & Rosalie: Fellow UXers! It was a pleasure to work with each and every one of you, and get the chance to learn alongside all of you. Wishing you guys the best of luck with everything!
Good design bridges cultures. Great design builds belonging.
Thanks for checking out this case study! If you have any questions or want to know more, don't hesitate to contact me. While you're still here, please feel free to check out my other work or learn more about me. :)
Develop for Good
Crafted a clear and accessible experience for data-driven impact
Overview
As a UX designer for Develop for Good, I partnered with the Center for New Data (CND), a civic tech non profit, to redesign their website and strengthen how they communicate their mission of protecting voting rights through data science and AI.
Our team delivered a mission-driven redesign built on Squarespace, to balance accessibility and flexibility so that nontechnical staff could easily maintain the site over time.
Media
Role
UX Designer
Team
1 Product Manager, 1 Design Manager, 7 UX Designers
Timeline
October 2023 - March 2024
Tools
Figma, Squarespace
Context
Building a tech-forward presence
The Center for New Data (CND) is a non-profit non-partisan organization that uses data science and AI to protect voting rights. This is done through the Voting Access Monitor, that helps journalists, researchers, and civic partners identify voting barriers and advocate for equitable access to the polls.
However, their existing site made it difficult for the general public to understand:
CND’s mission
What the organization actually does.
How their tools work
Products seemed technical and hard to interpret.
Why their work matters
Their value wasn't clearly communicated
Through an initial audit and discussions with the client, we identified a few pain points:
Outdated visual design: Low contrast, dense layouts, lack of clear CTAs, and older styling made the site feel disconnected from the technical rigor of their work.
Text-heavy pages: Long paragraphs, limited hierarchy, and few visual cues made scanning difficult.
Navigation challenges: Broad categories like Initiatives and About buried content, forcing users to jump between unrelated sections.
Unclear product story: Their tools were not surfaced early, and users struggled to understand how CND creates impact.
This gap between their mission and digital experience is what prompted a full redesign.
Project objective
Modernize CND's digital presence
Our redesign focused on three main goals:
1
Implementing a modern design, with strong hierarchy, clear typography, simplified layouts, and updated visual patterns that allows for a seamless user experience.
2
Ensuring relevant information is prominently displayed on the website so the user can gain a better understanding of the organization.
3
Shifting to a more product-focused strategy by highlighting the organization’s data products. This helps in demonstrating their impact in the field for potential clients visiting the site.
Solution
A redesigned experience that makes civic information easy to explore
We delivered a fully restructured, mobile-responsive website built on Squarespace’s native components, giving CND a clean, modern platform that communicates their mission clearly while remaining easy for staff to maintain.
Before & after the redesign
How structural changes improved clarity across key sections
These changes focused less on reducing content and more on restructuring information to support scanning and hierarchy.
Hero section redesign
Before
The original hero used a generic image and broad mission statement that didn't clearly surface CND's tools or offerings.
After
A product-forward layout is introduced with clear hierarchy and tool mockups, making CND's work more tangible at entry.
Work & impact overview
Before
No clear headings and limited hierarchy made it hard to quickly understand the scope of CND’s work.
After
Section headings and iconography create clear categories and visual anchors to support faster scanning and provide a stronger overview of CND's work.
Partners & approach
Before
Approach, partners, and signup content were visually compressed, with low contrast and tight spacing reducing clarity.
After
The redesign separates these elements into focused sections with improved spacing and contrast, strengthening readability.
Design process
How we brought the site to life
Discover — Client alignment
Understanding the client and constraints
During the first few meetings with the client, we got to know more about the organization and the project’s goals, including:
Target users and their primary goals
General public and volunteers
Learn about voting access
Discover ways to get involved
Donors and collaborators
Understand CND's mission
Evaluate impact
Voting rights activists/partners
Access tools
Apply data to advocacy
Motivation behind the project
Modernize the brand
Create a product-forward digital presence that reflects evolving tools.
Empower the team
Enable non-technical staff to manage and update content independently.
Explain the tools clearly
Help users quickly understand what each product does and how it supports voting rights.
Why Squarespace?
Our client has been using Squarespace and after thorough discussion and analyzing tradeoffs, it has been decided that they will continue to use the same tech stack due to team familiarity and capacity constraints. Engineering requests were out of scope, so our team focused entirely on UX, information architecture, and visual design within this technical boundary.
Squarespace allowed nontechnical staff to manage content independently.
It reduced costs and dependencies on external developers.
It forced us to prioritize information clarity and user experience over elaborate UI flourishes.
Design Principles
Our team was to focus entirely on the website’s overall design and emphasize client satisfaction. We aligned on three principles based on CND’s mission and political neutrality:
Neutral by design
Avoid political color associations or emotionally charged imagery.
Simple by structure
Communicate through hierarchy, not visual noise.
Accessible by default
Prioritize color contrast, font legibility, and mobile responsiveness.
Define — Competitive analysis
What effective civic-tech websites get right
Recidiviz: Clear storytelling through strong hero visuals
Uses a large headline with a supporting sentence
High-contrast hero visual draws attention to the organization’s mission
Primary CTA is placed above the fold, improving task visibility
Benshi: Clean, modern visual identity
Whitespace ratio reduces cognitive load
Single accent colour and large typescale create clear hierarchy
Navigation is concise, information is easier to locate
Turn.io: Strong product-first narrative
The hero frames the product UI, helping users understand its purpose
CTAs guide users toward conversion actions
Key patterns observed
Across all these website, we identified patterns relevant to CND's redesign
1
Immediate mission clarity
Through a focused hero section.
2
Structured storytelling
Structure that moves from “what the tool is” to “how it works” to “impact.”
3
High scannability
Supported by large typography, clear sections, and reduced visual noise.
4
Clear credibility signals
Through partners, case studies, or product screenshots.
These insights helped us prioritize a product-first hero, simplified navigation, and a clearer content hierarchy for CND.
Define — Content mapping
Rebuilding the information architecture for clarity
To guide the redesign, we audited CND's existing website and discussed with the client how their content should be structured and communicated. The old information architecture relied on board categories such as Initiatives and About, which made it difficult for users to understand where specific content lived and how different sections related.
We conducted a content mapping session to align the site structure with key user goals. Our discussions informed the following structural changes:
Navigation bar:
Before
Proposed Navigation Bar
Broad categories like Initiatives and About Us made content harder to find
Product information buried under multiple layers
Impact content split across several sections
Key actions lacked visual or structural priority
Donate was not emphasized as a primary action
After
Revised Navigation Bar
Clear product-first structure
Voting Access Monitor
Polling Equity Project
Impact consolidated into one dedicated section
About reorganized to clarify team, approach, and partners
Get Involved simplified into a single section
Donate emphasized as a primary CTA
Homepage structure:
Before
Proposed Homepage
Simple hero with limited context
Content spread across sections with no hierarchy
Approach, user types, and stories grouped loosely
Difficult to understand what CND does at a glance
After
Revised Homepage
Hero communicates mission and product immediately
Clear narrative flow: What we do → How it works → Why it matters
Core services visualized for quick scanning
Impact, news, and partners framed as credibility signals
Develop — Template
Pivoting to templates
Given our tight deadline, we decided to pivot towards using a Squarespace template rather than implementing a custom design. After initial design explorations, we worked closely with the client to define the key information users needed to find quickly:
An overview of CND’s mission and values
Key statistics that communicate impact
Information about the organization’s products and initiatives
Clear CTAs, like contacting the organization or donating
We also considered what users would likely want to do on the site and made sure the structure could support these tasks efficiently.
Evaluating template options
The final chosen template!
All of the templates we considered.
We reviewed multiple templates, comparing
Content hierarchy: could users quickly find mission, stats, and products?
Navigation clarity: were key actions easy to locate?
Visual alignment: did color palettes and layouts support CND’s approachable yet professional brand?
Flexibility: could the template adapt as the organization grows?
The final chosen template!
Why we chose this template
We selected a template with a clean hero section, simple navigation, and subtle animations that immediately highlight CND’s mission. Its neutral palette integrated seamlessly with the brand, and the layout allowed clear presentation of statistics, products, and calls to action. Overall, it offered a scalable, user-centered foundation that balanced clarity, flexibility, and ease of maintenance.
The final chosen template!
Develop — Style guide
Defining the visual direction
Once the structure was approved, I defined the visual direction and style guide. Our visual direction needed to support the project’s objectives while balancing CND’s neutral brand requirements with a modern, compelling look:
Authoritative
Reinforces credibility for journalists and researchers
(via clean type hierarchy and structured layout)
Warm
Humanizes data-driven work without political overtones
(via neutral blues + cream neutrals)
Modern
Supports the shift toward a product-focused strategy
(via simplified UI patterns and updated visual framing)
Typography prioritized readability; color choices avoided political associations while offering enough contrast to support accessibility.
Style Guide
Typography
Simple fonts and standard sizes were chosen to maximize readability and accessibility across devices.
Colour Palette
Neutral blues and creams formed the foundation, staying aligned with CND’s nonpartisan brand. Complementary orange accents were introduced to draw attention where needed, while remaining feasible within the Squarespace color limitations.
Develop — Product mockups
Visualizing the product experience
To help users quickly understand CND’s products, we designed custom product mockups for the hero and key product sections. These illustrate how their tools work and what kind of insights they provide, giving users a more concrete entry point into the product experience.
Early product screens used to explore key states before translating them into mockups.
Final mockups used in the hero and product sections to visually represent CND’s tools.
Deliver — Results
Modernizing CND’s brand and experience
After implementing the rebranding efforts, the Center for New Data has undergone a few changes and the final design achieved three key outcomes:
Modern Experience
Updated IA, clearer hierarchy, structured storytelling.
Stronger Credibility
Neutral visual system reinforces nonpartisanship.
Better Usability
Improved mobile layout, readability, and accessibility.
“It was inspiring to work alongside Develop for Good’s students, and seeing them want to contribute to strengthening our democracy in meaningful ways”.
— Martine Chaussard and Jacqueline Edwards
What I learned
Challenges
Navigating tight deadlines
Working under setbacks and tight deadlines meant having to focus less on perfecting every detail. As a team, we had to identify how we can create the most impact for users and our client, and commit to those decisions.
How to balance vision with feasibility for great design
Since CND's brand needed to stay neutral, we had to design in a way that was tech-forward and compelling without leaning into partisan visuals. Our visuals had to communicate inclusivity and trust.
Key Takeaways
Limitations can't be avoided but they don't have to limit the solution
Working within the given constraints in Squarespace pushed me to think how I can design with intention. I learned how to adapt creativity to the platform while still maintaining a clean and modern experience. Good UX isn't just about unlimited freedom, it's about making meaningful decisions with what's available.
Great design is created through collaboration and not just handed off
Focusing on collaboration with a nonprofit team taught me how important communication is to meaningful design. I learned how to translate abstract goals such as neutral, data-driven, and non-partisan into concrete design decisions.
Personal reflection
Looking back on the term…
Working with Develop for Good gave me the amazing opportunity to design for a real cause and see how thoughtful design can have a tangible impact. Collaborating with passionate designers and mentors helped me to not only grow my design skills, but also my collaboration and communication. I'm especially thankful for the guidance and encouragement I received throughout the entire project as it reminded me why I love designing products that helps others.
Special thanks to:
Stephanie & Shabicha: Thank you for being great leads to help guide us through the project and keep us on track so that we could reach our deadlines.
Emmett, Anupriya, Jonathan, Yvonne, Katie & Rosalie: Fellow UXers! It was a pleasure to work with each and every one of you, and get the chance to learn alongside all of you. Wishing you guys the best of luck with everything!
Good design bridges cultures. Great design builds belonging.
Thanks for checking out this case study! If you have any questions or want to know more, don't hesitate to contact me. While you're still here, please feel free to check out my other work or learn more about me. :)