Designing a charitable giving platform for the workplace

10 • 06 • 2022

Designing a charitable giving platform for the workplace

10 • 06 • 2022

Designing a charitable giving platform for the workplace

10 • 06 • 2022

Responsibilities

Led a team of designers to come up with a new charitable giving platform for the workplace. Co-ordinated with several stakeholders to understand and meet business requirements and prototyped the entire platform prior to development.

Timeline

June 2022 → December 2022

Team

2 Designers, 1 3D Artist, several developers

Tags

Product Design

UX Design

Motion Design

3D Modeilling & Rendering

Responsibilities

Led a team of designers to come up with a new charitable giving platform for the workplace. Co-ordinated with several stakeholders to understand and meet business requirements and prototyped the entire platform prior to development.

Timeline

June 2022 → December 2022

Team

2 Designers, 1 3D Artist, several developers

Tags

Product Design

UX Design

Motion Design

3D Modeilling & Rendering

Responsibilities

Led a team of designers to come up with a new charitable giving platform for the workplace. Co-ordinated with several stakeholders to understand and meet business requirements and prototyped the entire platform prior to development.

Timeline

June 2022 → December 2022

Team

2 Designers, 1 3D Artist, several developers

Tags

Product Design

UX Design

Motion Design

3D Modeilling & Rendering

Project Highlights

Project Highlights

What is Morgan Stanley At Work Charitable Giving?

Powered by the TIFIN Give platform and in association with Morgan Stanley this is a charitable giving program aimed at the workplace setting for larger enterprises and corporation as a way to empower and enable their employees to engage in charitable giving.

Who are we designing for?

Powered by the TIFIN Give platform and in association with Morgan Stanley this is a charitable giving program aimed at the workplace setting for larger enterprises and corporation as a way to empower and enable their employees to engage in charitable giving.

HR Administrators

They are primarily responsible for setting up the DAF account on behalf of the company, onboarding employees on to the platform and allocating a portion of the DAF funds for them to use for donating to charities. They can also donate on behalf of the organisation and view & track employee engagement.

Employees

They primarily use the platform to access the DAF funds allocated to them and donate to their favourite charities. They can also view and compare their engagement with their peers and colleagues and the organisation as a whole as well.

Design Goals

Build for Scale

Given the context of large enterprise and corporations it was crucial to account for scale when it came to designing for the workplace. We wanted to simplify and create provisions for any bulk action the user might have to take when it came to user management. When it came to managing funds at such a large scale we wanted to make crucial processes like allocation and investing we wanted to make them as clear and less overwhelming as possible.

Focus on Accessibilty

We wanted to make sure the platform was perceivable, operable, understandable and robust. By using adequate colour contrast for text and visuals, making sure the interface is easy to navigate, keeping clear, concise and easy to follow language to communicate any information we wanted to make sure the platform was 'Level AA' rated as per The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG).

Ease of Whitelabelling

One of the key considerations was the ease of whitelabelling the platform as most of these enterprise want a tailor made platform for their organisation and employees and our aim was to provide a blueprint which could easily adopt any brand guideline without too much design intervention.

What is Morgan Stanley At Work Charitable Giving?

Powered by the TIFIN Give platform and in association with Morgan Stanley this is a charitable giving program aimed at the workplace setting for larger enterprises and corporation as a way to empower and enable their employees to engage in charitable giving.

Who are we designing for?

Powered by the TIFIN Give platform and in association with Morgan Stanley this is a charitable giving program aimed at the workplace setting for larger enterprises and corporation as a way to empower and enable their employees to engage in charitable giving.

HR Administrators

They are primarily responsible for setting up the DAF account on behalf of the company, onboarding employees on to the platform and allocating a portion of the DAF funds for them to use for donating to charities. They can also donate on behalf of the organisation and view & track employee engagement.

Employees

They primarily use the platform to access the DAF funds allocated to them and donate to their favourite charities. They can also view and compare their engagement with their peers and colleagues and the organisation as a whole as well.

Design Goals

Build for Scale

Given the context of large enterprise and corporations it was crucial to account for scale when it came to designing for the workplace. We wanted to simplify and create provisions for any bulk action the user might have to take when it came to user management. When it came to managing funds at such a large scale we wanted to make crucial processes like allocation and investing we wanted to make them as clear and less overwhelming as possible.

