Civic Champs is a benefit corporation that makes impactful and intuitive software for volunteer management and engagement. As a UX Designer for the team, I've had the privilege of working on both their web and mobile products.
Lead Designer
Figma, Figjam, Zoom, Notion, Canva, Webflow
As the UX and Product Designer at Civic Champs, I created new digital experiences and improved existing ones for its web and mobile products
My journey at Civic Champs began as a UX Design Intern, where I honed my design skills and contributed to the team's success. Recognizing my accomplishments and potential, I was promoted to a permanent Design and Marketing Lead role, a testament to my adaptability and growth mindset.
I learned the importance of implementing and adhering to design systems, realizing their pivotal role in ensuring cohesiveness and efficiency within the design process.
I gained experience designing within financial and creative limitations, delivering impactful designs that meet business and technical constraints while aligning with user needs.
To collaborate closely with development teams, I created comprehensive design documentation and provide clear explanations, ensuring a smooth transition from design to implementation.
This role fostered a crucial understanding of designing divergently, offering my supervisor various creative options to stimulate brainstorming sessions. This approach not only encouraged a collaborative atmosphere but also honed my ability to explore diverse design solutions, ultimately leading to more innovative and refined outcomes.
I meticulously consider various states and intricacies within designs. Navigating through projects, I foresee and address different states, ensuring a seamless user experience by anticipating and designing for scenarios beyond standard interactions.
Here are a couple examples of new features that have been implemented into the Civic Champs platform to allow nonprofits to better track and manage their volunteers.
Overview: complete notification experience and management page.
There were no similar features to replicate existing design pattern from, so this was more challenging to work. The various states made it especially complex, including as you can see below, a full inbox, an empty inbox, a few notifications, hovering over a notification, deleting an individual notification, clearing all notifications, notification settings, when notifications are disabled, and more.
.png)
Overview: s to keep roles organized and up-to-date. Includes table, adjusting viewing order, merging roles, creating new ones, and more.
You can find each component of the system below!
1. Table: view role name, order, type, status, and usage in the software
2. Adjust roles order: change how the roles are displayed when users select from there throughout the platform
3. Merge roles: combines duplicate roles to clean up data
4. New/delete roles: adds or removes roles that shift can be created with
5. Adjust Column Display: changes how columns appear in the table
Overview: a page for admin to view volunteers' recent activities (shift, role, attendance, waiver completion).
You can find a few different design options below - this is an example of designing divergently!
1. Simple Table: this is the cheapest and fastest option that follows the traditional table pattern. Users can see event registrants from yesterday/today/tomorrow and nothing further.
2. Metrics: same as the Simple Table with metrics at the top for easy reporting.
3. By Event: tables sections off by event for easier sorting.
4. Color Coded with Calendar: events are all in the same table distinguished by color along with a day-of calendar at the top to get an idea of what's going on for the day at a glance.
5. Modular: users may choose from a simple table and a graphical representation of their upcoming events. The graphical option is better for users wanting to view information on individual events.
In the end, we went with option 1, Simple Table, due to budget and time constraints.
The following examples show how I revamped existing Civic Champs features to better cater to user needs. Through user research and feedback analysis, I simplified workflows, improved navigation, and enhanced the overall interface. The result was a more intuitive and streamlined user experience, aligning with our commitment to providing an engaging and efficient platform for our diverse user base.
Overview: How admins view and send messages to volunteers.
Overview: entire experience for new users creating an account and overlay for easy onboarding into the software.
I wanted new customers to feel invited and excited to use our platform since this is the first thing they are seeing. To do so, I added some personality with the wave motif at the top, created friendly copy, adhered to updated design patterns, added breadcrumb navigation so users knew how far they were in the process, added a review page to verify information, and an overlay once they entered the platform to point towards important features.
Overview: the system in which admins view, add, and manage tags.
Below you can see the redesigned UI for creating a tag and picking the color. Previously, users were able to pick any color, making some users' choices unreadable. Now, there are 8 pre-selected color choices for admins to pick from. Refining choices meant that users are not overwhelmed by choice, we adhere to our design patterns, and all tags are readable.
Overview: Viewing and editing volunteer contact information, writing notes, and viewing waivers, questionnaires, and volunteer reflections.
The biggest issue with the previous volunteer profiles design was that information was difficult to find and view. Especially when adjusting to various breakpoints, volunteers' information was impossible to see. I adjusted the page to adhere to updated design patterns, be responsive at breakpoints, added a notes feature, and added dropdowns, search bars, and new views so information was discoverable.
Overview: Viewing, editing, and creating new questionnaires and surveys.
I added new features for users to: view version history, view the questionnaire as someone filling it out would, export answers, and quickly activate or inactivate it. The main creating and editing experience was made to mimic Google Forms since users are already familiar with it. Now users do not have to think while they're using the feature since it comes naturally!
.png)
