Tiffany Chu UI/UX Design Portfolio

An image of MeaningfulWork

BCIT Library

UI/UX Design / Case Study

  • Role UI/UX Designer
  • Tools Figma
  • Team Eric J. Lee - Design lead
    James Young - Director of Product
    Raaj Chatterjee - Co-founder & CEO
  • Timeline 9 months

Project Scope: Connect companies and nonprofits to make a meaningful impact together. The application allows volunteers to find nonprofits that need their expertise while companies can keep track of their employees' volunteer hours. A nonprofit can post volunteer opportunities and better engage with the community.


Understanding the problem

Initial brainstorm meetings led our team to the following conclusions:

  • We needed a web application to cater to 3 different groups: Volunteers, Companies, and Nonprofits.
  • The volunteer and impact data needed to be presented in a simple and easy-to-understand format.
  • We needed a seamless process for volunteers to find opportunities that matched their values and for nonprofits to meet individuals that meet their needs.
Meeting sketch
MeaningfulWork Brainstorm sketches - Core values

Vision & Solution

Our starting point was to do some initial research of our current competitors. See what system they had going and what we could do to improve it. We took inspiration from other web applications that have found success in meeting their user needs.

After this, we sketched out what we wanted the application to look like and its main features. We divided the user groups to work on, and I was tasked with the companies viewpoint of the application.

From these findings, we decided to focus on a product that identifies key business goals of MeaningfulWork:

  • Volunteers need to easily filter and find volunteer opportunities.
  • Companies can track and view their employees’ volunteer progress & impact.
  • Nonprofits can connect with volunteers that have the expertise that meets their organization’s needs.


From this point on, I will be focusing solely on the company’s side of the web application.

MeaningfulWork Flowchart

To get a better understanding of the steps a user would need to take to complete an expected task, I mapped out how the user would navigate the web application.


The process of designing the wireframes went fairly quickly as we needed to hand off our final designs to the development team as soon as possible. Our launch date was set in 3 months and there was a lot of content and features we needed to sort out. The wireframes below address the main pages the user would use the most:


High-Fidelity Wireframes

A strong visual hierarchy is used to help create a clean delivery of information. The design incorporates lots of blues and whites, to create refreshing and light energy throughout the web application. Despite looking good, the application was not functional, and we did not know if it would meet the needs of our users until we tested it.

At this time, we were unable to move forward with user testing and validation together. However, the wireframes we initially created are still used as the basis for the current web application. It gave me confidence that we were on the right track with our initial assumptions and design.

What I learned

This was my first job as a UX/UI designer, fortunately, I was surrounded by an encouraging team to go through the ups and downs of this project.

I enjoyed the challenges I faced during this project, and the main lesson I learned from this experience is the importance of user research. I was placed into this role in the middle of the project.

This was definitely a learning curve for me as a designer, and if I could go back, I would focus more on understanding the user’s goals and frustrations to help build better design solutions. The final design will never be the end of this project. It will go through several iterations of finding new user pain points and discovering new ways to solve them.

MeaningfulWork Desktop screens

© Tiffany Chu // Privacy Policy