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