top of page
WEB APP DESIGN
VOLUNTEER MANAGEMENT WEB APP
(in dev phase)
Volunteer Relationship Management System (VRMS) is a white-labelled, MVP web app developed by Hack for LA with the goal to improve the operational effectiveness around volunteer management for the organization. Despite this being my first real world UX project, my team entrusted me with the end to end design decisions. There were many things I didn't know how to approach initially, however, with relentless researching, learning, and communicating with my team members, we were able to come to the most suitable solution considering the project's requirements and limited man power.
​
CLIENT
Hack for LA
ROLE
Cicy Hou:
Research, Branding, Design Lead
Adam Spar:
Strategy, PM
​
Alex Anakin, Olga Bilogurova, Carlos F,
Nick Beaird: Front and back end developing
TOOLS
Google suite
Github
Figma
Pen, paper
CHALLENGE
Hack for LA has hundreds of volunteers working on a variety of civil projects for the City of Los Angeles. Currently the project onboarding process is completely manual, extremely time consuming for team leaders to onboard each new member. There also lacks a central place for users to manage their profile and projects. Meeting check in process is not enforced nor consistent, which results in lost data that could be used to manage and retain volunteers.
​
One of the biggest mistakes we've made at the beginning was not considering the time it would take to develop all the screens and features. I initially designed med - high fidelity screens for all the features we wanted for the MVP 1.0 release. After communicating with the developers, we decided to deliver version 1 in several sprints. This helped us to focus on features we need to prioritize the most and balance that with the limited resources we had.
​
RESEARCH & FINDINGS
Through many interviews with Team Leads, Project Managers, and Stakeholders, we have concluded that in order to improve operational effectiveness of Hack for LA as an organization, and to retain volunteers for projects, we need to focus on building these main features and functionalities for the Minimal Viable Product (MVP):
Automated Onboarding Process - the current onboarding process is long and cumbersome, if we can automate the process, that would allow Team Leads with more valuable time to work on other things.
Check in to Meetings/Events - a central platform for users to check in to meetings and get related details. This function will also allow the org to track and obtain information of the volunteers.
Join Team Approval - Team Leads can easily view all the new members' onboarding status and approve their request to join the team.
PERSONAS
Based on our research, there are two types of people this web app would benefit the most from. Team leads who need to onboard new members and approve their join team requests, and volunteers who need to onboard and regularly check in to their meetings/events.
(Creating a) DELIVERY SYSTEM
At the beginning of the design process, I focused on just delivering and finishing the designs. As I shared the designs with the PM and developers, we started to make changes and add comments to many of the screens. This is when we lost track of the different versions, and realized the importance of creating a formal Delivery System.
Through trial and error, we were able to create an effective delivery system that allowed us to ideate, create, and collaborate with developers without compromising version control.
STYLE GUIDE
From Business Analysis we learned that we are developing a product that didn't exist in the market yet. There are strong interests from other organization regarding adopting the product.
Keeping that in mind, we've decided to create a white label product with a neutral color scheme, so other organizations can easily bring in their own style and color. At later versions of the app, we would allow organizations to customize the color on different areas of the app to showcase their own theme and style.
SITE MAP
Putting a site map together helped us quickly visualize the architecture of the content and
understand the basic structure of the app. The hamburger menu was chosen because this allowed users to access to different parts of the app anywhere from the app.
​
CONCEPTUALIZATION
The use cases provided a baseline for all the features and functionalities we need to develop in order to meet user needs and business goals. As a team, we came up with simple mock ups to put our ideas on paper, so we can visualize the different designs and make quick changes. Many iterations were made on each screen until all the requirements are met and perfected.
THE SOLUTION
One of the most important tasks we need to tackle for the MVP is to automate the currently cumbersome onboarding process for new users and Team Leads. What made it challenging are the number of tasks and steps we would like new users to complete before exiting because it's too long. Therefore, we had to strategically pick and choose the tasks, associated wording, and the placement of components on each screen.
Set up on Slack and GitHub: As part of onboarding, our goal is to have the new users set up on both Slack and Github, this requires them to leave the app temporarily to finish set up and come back to continue the process. We gave users the option to skip for now, but with wording to let them know they would eventually have to be set up in order to be onboarded.
Picking a Team: After the initial profile set up, users are being asked to pick a team. From research we know that most users already know which project they want to join by talking to either a Stakeholder or Team Lead prior to onboarding.
However, we want to provide them with all the resources they need, without feeling overwhelmed with the amount of information. So I chose a simple and clean layout to let the user choose what applies to them the most, then provide them with the associated information.
Projects: the project flow allows users to organize and view all the projects they are currently associated with, join new projects, and check in to meetings that's coming up next
Team Join Request: Designing this flow was quiet challenging. There are a lot of functionalities and content we want to fit on the screen without looking crowded and confusing. I chose to use colors and expanders to give users the flexibility to see the information that's relevant to them.
Usability Testing
Our next step is to conduct user testing with our current design and implement the feedback
NEXT STEPS
Design New Features
There are many other functionalities we want to add to our next version of MVP. From detailed event information to graphic visuals on data collected from the app
Branding & Distribute
Our ultimate goal is for this app to be used by other similar organizations. Provide them the ability to customize the app based on the company's unique visual guidelines
bottom of page