logo

Get in touch

Awesome Image Awesome Image

CD Engage

Product design for Charity Dynamics newest app solution allowing non-profits to create a personalized mobile first space building community for the people connected to their cause.

Awesome Images

Background

Charity Dynamics leads the white label mobile application space for non-profits looking to fundraise for their event’s powered by the top peer-to-peer fundraising management systems.

What does a non-profit do when they want to build community online?

Currently most non-profits utilize Facebook's free group tools. This limits their community engagement to people actively using Facebook. The reliance on a third party social media site limits the organization's control of content, moderation. and privacy.

image shape shape

How might we offer a private space where engagement is sparked and missions comes to life?

Charity Dynamics began designing a new white-label mobile application allowing non-profits to build community, strengthen relationships, and increase awareness for their cause, independent of any existing content management tools or software.

The Project

My Role

Product Designer:
+ User Interaction
+ Interface Design
+ Design System
+ Icons & Badges

The Team

Product Manager: Sean W.
UX Designer: Brenda M.
Developers: Steven Y., Shivani p.
QA: Tsion Z.

Deliverables

+ Style Guide
+ XD Prototype
+ Design System
+ User Testing
+ A/B Testing

Timeline

Start: February 04, 2021
V1 Design Handoff: May 5, 2021
V1 Deployment: June 20, 2022
V2 Deployment: August 24, 2023

My Impact

The team’s UX designer conducted initial research and developed the app wireframes. I was responsible for the mobile application’s interaction and interface design. In true agile form we moved quickly through design sprints to development. While the initial development was taking place I conducted moderated usability testing.
I continue to work closely with the product manager to improve the product’s design. This includes conducting additional research to identify new areas for usability improvement, exploring new design options and managing the design system.

An Iterative

Design Process

Understand

01
Empathize

+ Interviews
+ User Observations
+ Support Case Review

Explore

02
Create

+ Wireframe
+ Style Guide
+ Design System

Design

03
Prototype

+ Native iOS Prototype
+ Native Android Prototype
+ Dark Version

Evolve

04
Test

+ Moderated User Testing
+ A/B Testing
+ Empathize, Explore & Design Again

Style Guide &
Design System

Our white label mobile application allows organizations to customize their logo and brand colors using an admin dashboard. The style guide document shows an example of a fictional non-profit’s brand in use. The design system allows for the colors to be updated quickly through out the design.

App Prototype

I create and manage a 92 screen interactive prototype with Adobe XD we use for testing, development and training.

Lessons Shape Image Enhancements Shape Image

What's Next

Initial marketing research and existing client interviews inspired the design of two feeds, one for organizations to curate and publish stories, and a separate community forum feed for supporters to post.

Our most recent feedback and user testing sessions discovered users don't understand the difference between the two feeds.

Shape Image

Our Solution & Next Design Iteration

I've proposed a single content feed, combining both organization's stories and participant community member's posts and discussion.

I conducted A/B testing with 20 users from Usability Hub to verify my solution and over 70% of users preferred the combined feed.

This design requires an update to the interface to visually differentiate between a story the non-profit shares and a community based post.

I'm also re-designing the way community categories and forums are displayed and filtered, so they take up less visual real-estate at the top of the screen and the the user's interactions with forums from a single feed is clear.

More Work

Enhanced Blackbaud PC3