UG-PURPLE_logo

UncommonGood is a non-profit all-in-one SaaS that seamlessly blend project management, marketing, and fundraising in one modern, user-friendly platform. Notable features include back-end CRM and custom branding tools NPOs can utilize to successfully market themselves. The platform also provides a space for donors to contribute towards causes they support in impactful ways, such as through fundraisers and sweepstakes.

Design and development efforts done in collaboration with Tailoru Collective and JuiceCG.

MY ROLE

I led efforts in the UI, visual and interaction design of new pages, features and tools. I was the keeper of the design system and added new elements to accommodate for new features and updates, which included a visual refresh overhaul. In addition to design efforts, I contributed in development walk-throughs and documentation for hand-offs.

competitive research & product strategy

I collaborated on a team with two UX designers to conduct research and analysis of the competitive market and identify design patterns that provide familiarity and ease-of-use for advanced features and tools.

customer insights & JTBD ideation

I teamed up with two UX designers and one project manager to uncover insights of the platform’s main branches of audience and translate concepts into features that address the user journey, motivations and jobs-to-be-done.

design ideation & execution

I executed on responsive wireframes, prototypes and design specs alongside two UX designers from desktop to mobile.

design system overhaul & consistency check

I maintained the design system and identified areas for polish with design execution and documentation to deliver an established guideline that drives consistency throughout the entire design and development process, as well as in the user experience and engagement of the platform on the frontend and backend.

the team

I collaborated on a team of two UX designers and one project manager

time

6 months

deliverables

competitive research, wireframes (mid to high-fidelity), prototype (static + interactive), re-work of the design system

Mockups-1

Focus Features

The SaaS platform provided a multitude of features to set an organization up for success. I contributed to the design effort of the product with a focus on the following features:

New B2B homepage

CRM

B2B back-end platform onboarding

B2C (consumer) account back-end platform

Additional tools and interface updates

New homepage for B2B

Client requested for a separate landing page to accompany the UncommonGood homepage, which non-profits utilized to connect donors and supporters to their causes through fundraisers and sweepstakes.



The landing page is B2B-focused with a goal to attract new partnerships and inform on the platform’s plan offerings, available tools + features, clients + testimonials and resources to set organizations up for success.

Homepage-Design

CRM (Community)

The CRM tool needed a rework in the information structure, content + visual layout, and a new Community main page. Additionally, new updates were added to features such as: new data capture in input forms, custom segmenting filter tool, and an activity feed timeline for contacts.

CRM_1

contact information data capture

With data provided by the client, the team identified the necessity for several new input fields to capture the most useful information from for each of the contact.

contact information tab view

CRM_2

segmentation filter tool

A problem statement was provided to deliver a filter tool with the functionality to customize table displays within the Contact and Donations tab in the CRM. The team executed on a segmentation tool that allows users to manually set multiple filters within a display, with the ability to save and select frequently used segmentations.

segmenting tool without filters view

CRM_3

segmenting tool with filters view

CRM_4

add filter modal views

CRM_5
CRM_6

view segments menu display in expanded view

CRM_7

activity feed timeline

Organizations wanted the ability to have a visual overview of each contact’s activities (directly and indirectly related to their organization) and the ability to view details and complete to-do tasks within a specific event. With goals defined, we provided the solution to add a timeline tab under each contact detail page that displays an activity feed on a chronological timeline that is easy to understand at cursory glance.

Additionally, each timeline event can be expanded in view to reveal to-do task items tied to the event. Tasks can be checked off as completed from the expanded view and details of the task will display as a modal when selected.

activity feed timeline - collapsed view

CRM_8

activity feed timeline - expanded view

CRM_9

B2B Account Onboarding

An onboarding tour of the product was integrated to guide first-time users on navigating through the platform’s backend interfaces, prompts to complete the account setup process to better set an organization up for success, and introduce the platform’s multitude of functionality and tool offerings tailored to the needs of individually specialized organizations.

Onboarding_1

onboarding tooltips & modals

Tooltips help guide the user through the important areas of the account setup process.

Onboarding_2

onboarding modals introduce platform features

Onboarding_3

account setup progress tracker

The account strength bar tracks the user’s progress throughout the account setup process. This is where the most important areas are highlighted to get an organization’s account up and running.

Onboarding_4

Fundraiser Page Updates

The frontend fundraiser page needed some visual rework and functionality updates. Donation widgets were refreshed to provide suggested donation amounts to streamline the donation checkout process. Progress bars were added to give visual context of raised amounts in comparison to set goals. Social share functionality is integrated for the main fundraiser page as well as impact driven through donations from the widget view.

Fundraiser_1

social media sharing

Social sharing functionality was integrated on the fundraising feature so users can share their contribution and impact for the causes they support.

Fundraiser_2
Fundraiser_3
Fundraiser_4

Design System Revamp

Design-System_1
Design-System_2
Design-System_3
Design-System_4
Design-System_5
Design-System_6
Design-System_7
Design-System_8

I hope to have some prototypes ready on your next visit. Stay tuned!

Thank You For Viewing

View more

Visual DesignsClient work

CalypsoAIAI + ML solutions provider for B2B

UncommonGoodSaaS fundraising platform for cause-driven organizations

Reading Land'Adobe + Scholastic Book Fairs Creative Jam' App Concept

bloomguided meditation with UI animation

Scrib'da simple note a day

One More Thymewaste-free conscious cooking

Astrotailored plans for every goal

Questproductivity with a purpose

Wander Wheelsaccessible travel made possible

© 2022 by May Lee