Focus on Accessibilty

We wanted to make sure the platform was perceivable, operable, understandable and robust. By using adequate colour contrast for text and visuals, making sure the interface is easy to navigate, keeping clear, concise and easy to follow language to communicate any information we wanted to make sure the platform was 'Level AA' rated as per The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG).

Ease of Whitelabelling

One of the key considerations was the ease of whitelabelling the platform as most of these enterprise want a tailor made platform for their organisation and employees and our aim was to provide a blueprint which could easily adopt any brand guideline without too much design intervention.

What is Morgan Stanley At Work Charitable Giving?

Powered by the TIFIN Give platform and in association with Morgan Stanley this is a charitable giving program aimed at the workplace setting for larger enterprises and corporation as a way to empower and enable their employees to engage in charitable giving.

Who are we designing for?

Powered by the TIFIN Give platform and in association with Morgan Stanley this is a charitable giving program aimed at the workplace setting for larger enterprises and corporation as a way to empower and enable their employees to engage in charitable giving.

HR Administrators

They are primarily responsible for setting up the DAF account on behalf of the company, onboarding employees on to the platform and allocating a portion of the DAF funds for them to use for donating to charities. They can also donate on behalf of the organisation and view & track employee engagement.

Employees

They primarily use the platform to access the DAF funds allocated to them and donate to their favourite charities. They can also view and compare their engagement with their peers and colleagues and the organisation as a whole as well.

Design Goals

Build for Scale

Given the context of large enterprise and corporations it was crucial to account for scale when it came to designing for the workplace. We wanted to simplify and create provisions for any bulk action the user might have to take when it came to user management. When it came to managing funds at such a large scale we wanted to make crucial processes like allocation and investing we wanted to make them as clear and less overwhelming as possible.

Focus on Accessibilty

We wanted to make sure the platform was perceivable, operable, understandable and robust. By using adequate colour contrast for text and visuals, making sure the interface is easy to navigate, keeping clear, concise and easy to follow language to communicate any information we wanted to make sure the platform was 'Level AA' rated as per The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG).

Ease of Whitelabelling

One of the key considerations was the ease of whitelabelling the platform as most of these enterprise want a tailor made platform for their organisation and employees and our aim was to provide a blueprint which could easily adopt any brand guideline without too much design intervention.

Process & Solutions

Implementing a comprehensive component library

The approach for this design system was to create a blueprint for any enterprise to easily come in and whitelabel the platform to their liking. We made conscious decision of using a single primary colour and a neutral secondary colour and using tints of the primary for any sort of accents needed for various elements.

Ensure a smooth onboarding process

We wanted to ensure an easy onboarding experience for the user and capture certain key information so that they don’t enter an empty platform. We also wanted to introduce mechanisms that would help them better manage employees and better and keep it as modular and configurable as possible

Onboarding & Overview Dashboard

Helping the user open a DAF account in a few simple steps on behalf of their company

Capturing their choice of causes that they wanted to support and help them generate a mission statement to align every member of the company in their giving journey

Allowing them to create tags and categories for employees to fill as part of their onboarding that would help manage large global teams seamlessly and keeping this as customisable as possible to cater to various enterprises as per their needs

Having a step by step start guide to help them get accustomed to the platform and clearly showing the progress of their initial set up

Ensure a smooth onboarding process

We wanted to ensure an easy onboarding experience for the user and capture certain key information so that they don’t enter an empty platform. We also wanted to introduce mechanisms that would help them better manage employees and better and keep it as modular and configurable as possible

Onboarding & Overview Dashboard

Helping the user open a DAF account in a few simple steps on behalf of their company

Capturing their choice of causes that they wanted to support and help them generate a mission statement to align every member of the company in their giving journey

Allowing them to create tags and categories for employees to fill as part of their onboarding that would help manage large global teams seamlessly and keeping this as customisable as possible to cater to various enterprises as per their needs

Having a step by step start guide to help them get accustomed to the platform and clearly showing the progress of their initial set up

Ensure a smooth onboarding process

