My Role:
UI/UX Designer
Problem
Ground-Up Initiative (GUI) is a non-profit that empowers individuals to contribute to global stewardship. Currently, GUI manages volunteer and beneficiary information manually using spreadsheets on Google Drive, which involves tedious data transfers and manual notifications. This inefficiency limits their ability to gather and analyze crucial data, affecting the effectiveness of their programs.
Solution
My Impact
As the UI/UX designer, I collaborated with a team of designers to ensure consistency by adhering to a shared design library and exchanging feedback. I was responsible for designing the homepage, navigation bar, login/logout features, and the reports module on the admin portal. Additionally, I worked closely with product managers and the organization to discuss product requirements, and I communicated with developers to address any issues identified during user acceptance testing (UAT).
Process
Initial User Flow Development
The project began with a comprehensive analysis of the Ground-Up Initiative’s (GUI) existing manual processes for managing volunteer and beneficiary information. GUI relied on spreadsheets stored on Google Drive for data management, which involved cumbersome manual tasks such as transferring data between spreadsheets and manually emailing project coordinators about new volunteer registrations.
To address these inefficiencies, I developed an initial user flow based on the organization’s current manual processes. This flow mapped out the existing steps, including data entry, data migration, and communication processes. The goal was to identify pain points and areas for improvement, setting the stage for the creation of a more streamlined and automated system.
Based on this analysis, we proposed a new user flow aimed at developing a centralized Volunteer Management System. I was responsible for the user flow on the admin portal. This system was designed to automate data handling and provide a single repository for all volunteer-related information. The new flow included automated data transfer, centralized data management, and controlled access based on user roles, ensuring that GUI could efficiently track volunteer demographics, numbers, and other key metrics while providing project-specific access to project leaders and volunteer coordinators.
Feature Ownership and Responsibilities
I was responsible for designing and implementing several key features of the Volunteer Management System, including:
- Admin Sign-In: Developed an email-based sign-in system for administrators, ensuring secure access to the admin web application.
- Navigational Structure: Designed the navigational layout of the admin web application, including the arrangement of tabs for calendar events, volunteer management, and reports to ensure intuitive navigation.
- Volunteer Attendance Report: Implemented a feature to generate reports listing the number of volunteers who attended events within a specified date range, including both unique and total volunteer counts.
- Volunteer Hours Report: Created a report detailing the number of hours volunteers have accumulated over a given date range, providing insights into volunteer engagement and activity.
- Homepage Features: Designed the homepage to showcase upcoming events and important alerts, providing administrators with quick access to event schedules and critical updates.
Each feature was developed with a focus on usability and efficiency to ensure the Volunteer Management System met the needs of GUI’s administrators and project coordinators.
Low-Fidelity Wireframes
After finalizing the proposed user flow, I created low-fidelity wireframes that focused on several core components of the Volunteer Management System. The initial draft included the design for the login interface, the layout for the homepage and navigation bar, the structure of the reports module, and the flow for each component to ensure smooth user interactions.
I developed multiple design concepts to facilitate discussions with stakeholders and designers, aiming to identify the most appropriate and effective solution. The first draft of the wireframes provided a fundamental blueprint for the system’s design. It helped visualize core interactions and user flows, enabling early feedback and refinement.
After receiving feedback from stakeholders and other designers, I revised the wireframes to address any concerns and integrate suggestions. The second draft reflected a more detailed and user-centric design, incorporating feedback to enhance usability and align with project requirements.
High-Fidelity Prototypes
With the wireframes validated, I proceeded to develop high-fidelity prototypes to showcase the final design of the Volunteer Management System. This phase involved creating detailed, interactive designs that demonstrated the system’s visual and functional elements.
The prototypes underwent several iterations based on feedback from product managers and developers. This iterative process was crucial for refining the design, accommodating evolving requirements, and ensuring that the system met all functional and usability standards.
The high-fidelity prototypes included comprehensive annotations in Figma, detailing component behaviors, responsive design considerations, and interaction guidelines. These annotations provided valuable guidance for the development team, ensuring accurate implementation of the design specifications.
User Acceptance Testing (UAT)
During the User Acceptance Testing phase, I thoroughly tested the Volunteer Management System to ensure it met the project requirements and user expectations. I identified and documented various bugs and issues encountered during testing, providing detailed reports to the development team. This feedback was crucial for refining the system and addressing any usability concerns before final deployment.