My Role / Research and Interface Design
Tools / Adobe XD, Illustrator, Photoshop
Timeline / Research - 2 Weeks, Design - 2 Weeks
This was a 4-week client-focused project created within a senior user experience design course. My specific roles included leading product strategy, journey mapping, research, conducting user interviews, facilitating sprints, and designing the product UI, interactions, and prototypes. After our initial academic project was complete, I revisited this project to refine the prototype UI.
The City of Surrey is the 12th largest city in Canada. As British Columbia's fastest-growing city, 30% of its population is under 19. The city is concerned about this growing demographic, and about how to get them more engaged with the local government services and programs.
To provide a solution for this demographic that is relevant and useful for Surrey’s Youth, we first need to understand more about the group and their interests.
This project began right before the COVID-19 lockdown began, so a unique factor we had to deal with was shifting from in-person collaboration to entirely remote. This certainly made it more difficult to conduct user interviews and carry out collaborative design sprints/exercises. However, thanks to online collaboration tools like Zoom and Adobe XD’s cloud feature, we were able to carry out our project without a hitch.
Another constraint was the budget. The City of Surrey was not looking to spend a significant amount on this project which forced us to be more creative and come up with a solution that would be cost-effective.
We utilized both online and in-person research to discover common patterns and first-hand accounts Surrey Youth had regarding municipal programs and services offered by the city. One significant takeaway was that the youth perceived services as not being catered to them. Another was that youth need to fulfill certain volunteering requirements to graduate from secondary school. Finally, the City of Surrey is communicating to everyone, but not reaching youth.
During the initial process, we understood the importance of thoughtfully and continuously framing and reframing our project as we gleaned new insights based on what we learned about our demographic. We wanted to reframe the problem and provide a service that is of interest to Surrey students in Grades 10-12 because it meets the need of fulfilling their volunteering requirements.
With our insights, we were able to establish the frame "How might we engage with secondary school students regarding volunteer opportunities to help them complete their 30 hours of volunteer experience?".
We synthesized our insights into a tangible persona, a Grade 12 student struggling to complete her 30 hours. This enabled us to audit how our persona currently perceives the volunteering process and question how we could shift this to enable them to succeed.
MySurrey Volunteering Hub benefits both the city and the youth. For the City of Surrey, this means establishing a connection with their target demographic, as well as creating appeal for their other services. For the youth, it’s the tangible value of convenience, having every volunteer opportunity in the city in one place, enabling them to reach their goals.
Throughout our adapted sprints I was responsible for creating wireframes and prototypes to make the team's ideas tangible and to receive feedback through user-tests. Another teammate and I were able to validate our concepts by conducting user-tests with students that fit within our persona.
Specifically, we looked to measure the desirability of our feature for students and whether they thought the features we envisioned would be useful. Once we were on the right track, I worked to refine the UI with increasing attention to detail and feedback.
Starting in Grade 10, secondary school students are introduced to Graduation Transition requirements which include 30 hours of volunteer experience. This is something that all students need to complete to graduate.
Our intervention would be to introduce the volunteering resources via the Surrey Online Services web application to students through their Planning 10 and homeroom classes.
An extension of the MySurrey web application connecting youth with city services and volunteering opportunities.
On their first time searching for volunteering opportunities, students would go through a short onboarding survey to identify which types of opportunities they are interested in and then would receive curated opportunities based on their choices.
They can also view their volunteering history, track their overall progression, and consolidate this information into a shareable document for their school to review.
Students can browse through volunteer opportunities on the landing page and try something new or search for specific programs that pique their interest.
Search results can be filtered by areas of interest, location, and days of the week to help students find the right volunteer opportunities for them.
View Prototype
The MySurrey Volunteering Hub addresses the perception that Surrey’s Youth feels like there aren’t services that are directed towards them. The feature would be presented to Grade 10-12 students as a service that is intended for them. Due to this, they would be less inclined to perceive it as a service that is not catered towards them.
Youth do not feel it is worth the investment to parse through to find relevant content. The MySurrey Volunteering Hub addresses this issue by targeting a demographic that is specifically looking for volunteering opportunities.
Their current solution for promoting, and applying for volunteering opportunities is being under-used and is not adhering to modern web usability standards. Based on the pricing structure from the Better Impact website, we believe it is costing them several thousands of dollars each year to maintain.
Our solution integrates itself into an already existing platform that the City develops itself (MySurrey) by adding a module. We believe this approach would be a more cost-effective solution to maintain since it would be using web components that have been built already. This also allows them to keep a more consistent experience across their website.
MySurrey Volunteering Hub gives youth a more streamlined volunteering experience that enables them to efficiently complete their 30 hours of required volunteer experience. Easy access helps students because all of the opportunities are available in one place. The City of Surrey and its partners are able to better engage with youth through this platform. It is a convenient way for the city and its partners to attract volunteers for different causes and events in the city. By keeping all of their services within the same platform, it creates the potential for youth to explore other services.
My key takeaway from this project was how to effectively tackle ambiguous problems. Earlier in school, ambiguous problems would have been anxiety-inducing for me. I was unsure how to approach them, there was no set formula to address them. In this project, I learned that it is crucial to conduct research to identify the “right problem”. Following that, it is important to establish appropriate constraints to achieve the most viable and credible solution. This knowledge will be invaluable during my career while working with individual clients, and design teams.
Given more time, I believe our team must address the need for a complete product flow. Aware of our project's time constraints, we chose to focus on making 'vignettes' of our service that would best communicate both our key features and overall vision. However, the next step would be to flesh out the content to produce a complete feature that could be thoroughly tested with secondary school students.
🎉 You made it to the end! Thanks for taking the time to read about this project.
Fraser Health — 6 Min Read
Check out the Process
Barclays — 5 Min Read
Check out the Process