We wanted to ensure an easy onboarding experience for the user and capture certain key information so that they don’t enter an empty platform. We also wanted to introduce mechanisms that would help them better manage employees and better and keep it as modular and configurable as possible

Onboarding & Overview Dashboard

Helping the user open a DAF account in a few simple steps on behalf of their company

Capturing their choice of causes that they wanted to support and help them generate a mission statement to align every member of the company in their giving journey

Allowing them to create tags and categories for employees to fill as part of their onboarding that would help manage large global teams seamlessly and keeping this as customisable as possible to cater to various enterprises as per their needs

Having a step by step start guide to help them get accustomed to the platform and clearly showing the progress of their initial set up

Simplifying complex financial operations

Being a charitable giving platform for large enterprises and the complex workings on a DAF account it was crucial that all financial operations were simplified and clearly communicated leaving no doubt in the users mind as most of the financial operations included dealing with high ticket transactions. The main financial operations are listed below -

Contribution to DAF Account

This is the primary step of adding funds to your DAF account which will then be used for allocating to employees or for donating to charities

User Type - Administrator

Investing DAF Account Funds

One of the advantages of having a DAF account is the ability to grow your funds by investing in various financial instruments

User Type - Administrator

Allocating Funds to Employees

This step allows distributing DAF account funds to employees in order to empower them to donate to charitable organisations of their choice

User Type - Administrator

Donating to Charities

The actual process of making a donation/gifting to charitable organisations mostly conducted by employees but can be done by a company as well

User Type - Employee or Administrator

Contribution to DAF Account

Clustering different account types by their respective bank and clearly showing the status of their connection

Showing the account type and the amount of funds they have left it in before making a contribution to the DAF account

Since some contribution types required actions to be taken outside the platform in order to complete the transaction we provided ways to copy bank information easily to their clipboard and also a one click to download transfer instructions for a later use

Investing DAF Account Funds

Have a clear visualisation of the amount they are investing and the amount they are keeping as cash for allocating to employees or donating to charities

Since these were large sums of money allowing the user to either set a percentage or a dollar amount that they want to keep as cash and clearly showing the respective value to avoid any room for error

Based on the amount they decided to keep as cash showing the amount that will be invested as well as showing percentages and totals against each investment selection that they make

Have an overview section to give them a birds eye view of all the selections that they made with clear data visualisation

Having confirmation modals before executing any changes that they make since these are high ticket transactions

Investing DAF Account Funds

Have a clear visualisation of the amount they are investing and the amount they are keeping as cash for allocating to employees or donating to charities

Since these were large sums of money allowing the user to either set a percentage or a dollar amount that they want to keep as cash and clearly showing the respective value to avoid any room for error

Based on the amount they decided to keep as cash showing the amount that will be invested as well as showing percentages and totals against each investment selection that they make

Have an overview section to give them a birds eye view of all the selections that they made with clear data visualisation

Having confirmation modals before executing any changes that they make since these are high ticket transactions

Investing DAF Account Funds

Have a clear visualisation of the amount they are investing and the amount they are keeping as cash for allocating to employees or donating to charities

Since these were large sums of money allowing the user to either set a percentage or a dollar amount that they want to keep as cash and clearly showing the respective value to avoid any room for error

Based on the amount they decided to keep as cash showing the amount that will be invested as well as showing percentages and totals against each investment selection that they make

Have an overview section to give them a birds eye view of all the selections that they made with clear data visualisation

Having confirmation modals before executing any changes that they make since these are high ticket transactions

Allocating Funds to Employees

Easily allowing them to execute bulk actions in the case of dealing with several employees

We made the use of simple calculators that showed exactly what portion of the DAF funds would be used per employee and its impact on the overall DAF, anywhere there is a transaction taking place we made it a point to reiterate few basic things like how much is available to them as well as what its implication might be.

Showing appropriate error states in case of insufficient funds and giving them a CTA to directly enter the contribution workflow without having the need to go to a different page

Allocating Funds to Employees

Easily allowing them to execute bulk actions in the case of dealing with several employees

We made the use of simple calculators that showed exactly what portion of the DAF funds would be used per employee and its impact on the overall DAF, anywhere there is a transaction taking place we made it a point to reiterate few basic things like how much is available to them as well as what its implication might be.

