Campaign Dashboard

View prototype
Type
Responsive Web App
Role
UX/UI Design, Research
tools
Figma
duration
6 weeks
Background

This presentation concept outlines the development of a versatile dashboard for Summer Lee's re-election campaign as a local Pittsburgh senate candidate. The dashboard aims to efficiently manage donations, volunteers, and events. Despite a strong base of enthusiastic supporters, the campaign currently faces coordination challenges due to reliance on various tools. Consolidating these functions into a single dashboard is proposed to enhance supporter involvement.

My Role

I managed every aspect of this project solo, from concept to presentation. I navigated through discovery, research, design, and testing, all while adhering to a tight, self-managed schedule to meet the deadline.

The Problem

Managing volunteers involves juggling various communication tools based on individual preferences, using multiple platforms regardless of their features, and handling different databases without an easy way to import, edit, and share data. A customizable dashboard to centralize and prioritize key tasks is essential for maintaining organization and focus.

Design Process

1.

Research & Strategy

2.

Design & Prototype

3.

Test & Iterate

1. Research & Strategy

Research Goals and Methodologies

We want to know how people decide what to watch and how they watch it so that we can create an app that fills a market gap. To answer these questions, I will use three different research methodologies:


  1. Competitor Analysis – See what features other similar dashboards commonly used for campaigns offer
  2. Survey – Distributed to campaign volunteers, workers, and individuals with experience in the general non-profit sector
  3. Interview – Followed up with a small group of volunteers and campaign workers, the limited sample size posed a significant constraint for the project
Competitor Analysis

I analyzed platforms commonly used during election campaigns, evaluating their features, strengths, and weaknesses. This provided valuable market insights and guided the selection of features for integrating into a custom, efficient campaign dashboard.

Survey

I distributed surveys to campaign volunteers, workers, and individuals with non-profit sector experience to understand their challenges with existing software and dashboards. Feedback from the small, but resourceful group of participants guided the direction of my interviews.

Interview

I conducted interviews with three individuals experienced in campaign election work and non-profit work. These participants represented a diverse range of technological proficiency levels, which is crucial for ensuring that my app is user-friendly for everyone, including those who are not tech-savvy, and can quickly help onboard new volunteers. Using affinity mapping, I organized interview responses to identify recurring themes and issues. Among all participants, common themes included difficulties in managing volunteers, juggling multiple productivity tools, and navigating various communication preferences among volunteers.

POVs and HMWs

Based on my research, I crafted Points of View (POV) statements that captured what people were saying. Then, I turned those insights into How Might We (HMW) questions, flipping challenges into opportunities for solutions. After considering several options, I selected the one that most closely resonated with the feedback gathered from surveys and user interviews.

Personas

Using the POV statements and HMW questions as a foundation, I constructed a persona profile to reference throughout the design process. This helped to ensure that the product resonated with the needs, goals, frustrations, and pain points.

1. Research & Strategy

Research Goals and Methodologies

We want to know how people decide what to watch and how they watch it so that we can create an app that fills a market gap. To answer these questions, I will use three different research methodologies:


  1. Competitor Analysis – See what features other similar dashboards commonly used for campaigns offer
  2. Survey – Distributed to campaign volunteers, workers, and individuals with experience in the general non-profit sector
  3. Interview – Followed up with a small group of volunteers and campaign workers, the limited sample size posed a significant constraint for the project
Competitor Analysis

I analyzed platforms commonly used during election campaigns, evaluating their features, strengths, and weaknesses. This provided valuable market insights and guided the selection of features for integrating into a custom, efficient campaign dashboard.

Survey

I distributed surveys to campaign volunteers, workers, and individuals with non-profit sector experience to understand their challenges with existing software and dashboards. Feedback from the small, but resourceful group of participants guided the direction of my interviews.

Interview

I conducted interviews with three individuals experienced in campaign election work and non-profit work. These participants represented a diverse range of technological proficiency levels, which is crucial for ensuring that my app is user-friendly for everyone, including those who are not tech-savvy, and can quickly help onboard new volunteers. Using affinity mapping, I organized interview responses to identify recurring themes and issues. Among all participants, common themes included difficulties in managing volunteers, juggling multiple productivity tools, and navigating various communication preferences among volunteers.

