Revamping a Volunteering Platform to Boost Youth Engagement
IOS Mobile App + Website
Overview
Our primary objective was to enhance accessibility and appeal to the platform's predominant demographic of 18-25-year-olds, leading us to adopt a "MOBILE FIRST" approach during the redesign process.
As the user interface designer, my focus was on crafting a cohesive visual language that would resonate across all breakpoints.
Challenge
JustServe, a legacy volunteering platform, was popular for quick event bookings among the community. However, younger users found the user experience lacking, with complaints about the absence of visual event images, unappealing UI, and navigation challenges. Many expressed frustration with the time-consuming online registration process compared to local registration. Consequently, there was a push to rebrand the platform digitally and launch a native iOS app.
Outcome
Efficiently rolled out a cohesive visual identity across the native iOS app and website, resulting in a 30% increase in volunteer sign-ups among younger demographics within the first three months.
Process Sneak Peek
THE PROBLEM
Why was the current experience not engaging users?
THE SOLUTION
Introducing our mobile-first design solution, meticulously crafted to engage younger users and broaden our audience reach. This approach enhances site performance and ensures a seamless experience across all devices, catering to diverse user preferences and behaviors.
UI Approach
After conducting brainstorming sessions and thoroughly evaluating the current website, we identified four key pillars that would serve as the foundation for structuring the visual design.
Engage
Engages users by drawing intended attention
Trust
Builds trust by showing the real environment
Care
Shows care with use of emotive, human centered visuals
Unite
Unites people by reflecting the impact made
THE SOLUTION
Key Design Updates
Dynamic Search Driven Homepage
Expanding search options to include interests, preferences, and age groups offers users greater flexibility compared to the previous limitation of searching solely by zip code.
WIREFRAME
UI
Streamlined Registration Experience
Following a progressive step by step registration we made it easy for users to get onboarded hassle free. This approach breaks down the registration process into manageable steps, guiding users through each stage with clarity and simplicity, ultimately facilitating their smooth transition onto the platform.
WIREFRAME
UI
Gamified Dashboard
By integrating gamification elements into the dashboard, such as the introduction of a "My Goals" section and a volunteer history feature, we actively engage users. These additions transform the volunteering experience into a more interactive and rewarding journey, encouraging users to set and achieve personal goals while also providing a sense of accomplishment through tracking their
volunteer history over time.
WIREFRAME
UI
THE SOLUTION
Design System
I spearheaded the development of the design system to align with the updated visual language and meet the requirements of the development team
The Result
Following the implementation of a unified visual identity across the native iOS app and website, we witnessed a notable surge in engagement metrics.
1st
Within the initial three months post-implementation, volunteer sign-ups among younger demographics soared by an impressive 30% (mainly
from the app).
2nd
Additionally, we observed a remarkable decrease in reported user issues related to signing up for events, showcasing the effectiveness of the revamped design in enhancing user experience and usability.
Project Takeaways
Can this be done by a thumb?
Embracing a Mobile First approach revolutionized the design process, prioritizing simplicity and efficiency across all screen sizes. This methodology not only streamlined navigation but also minimized user input, fostering a seamless and engaging experience for volunteers of all ages.
Empowering Development Efficiency
By addressing development team needs and providing comprehensive design coverage, we streamlined the development process, enabling focused implementation and eliminating the need to handle edge cases. This collaboration reinforced brand consistency and empowered the team to deliver a polished and cohesive product efficiently.
Brand Reinforcement
Spearheading the creation of a new visual identity for JustServe entailed more than just aesthetic refinement; it involved a comprehensive approach to design system development. This encompassed the meticulous documentation of design principles, including detailed insights into button anatomy and other UI elements, facilitating seamless handoff to the development team.