Showing appropriate error states in case of insufficient funds and giving them a CTA to directly enter the contribution workflow without having the need to go to a different page

Allocating Funds to Employees

Easily allowing them to execute bulk actions in the case of dealing with several employees

We made the use of simple calculators that showed exactly what portion of the DAF funds would be used per employee and its impact on the overall DAF, anywhere there is a transaction taking place we made it a point to reiterate few basic things like how much is available to them as well as what its implication might be.

Showing appropriate error states in case of insufficient funds and giving them a CTA to directly enter the contribution workflow without having the need to go to a different page

Donating to Charities

Reiterating the charity that they were donating to as part of the donation/gifting modal

Showing the amount of funds they have left as part of their allocation

Adding tooltips showing how their available funds is calculated and including information regarding fees and current allocation to employees

Donating to Charities

Reiterating the charity that they were donating to as part of the donation/gifting modal

Showing the amount of funds they have left as part of their allocation

Adding tooltips showing how their available funds is calculated and including information regarding fees and current allocation to employees

Donating to Charities

Reiterating the charity that they were donating to as part of the donation/gifting modal

Showing the amount of funds they have left as part of their allocation

Adding tooltips showing how their available funds is calculated and including information regarding fees and current allocation to employees

Improving Charity Navigation

With over 1.5 million charities available on our platform it was important to ensure the charity navigation experience was not overwhelming and we designed certain systems and functions to ensure the user can get to their desired charity with as less friction as possible.

New Discover Experience

This is where the employee lands while entering the platform and also the primary place where they can find charities of their choice. Here are few things that we kept in mind while designing this experience -

Have key information regarding their funds and their achievement on the very top

Keep search as the focal point of the experience across various pages

Have easy access to their favourite and most donated to charities

Make it easy to pick up where they left off and show their recently viewed charities

Create curated lists personalised to each user based on their usage and engagement

Improving Charity Navigation

With over 1.5 million charities available on our platform it was important to ensure the charity navigation experience was not overwhelming and we designed certain systems and functions to ensure the user can get to their desired charity with as less friction as possible.

New Discover Experience

This is where the employee lands while entering the platform and also the primary place where they can find charities of their choice. Here are few things that we kept in mind while designing this experience -

Have key information regarding their funds and their achievement on the very top

Keep search as the focal point of the experience across various pages

Have easy access to their favourite and most donated to charities

Make it easy to pick up where they left off and show their recently viewed charities

Create curated lists personalised to each user based on their usage and engagement

Improving Charity Navigation

With over 1.5 million charities available on our platform it was important to ensure the charity navigation experience was not overwhelming and we designed certain systems and functions to ensure the user can get to their desired charity with as less friction as possible.

New Discover Experience

This is where the employee lands while entering the platform and also the primary place where they can find charities of their choice. Here are few things that we kept in mind while designing this experience -

Have key information regarding their funds and their achievement on the very top

Keep search as the focal point of the experience across various pages

Have easy access to their favourite and most donated to charities

Make it easy to pick up where they left off and show their recently viewed charities

Create curated lists personalised to each user based on their usage and engagement

Explore/Browsing Experience

We also wanted to design a browsing experience for those who were unsure where they wanted to donate to. To make this experience as less overwhelming as possible we too the following design decisions -

Start with helping the user select which cause they were interested in supporting

Visually distinguish each cause to give it its own identity

Have sub cause level filters that can easily be toggled on or off to help the user make a choice from a few charitable organisations as opposed to several

Explore/Browsing Experience

We also wanted to design a browsing experience for those who were unsure where they wanted to donate to. To make this experience as less overwhelming as possible we too the following design decisions -

Start with helping the user select which cause they were interested in supporting

Visually distinguish each cause to give it its own identity

Have sub cause level filters that can easily be toggled on or off to help the user make a choice from a few charitable organisations as opposed to several

Explore/Browsing Experience

We also wanted to design a browsing experience for those who were unsure where they wanted to donate to. To make this experience as less overwhelming as possible we too the following design decisions -

Start with helping the user select which cause they were interested in supporting

Visually distinguish each cause to give it its own identity

Have sub cause level filters that can easily be toggled on or off to help the user make a choice from a few charitable organisations as opposed to several

Sahil Deepak © 2024