Select Page

MeaningfulWork

Web & Mobile App

May 2020

 

About

MeaningfulWork is an online volunteer-matching program that connects skilled volunteers with nonprofits to create an impact in the community.

I was a part of the initial design and for the web and mobile app. The goal was to create high fidelity designs for the web developpers to use as a guide when creating the application.

Role

UX/UI Designer

Software

Figma
Illustrator

01. Organize

Planning

Before starting the hi-fi mockup, the design team had a meeting with the web developers and the CEO to talk about the final look and goal of the web app.

The functions of the app had not been fully developed and it was difficult to point out which functions needed to be included in the first prototype and designed. During this time we established 3 different users that would be using the app, the company, the employee, and the nonprofit. From this we proceeded to breakdown the sitemap to each user and split the tasks amongst ourselves.

02. Ideate

Low-fi wireframe

Before creating the mockup, I created a rough layout design with lorem ipsum content. This was just to get the feel of the web app and figure out the flow of the user when using certain functions or navigating through the page. The initial wireframe had simple lines and shapes to space out the content of the pages.

The team worked together for this process to make sure the web app was cohesive all through out and it did not look like each page was designed by a different person. After the mockups we divided the work among us and I was in charge of the company pages during the high fidelity process. I created the preview of all companies and the company profile preview. Made sure to create the search bar with search settings to help the user navigate better.

Design guide

The design team then settled on a design guide that will help us keep the design cohesive as we worked on a page on our own. This meant font size, weight, and colors would remain consistent through all the pages.

03. Design

Prototype V1

The final product is the first version of the prototype that can be developed first. After working on my pages, the designers got together to review the mockups and make final edits or changes to send off to the developers. We had to ensure that the design remained cohesive and that there wasn’t any typos or missing functions.

(The reason why it’s the first version is because there was a deadline for the investors to see the web app. Multiple version were created after, updating the functions, features, and design later on)

04. Final

Reflection

This was the first UX/UI project I had ever worked on and I had almost zero experience in this field. Thankfully I was surround with an encouraging team to go through the hardships of this project.

During this process, I learned that it is important to have goals set for the team. Since majority of us were students and this was the first real life project we worked on, we stumbled to see the end goal and the steps we needed to take. Fortunately this was the initial prototype that I was lucky to be a part of.

Contributors

 

Eric Lee – Design Lead

Emma Wu – UX/UI Designer

Denise Nguyen – Web Developer