A volunteer tracking app to log time and youth interaction results for volunteers serving high mobility youth at Community Education Partnerships (CEP), a San-Francisco based nonprofit supporting the education of children facing homelessness.
Project Duration and Status
MVP (minimum viable product) delivered to stakeholders, currently iterating, and in active development.
Role and Responsibilities
Lead UX Designer.
End-to-end design cycle, including user research, competitive analysis, interviews, persona development, journey maps, user flows, wireframing, prototyping, and high-fidelity visual design.
Volunteers need an easy way to log their interactions and interaction results, as well as record time spent on their sessions to enable them to easily and consistently submit this critical information, in a timely manner.
Our volunteer tracking app will let users complete surveys and log time which will enhance their ability to provide timely feedback about mentoring sessions, by enabling access and increasing efficiency.
We will measure effectiveness by frequency of surveys completed and volunteer time logged.
We will conduct follow-up user interviews to collect additional post-release data.
User interviews were the primary form of user research for this project.
Despite the time commitment necessary for interview based user research, I determined that connecting with people individually would result in a more robust understanding of user pain points, challenges, and hopes.
Participants are all volunteers who tutor students with a lived experience of homelessness to improve their educational outcomes. Volunteers include individuals from all walks of life, from high school and college students, to professionals and retirees.
5 volunteers interviewed, between the age of 30-70.
6+ hours of interviews.
Volunteers do not consistently and accurately log time spent on tutoring sessions, since their current system is complicated and tedious to use. They often log time several weeks after sessions.
If volunteers need support, they have to either email or call and wait to hear back, rather than being able to request support quickly and efficiently.
Their current system does not provide any way to share feedback about student progress, needs, goals, or individual sessions.
Creating a volunteer journey map helped me to identify pain points in each stage of the journey, and map out a user flow that would make the process both easier and more efficient.
Mapping out a user flow enabled me to chronicle the path that a user would take through the app to complete a survey, log the date and time of their session, submit the survey, and navigate editing their profile and changing their password.
Crazy Eights and Wireframe Sketches
I had a lot of fun with the crazy eights and other ideation processes. Apps cannot be built in a vacuum and we needed a place to start. After my initial conversation with the CEO and then the Director of Programs of CEP, I felt that I had a grasp on their needs, and had a starting point.
Anecdotally, it is fun to look back on these initial sketches and see how far we have come, knowing that they set the initial framework for our discussions and highlighted the need for this meaningful application.
The wireframes, shown below, were created in Figma and gave the stakeholders a more concrete, as well as visual, example of what to expect. The stakeholders at CEP were able to see and visualize what their volunteers were going to experience. At this point the application became a real and tangible product to them and their excitement was palpable!
Using Figma’s ability to convert the wireframes into a clickable prototype enabled the stakeholders and volunteers to experience the app flow at a high level.
I used moderated usability testing to observe the user's interactions with the product. Their feedback informed the changes I made to the wireframes before moving on to the visual design phase.
Issue 1: Student Questions First in Survey
Based on my initial user research, I designed the questions for the student, included in the post-session survey, to be at the end of the survey. However, after testing, I realized that the student should not be kept waiting while the volunteer answers their questions, and so I moved the questions to the beginning of the survey.
Issue 2: Ability to Skip Student Questions
Further testing revealed that all volunteers did not complete the survey immediately after the session, although that is the desired user behavior. To account for this, I added the skip functionality to only the student questions, so volunteers would never be answering on their behalf.
Issue 3: Adding Date and Duration to Session Survey
Using the prototype for testing enabled us to identify that the most efficient way to have volunteers log their time would be at the end of the survey. It is a required input that is one of the most critical pieces of data necessary to be collected by the organization.
I was fortunate to work with an exceptionally talented cross-functional team. My partner engineering and product leads have years of experience. The team consisted of:
3 senior developers
1 junior developer
1 scrum master
Lack of clarity around whether the app would load in a browser for MVP or be built as a downloadable app.
Building logic-based survey question relationships.
Understanding the relationships between volunteers, students, and staff to build the right framework and data tables.
The Path Forward
Communication made us a really great team and by having engineers attend some of the user and stakeholder meetings, we were able to move forward and iterate more efficiently. We will continue to have the engineering team participate and join us in the synthesis of issues in the future.
Branding and Visual Design
Having completed prototyping and usability testing, and updating the wireframes based on the feedback received from testing, I was excited to delve into the brand building and visual design phase of the design process.
Brand Aesthetic: To ensure ease of adoption, legibility, and accessibility, I selected a minimalist aesthetic grounded in recognizable UI patterns.
Color Palette: I selected an analogous color palette of cool colors to represent calmness, responsibility, and luxury.
Typography: I selected a sanserif font with a tall x-height to create clean, easily legible copy throughout the design.
Accessibility: The interfaces have clear layouts with distinct buttons, menus, and calls to action; and leverage color and contrast, and visual hierarchy to serve the widest group of users.
Component Library: I created a component library with variants for different states that enabled me to work faster and more efficiently.
Short Feedback Loops
I had a weekly touch point with the stakeholders which enabled me to get quick feedback on wireframes and prototypes, which kept me from doing unnecessary work and enabled us to keep moving in the right direction. I also attended the standups with the engineering team to ensure that they were not blocked and elaborate on any design-related questions.
Engage Engineers Early
Engineers are able to do their best work when they understand the scope and full complexity of the application they are building at the onset. Having a clear grasp of the desired outcome, they are able to architect and make better decisions with few refactorings needed. I engaged our engineering lead early in the process to help them fully understand the technical complexities of the application they were building.
Avoid Scope Creep
The customer is always going to have an extensive wishlist of features and functionality. I worked with the stakeholder and agreed on MVP goals early in the process. This concrete MVP that the stakeholder understood, enabled me to defer scope creep items until post-MVP.