Volunteer Canvassing App Redesign
Volunteer Canvassing App Redesign
Volunteer Canvassing App Redesign
product design
design systems
heuristic analysis
branding
ui redesign
Client: Empower Project
Client: Empower Project
Relational organizing tech for the progressive movement
Relational organizing tech for the progressive movement
Relational organizing tech for the progressive movement
Empower Project focuses on revitalizing political organizing to help boost voter turnout, especially for BIPOC communities, through relational organizing. Relational organizing is the practice of tapping into personal networks of friends and family to create change. Empower's software helps communities, progressive organizations, and nonprofits leverage personal relationships to build power and expand the electorate.
I worked with a team of eight internal stakeholders to redesign Empower's branding, design system, and visual UI design. Core team: Lauren Janas (Product Manager), Sam King (Head of Engineering)
Empower Project focuses on revitalizing political organizing to help boost voter turnout, especially for BIPOC communities, through relational organizing. Relational organizing is the practice of tapping into personal networks of friends and family to create change. Empower's software helps communities, progressive organizations, and nonprofits leverage personal relationships to build power and expand the electorate.
I worked with a team of eight internal stakeholders to redesign Empower's branding, design system, and visual UI design. Core team: Lauren Janas (Product Manager), Sam King (Head of Engineering)
Branding
Branding
Branding
The new Empower identity aims at modernizing, refining, and unifying the brand. The goal was to make their visual voice reflect positivity, friendliness, diversity, and community.
I redesigned the colors, typefaces, and photographic style, while keeping the logo untouched.
Colors: The existing primary brand color was a saturated purple, which the team felt misrepresented the political party and offended the eyes. Since campaigns and organizations use Empower as a platform for canvassing, they wanted to volunteer facing app to be somewhat brand neutral, allowing the client's brand and colors to shine through. Simultaneously, the marketing team wanted the flexibility of a diversified color palette for Empower's marketing and social media. I created primary blacks and secondary blues for the platform UI. Along with brighter, tertiary colors to be used sparingly as accents throughout the app UI and more liberally in marketing materials.
Typography: For headings, Martel is a classic and timeless serif representing clean design. I balanced this with Noto Sans as the body typography, a simple, modern, and friendly san serif.
Photography: We defined a photographic style that focuses on highlighting moments of genuine human connection and sharing conversation, while weaving in representation diversity.
The new Empower identity aims at modernizing, refining, and unifying the brand. The goal was to make their visual voice reflect positivity, friendliness, diversity, and community.
I redesigned the colors, typefaces, and photographic style, while keeping the logo untouched.
Colors: The existing primary brand color was a saturated purple, which the team felt misrepresented the political party and offended the eyes. Since campaigns and organizations use Empower as a platform for canvassing, they wanted to volunteer facing app to be somewhat brand neutral, allowing the client's brand and colors to shine through. Simultaneously, the marketing team wanted the flexibility of a diversified color palette for Empower's marketing and social media. I created primary blacks and secondary blues for the platform UI. Along with brighter, tertiary colors to be used sparingly as accents throughout the app UI and more liberally in marketing materials.
Typography: For headings, Martel is a classic and timeless serif representing clean design. I balanced this with Noto Sans as the body typography, a simple, modern, and friendly san serif.
Photography: We defined a photographic style that focuses on highlighting moments of genuine human connection and sharing conversation, while weaving in representation diversity.
Design System
Design System
Design System
Empower wanted to refresh and modernize their UI design across apps for their volunteers, campaign organizers, and campaign directors. The new design system would aim to create consistency across products and efficiency in design and development. I began by performing a design audit on Empower's apps, collecting and documenting all components and documenting inconsistencies.
Empower wanted to refresh and modernize their UI design across apps for their volunteers, campaign organizers, and campaign directors. The new design system would aim to create consistency across products and efficiency in design and development. I began by performing a design audit on Empower's apps, collecting and documenting all components and documenting inconsistencies.
Empower wanted to refresh and modernize their UI design across apps for their volunteers, campaign organizers, and campaign directors. The new design system would aim to create consistency across products and efficiency in design and development. I began by performing a design audit on Empower's apps, collecting and documenting all components and documenting inconsistencies.
Colors
Typography
Grid & Spacing
Shape, Border, & Elevation
Icons
Page Containers
Foundations
Foundations
Foundations
Next, I laid the design system foundations, which provide the core principles and building blocks that guide the visual and functional aspects of the product. These foundational elements ensure consistency, clarity, and efficiency across the entire system. Foundation pillars include: colors, typography, grids & spacing, shape, border, elevation, icons, logo usage, and page containers.
Next, I laid the design system foundations, which provide the core principles and building blocks that guide the visual and functional aspects of the product. These foundational elements ensure consistency, clarity, and efficiency across the entire system. Foundation pillars include: colors, typography, grids & spacing, shape, border, elevation, icons, logo usage, and page containers.
Next, I laid the design system foundations, which provide the core principles and building blocks that guide the visual and functional aspects of the product. These foundational elements ensure consistency, clarity, and efficiency across the entire system. Foundation pillars include: colors, typography, grids & spacing, shape, border, elevation, icons, logo usage, and page containers.
Components
Components
Components
Finally, I created components, reusable, standardized building blocks used to create the UI. They encapsulate visual styles, interactive behavior, and functional logic, making design and development efficient and scalable. I started from the smallest, most fundamental elements and gradually scaled to more complex, composite components.
Finally, I created components, reusable, standardized building blocks used to create the UI. They encapsulate visual styles, interactive behavior, and functional logic, making design and development efficient and scalable. I started from the smallest, most fundamental elements and gradually scaled to more complex, composite components.
Visual Redesign
Visual Redesign
Visual Redesign
With the design system in place, I redesigned the UI for volunteers, campaign organizers, and campaign directors on desktop and mobile screens.
With the design system in place, I redesigned the UI for volunteers, campaign organizers, and campaign directors on desktop and mobile screens.
App for Canvassing Volunteers
App for Canvassing Volunteers
App for Canvassing Volunteers
Empower's central app is used by campaign & nonprofit volunteers in order to reach out to their personal network about candidates, issues, ballot measure, voter registration, etc. Some of the key features of the app includes adding contacts, matching them to the voter file, taking assigned actions like specific questions and conversations with contacts, and logging their contacts' responses. I started the redesign with the app used by this core user group.
Empower's central app is used by campaign & nonprofit volunteers in order to reach out to their personal network about candidates, issues, ballot measure, voter registration, etc. Some of the key features of the app includes adding contacts, matching them to the voter file, taking assigned actions like specific questions and conversations with contacts, and logging their contacts' responses. I started the redesign with the app used by this core user group.
Admin: Directors & Organizers
Admin: Directors & Organizers
Admin: Directors & Organizers
Directors and organizers of political campaigns, organizations, and nonprofit use Empower's internal admin tool to manage the campaign, monitor performance, manage users, and add volunteer actions. I completed the redesign by reskinning all elements in the existing UI for these internal campaign users.
Directors and organizers of political campaigns, organizations, and nonprofit use Empower's internal admin tool to manage the campaign, monitor performance, manage users, and add volunteer actions. I completed the redesign by reskinning all elements in the existing UI for these internal campaign users.
