top of page

Volunteer NY

Responsive Website Redesign | Concept Project | 2 weeks

Hi-Fi Mockup best ux portfolio

Role:             UX & UI Designer, UX Researcher, Team Lead

Team:          Miguel Toro, Heather Sterman, Briana Barkman

Tools:           Figma, Whiteboard

Methods:    Screener Surveys, User Interviews, Affinity Mapping, User Persona, Journey Mapping, Design Studio, Sketching, Wireframes, Rapid Prototyping, Usability Testing 


To redesign a responsive website for Volunteer NY and resolve any usability issues that faces their target users.


Users were overwhelmed by the amount of information they viewed and could not easily search or filter.


Remove all of the unnecessary information & create a more visible search box with easier to find filters.

Process Overview 


Who is the target user?


We screened 14 candidates to get users who volunteer and/ or interested in volunteering. We spoke to 4 of them and synthesized our learnings to create Alex!

Goal: To make a difference in causes she supports through volunteering 

Need: A trustworthy, centralized platform to find new opportunities that fit her schedule 

best ux persona

Behavior: Compares organizations & reads reviews before committing to register

Pain Point: Doesn't have enough upfront information about what to expect


How does Alex's volunteering journey look like now?

We took a closer look of Alex's journey to find a trusted volunteering opportunity that meets her busy schedule and lets her make a difference.

Testing usability on the existing website to check Alex's current experience


Ellipse 1.png

users were able to find a volunteering opportunity 


Ellipse 2.png

users were able to use filters to fit their criteria  


Alex was overwhelmed by the amount of unnecessary information.

Alex struggled to find the filters she needed to search opportunities that matched her schedule.

How might we help Alex find options that fit in with her free time and fulfill her goal of making an impact?

Collaborating & Design Studios

We focused on solving Alex's biggest pain points of being overwhelmed by the amount of information & difficulty of customizing the results to fit her busy schedule.

Progressing through Mid-Fidelity

We created our mid-fi prototype using Figma based on the final solution that was designs and approved by all team members during the design studio sessions.

A solution for Alex to achieve her goals

We created the hi-fi prototype with the goal of solving Alex's pain point of not having enough information & give her a platform to make a difference in the causes that she supports.

Annotated Homepage Mockup.png
Annotated Compare Page Mockup.png
Annotated Results Page Mockup.png

Does the new design

work for Alex?

Ellipse 3.png


users were able to find a volunteering opportunity 

Ellipse 4.png


users were able to find & use comparison tool


Alex was able to easily navigate the new design and search opportunities and filter them to fit her needs.

Alex was confused about the new comparison tool as it did not meet her expectations in terms of functionality.

Designing the mobile app

We created hi-fi mockups of the mobile app using the same design language and functionality to have a consistent user experience across all platforms.

Next Steps:

  • Make design changes & updates based on usability testing results.

  • Finish building the prototype for all other breakpoints.

  • Conduct further usability testing and iterate!

* published by UX Planet

bottom of page