Tiffany Chu Graphic Design Portfolio

UI/UX Design

MeaningfulWork

Introduction

MeaningfulWork connects 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.

Role: UI/UX Designer

Software: Figma, Illustrator

Team Members: Eric J. Lee, Raaj Chatterjee

Empathize

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.
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.

Ideate

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

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.

MeaningfulWork company flowchart
Wireframes

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:

  • Homepage
  • Employee page
  • Impact page
MeaningfulWork low fidelity wireframe

Design

High-fidelity Mock-ups

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.

Reflection

This was my first job as a UX/UI designer, although this was something I was studying for, it was an entirely different experience to work in this field. 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. During this time, I was unaware of the phases of UI/UX Design and I wasn’t able to be a part of the Empathy phase. Knowing what I know now, I definitely see a lot of missing parts in the final design that was missed because of missing this key phase.

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.