UX design
Web design
Visual design
Community • 10 min read
Role
UX Designer
Team
1 Product Manager
1 Design Manager
7 UX Designers
Timeline
October 2023 - March 2024
Tools
Figma, Squarespace
Overview
What is Develop for Good?
Develop for Good is a nonprofit that supports college students as they build tech for nonprofits under industry mentorship. Given the opportunity to blah blah blah
Weidmüller is a manufacturing and electronics company headquartered in Germany. The company is a manufacturer of industrial automation, interconnection, and interface solutions that are used to support customers around the world in the industrial environment of power.
About the Center for New Data
The Center for New Data is a non-profit non-partisan organization dedicated to supporting a thriving democracy by bringing advanced data science and artificial intelligence tools to non-partisan civic organizations that support voting rights. This is accomplished through the use of the Voting Access Monitor, which enables civic partners to report on and advocate for voters' rights to easily access their polling locations, cast their votes, and participate in the US democracy.
The organization works with civic groups, technology companies, and academics to bring pioneering methodologies into the democracy movement. Today, voter registration rates are at an all-time high. But as more and more voter suppression bills are adopted, access to polls is increasingly challenging. So, the organization’s vision is to create and present actionable data for those working on the frontlines of the US democracy.
Project Objective
Building a tech-forward presence
The Center for New Data’s original website had very basic design and functionality, and it didn’t reflect the organization’s mission to the fullest capacity. Keeping this in mind, the team aimed to achieve three key goals in rebranding the website:
Implementing a modern design that allows for a seamless user experience.
Ensuring relevant information is prominently displayed on the website so the user can gain a better understanding of the organization.
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.
Overall, the site wasn’t as tech-forward in comparison to other nonprofit sites. So, the objective was to rebrand the organization’s site as tech-forward and emphasize the use of data-driven insights to advocate for fair and inclusive electoral practices.
The Center for New Data wants to ensure that their mission, products, and impact are clearly articulated through the new website in order to best engage viewers and individuals interested in their organization. By revamping website features and redesigning the overall layout, the organization can more effectively showcase its dedication to developing technology for social good. This will help users grasp the organization's mission and feel compelled to engage with it.
Solution
Check out the final site!
Find out how we got here 👇
Design Process
Empathize
Client Alignment
Define
Comp. Analysis
Content Flow
Results
Final Changes
Key Takeaways
Next Steps
Empathize
Connecting with the client
During the first few meetings with the client, we got to know more about the organization and the project’s goals, including target users, motivation behind the project, and additional background information. 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, as it serves their current purposes well.
With the scope of the project shifting to focusing entirely on the redesign, most engineering-related requests fall outside of the project’s boundaries. Our team was to focus entirely on the website’s overall design and emphasize client satisfaction. We narrowed down the main functions that CND’s website had to have:
Modern Design: Users should have a seamless user experience.
Relevant information displayed on the website: Users should be able to browse through the CND site so that they can gain a better understanding of the organization.
Display of data projects/products by CND: Users should be able to see the technical compatibility of the organization by viewing previous and current data projects by CND.
Other client requests also included a design with neutral colors to uphold a non-partisan identity, highlighting ways users can get involved, ensuring consistent design throughout the design, and maintaining an overall modern and tech-forward UX design.
Define
Competitive Analysis
For the designers, the main focus of the website was its visual design as the client had a clear idea of what they wanted the website to do. Our team looked into other websites such as Recidiviz, Benshi, and turn.io for inspiration.
Each of these websites had a modern tech-forward design, clearly showcased their impact and respective initiatives with case studies, and effectively engaged users through call-to-actions.
Content Flow
During our client meetings, we discussed the specific content they would like to include in the redesigned website and how they would like to convey it. The overall content of the site was provided by the CND and we would propose a layout on how it can be displayed effectively for users. We were given a list of the required items on the navigation bar and home pages, then these were organized into a navigation hierarchy.
This helped in giving our team a clear idea of the client’s vision for the new website before we started designing our lo-fi wireframes.
After discussing with the client, some main changes included:
Navigation Bar:
Proposed Structure:
Initiatives
Observing Democracy (Possibly include a History Section?)
Polling Equity Project
About
About Us
Our Partners/Sponsors
Meet the Team/Our Team/Who We Are
Our Approach (Examples: recidiviz, data.org)
Get Involved
Volunteer
Community Engagement
Impact
Impact Stories/Case Studies/Testimonials (Examples: recidiviz)
In the News/Press
Donate (Examples: democracy.works)
Revised Structure:
Product
Observing Democracy (Include a History Section)
Polling Equity Project
Impact
Impact Stories/Case Studies/Testimonials (Examples: recidiviz)
In the News/Press
About
About Us
Our Approach (Examples: recidiviz, data.org)
Our Partners/Sponsors
Meet the Team/Our Team/Who We Are
Get Involved
Donate (Call to Action Button)
Home Page:
Proposed Structure:
Hero Section Headline/One-liner
Subheading
Call to action: See our current initiative/ Explore / See our work/ Try us out
Who we are / How we use data to promote voter equity • Subheading/blurb
Stepper graphic
Screenshots of our product with captions
Our approach preview
Subheading/blurb
Product image/infographic
CTA to link to "Our Approach" (Our approach)
Target audience/stakeholders
Blurbs for each type of user * (Attorney, Voter Protection Advocates, Public, etc)
Our impact preview
Subheading/blurb
CTA to link to "Impact Stories"
In the news preview
Articles/Previews
CTA to link to "In the News" (See all)
Our partners preview
Subheading/blurb
CTA to link to "Our Partners" (See all)
Revised Structure:
Hero Section
Photo/Visual/Graphic (As the background)
Headline/One-liner
Subheading
Call to action
Polling Equity Project
Short blurb about the tool is
Screenshot of the data viz tool
“Learn more” CTA to link to in depth product page.
What we do and why we do it
Historical context/What the problem is/reiterate mission
“Learn more” CTA to link to historical details/About Us
Stepper graphic (show progression of how we solve the problem)
3 Core services/Ways to engage with Product
Overview 3 core services (possible info graphic)
“Learn more” CTA links to product page & Contact Us
Who the product is for
** List primary stakeholders & blurbs for each one
Our impact preview
Subheading/blurb
Case studies preview
“See all” CTA to link to full “Impact Stories” page.
In the news preview
Articles/Previews
“See all” CTA to link to “In the News” page
Our partners preview
Subheading/blurb
“See all” CTA to link to “Our Partners” page
Ideate
Mobile Lo-fis
As part of the initial design tasks, we worked on designing sample mobile homepages for the Center for New Data. The idea behind this exercise was to explore various design approached we could take with respect to exploring different themes, looks, and outlines for the website. For the mobile lo-fis, we designed them using Figma, using the information we got from the client regarding the overall look they wanted to create, any design requests they had in mind, specific requirements regarding the colors they wanted us to include or exclude, etc:
A few mobile custom designs we made.
Exploring Templates
Given our tight deadline, we decided to pivot towards using a Squarespace template rather than implement 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 focused on the overall themes, the color palettes, the general themes of the site, and the individual components of the different templates. Afterwards, we compared the pros and cons of each template and how they contribute to the client’s goals to put together the frame for our final website.
All of the templates we considered.
The final chosen template! The link: https://almar-fluid-demo.squarespace.com/
Page Designs
After we had selected the template that best matches the client’s goals, we began to design each website page. This included:
Home Page
Product
About Us
Impact
Stories
Style Guide
One of our primary deliverables was a style guide, so that we could easily transfer ownership of the project once we left.
Typography
For the typography of the website, we decided to focus on simple fonts and standard font sizes, focusing on readability, and accessibility.
Colour Palette
For the color palettes designed for the site, we selected a set of neutral blue colors and cream colors. The Squarespace site was limited to just five colors, but we also introduce some orange complementary accents that the client could use to draw attention to text or content.
Hero Section & Product Mockups
We also designed a few custom mockups that would live in the hero section and the product description portions of the website. They were designed with the intention to draw more visual interest to the data visualization product that CND was building.
Results
Modernizing CND's brand and experience
After implementing the rebranding efforts, the Center for New Data has undergone a few changes:
A more modern website design
Improved user experience
Product-focused homepage that brands CND as a tech nonprofit.
What I learned
Challenges
⏳ Tight deadlines
Given the setbacks and timeline we had, our team needed to deliver a fully rebranded site quickly and on schedule. This required prioritizing features and focusing on the highest-value design updates.
🎨 Template vs. custom design trade-offs
As we shitfed to using a template over custom designs, we navigated the challenge of wanting more design flexibility but pivoting to templates for feasibility, learning how to optimize within constraints.
⚖️ Balancing client needs and engagement
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. We had to consider how to design visual that communicate inclusivity and trust.
Key Takeaways
⚠️ Designing within given constraints
With the limited time we had, this meant learning how to adapt creativity within Squarespace’s limitations. We had to balance client expectations and platform restrictions while still delivering a modern, user-centered design.
🚀 Impact-driven design
CND's goal reinforced the importance of designing not just for usability, but also for mission-driven storytelling, showing how design can amplify advocacy and civic engagement.
🤝 Client collaboration
The whole project focused on client collaboration and I gained experience in communicating with a nonprofit client. This involves learning how to translate abstract goals (tech-forward, non-partisan, product-focused) into tangible 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!
Some of our team!