POVs and HMWs

Based on my research, I crafted Points of View (POV) statements that captured what people were saying. Then, I turned those insights into How Might We (HMW) questions, flipping challenges into opportunities for solutions. After considering several options, I selected the one that most closely resonated with the feedback gathered from surveys and user interviews.

Personas

Using the POV statements and HMW questions as a foundation, I constructed a persona profile to reference throughout the design process. This helped to ensure that the product resonated with the needs, goals, frustrations, and pain points.

2. Design & Prototype

Feature Roadmap

With a plethora of potential features to facilitate the work of volunteers and workers, prioritization became essential due to project scale and time constraints. I determined the initial implementation based on the frequency of mentions in my research.


Information Architecture

Before delving into wireframes, I established the dashboard hierarchy by creating a sitemap, which served as a reference point throughout the design process.

Branding
Wireframing

After outlining low-fidelity wireframes for essential screens related to desired user tasks, I refined the information hierarchy. Once content with the layout, I progressed to creating mid-fidelity screens and a prototype for usability testing purposes.

2. Design & Prototype

Feature Roadmap

With a plethora of potential features to facilitate the work of volunteers and workers, prioritization became essential due to project scale and time constraints. I determined the initial implementation based on the frequency of mentions in my research.


Information Architecture

Before delving into wireframes, I established the dashboard hierarchy by creating a sitemap, which served as a reference point throughout the design process.

Wireframing

After outlining low-fidelity wireframes for essential screens related to desired user tasks, I refined the information hierarchy. Once content with the layout, I progressed to creating mid-fidelity screens and a prototype for usability testing purposes.

2. Design & Prototype

Feature Roadmap

With a plethora of potential features to facilitate the work of volunteers and workers, prioritization became essential due to project scale and time constraints. I determined the initial implementation based on the frequency of mentions in my research.


Wireframing

After outlining low-fidelity wireframes for essential screens related to desired user tasks, I refined the information hierarchy. Once content with the layout, I progressed to creating mid-fidelity screens and a prototype for usability testing purposes.

User flows

I developed user flows to illustrate the key pathways users will navigate while interacting with the app.

2. Design & Prototype

Feature Roadmap

With a plethora of potential features to facilitate the work of volunteers and workers, prioritization became essential due to project scale and time constraints. I determined the initial implementation based on the frequency of mentions in my research.


Information Architecture

Before delving into wireframes, I established the dashboard hierarchy by creating a sitemap, which served as a reference point throughout the design process.

Branding
UI Kit

I adjusted a Material 3 kit with Kismet's branding to keep it simple for the development phase.

Wireframing

After outlining low-fidelity wireframes for essential screens related to desired user tasks, I refined the information hierarchy. Once content with the layout, I progressed to creating mid-fidelity screens and a prototype for usability testing purposes.

User flows

I developed user flows to illustrate the key pathways users will navigate while interacting with the app.

3. Test & Iterate

Usability Testing

I recruited 8 participants for unmoderated user testing, asking them to complete 2 tasks to uncover any potential UX or flow issues before advancing to high-fidelity wireframes. Success was measured by participants completing all tasks within a reasonable timeframe with minimal to no errors.

Wins

  • Participants navigated the prototype with ease
  • Features received positive feedback
  • The Information Architecture was largely effective, with minor revisions required

Opportunities

  • Add prominent colors to enhance important CTAs
  • Expand on copy and CTAs to offer better direction on how to use the dashboard features
Priority Revisions

Focusing on the challenge participants faced in locating the "assign routes" button, I maintained its original placement but made it sticky for improved accessibility. Subsequent testing with high-fidelity wireframes and color integration confirmed the successful resolution of the button visibility issue.

Final Results

View prototype
Conclusion

Following multiple rounds of user testing and design iterations, I am confident in the inclusion of all necessary features to present an initial concept alongside a roadmap for future features.

Lessons learned:

It's essential to budget for interviews with participants who have relevant experience. This ensures that their needs and perspectives are thoroughly considered in the development process.

Previous UX case study

There is no previous UX case study.
Back to all case studies

Next UX case study

There is no next UX case study.
Back to all case studies