Code for Chicago

Introduction

• Voma is an in-house project intended to effectively onboard new volunteers and align them with projects and growth opportunities.

• Voma is both a volunteer management system and a project management system.

• Volunteers are stored with unique skill sets, assigned to projects, and visualized within the tool.

Problem

Code for Chicago relies heavily on the dedication and skills of its volunteers to drive various civic technology projects. However, the organization faces significant challenges in managing the onboarding process for new volunteers and effectively aligning their skills with suitable projects. The absence of a unified system has resulted in inefficiencies, making it difficult to track volunteer skills, assign them to projects, and monitor their progress.

The key problems that Voma aims to solve are:

1. Inefficient Onboarding: The current onboarding process for new volunteers is time-consuming and lacks structure, leading to delays and potential loss of volunteer interest.

2. Skill-Project Mismatch: Without a systematic approach, aligning volunteers' skills with the right projects is challenging, resulting in underutilized talent and suboptimal project outcomes.

3. Lack of Visibility: Project managers and volunteers struggle with limited visibility into volunteer assignments and project statuses, hindering effective management and coordination.

Objectives

Process

1. Foundation Development

• Typography: Selected readable and visually appealing fonts to establish a clear hierarchy and improve readability across the platform. Consistent use of typefaces ensured a cohesive look and feel.

• Color Palette: Established a consistent color palette that reflects the brand’s identity and ensures accessibility. Primary, secondary, and neutral colors were defined to be used across various components.

• Logo and Icons: Designed a new logo that encapsulates Voma's mission and values. Created a set of intuitive and visually consistent icons to represent different actions and statuses within the system.

2. Component and Pattern Creation

• UI Components: Designed reusable UI components such as buttons, input fields, forms, modals, and navigation bars. Each component was created to be versatile and adaptable to different contexts within the platform.

• Design Patterns: Developed design patterns for common functionalities such as user registration, profile management, project assignment, and progress tracking. These patterns ensured consistency and efficiency in design and development.

• Interactive Elements: Defined interactive elements with clear states (e.g., hover, active, disabled) to enhance usability and provide visual feedback to users.

3. Final Design with User Flow

• User Onboarding Flow:

  • Welcome Screen: Introduces new volunteers to Voma with a friendly and informative welcome message.

  • Registration Form: Collects essential information from volunteers, including their skills, interests, and availability.

  • Profile Setup: Allows volunteers to complete their profiles by adding detailed information about their experiences and preferences.

• Volunteer Management Flow:

  • Dashboard: Displays an overview of the volunteer’s activities, assigned projects, and upcoming tasks.

  • Skill Matching: Provides a tool for project managers to match volunteers’ skills with suitable projects based on project requirements.

  • Assignment View: Shows detailed information about the projects volunteers are assigned to, including team members, objectives, and deadlines.

• Project Management Flow:

  • Project Overview: Gives project managers a comprehensive view of all ongoing projects, their statuses, and assigned volunteers.

  • Volunteer Allocation: Enables project managers to allocate volunteers to projects based on their skills and availability.

  • Progress Tracking: Allows project managers to monitor the progress of each project, track milestones, and provide feedback to volunteers.

Challenges

• Balancing User Needs: Addressing the varying needs of volunteers and project managers while maintaining a cohesive design.

• Ensuring Scalability: Designing a system that can scale with the growth of Code for Chicago’s volunteer base and project portfolio.

Outcomes

• Improved Onboarding Experience: Streamlined the process for onboarding new volunteers, reducing time and effort.

• Efficient Volunteer Assignment: Enhanced the matching of volunteers' skills with suitable projects, leading to better project outcomes.

• Comprehensive Project Management: Provided project managers with a holistic view of project statuses and volunteer involvement.

Lessons Learned

• User-Centered Design: Prioritizing user feedback and involving stakeholders throughout the design process is crucial for creating a successful product.

• Importance of Scalability: Designing with scalability in mind ensures the system can grow and adapt to future needs.

• Effective Documentation: Comprehensive and clear documentation is essential for successful implementation and maintenance of the design system.

Conclusion

Working on the Code for Chicago design system was a valuable learning experience. As a UX designer, I gained hands-on experience in creating a design system, collaborating with cross-functional teams, and contributing to a project that significantly impacts the community. This project enhanced my design skills and reinforced the importance of consistency and efficiency in creating exceptional user experiences.

This revised case study focuses solely on the design of the design system, detailing your role, process, challenges, outcomes, and lessons learned. Let me know if there are any specific details or sections you would like to expand on!