Volé
Volunteering made accessible for high school students
Adobe x Amazon Creative Jam Fourth Place Winner
Team Members
Gloria Luk
Amanda Sim
Role
Conducted User Research
Wireframed sketches on Figma
Prototyped product
Led visual design direction
Project Length
2 weeks (Remote)
Tools Used
AdobeXD
Mural
OVERVIEW
What is Volé?
Vole is a fun mobile volunteer app for high school students who need to fulfill their volunteer or community service hours! Volé helps students complete their hours by allowing them to explore and book opportunities directly through the app, verify hours completed for their school, and earn rewards for successfully completing hours.
Context
Amanda and I competed in the Adobe x Amazon 2021 Creative Jam. We were challenged to design a high-fidelity prototype in 2 weeks. There were over 500 teams from all over the United States, Canada, Australia, and New Zealand. Our team placed 4th overall. As finalists, we also were responsible for presenting in front of designers from Adobe and Amazon.
Our Goal
Our team wants to connect high school students to meaningful opportunities that foster growth and a sense of community.
The Design Challenge
Design an inclusive experience in a third-party mobile app (iOS or Android) for high school students looking for opportunities to fulfill community service hours or volunteer to help their local community, no matter what their background or ability.
USER RESEARCH
Competitive Analysis
We wanted to see what other related products and services exist in the digital stratosphere to gain a better understanding of current competitor solutions and gaps. Conducting a brief competitive analysis helped us learn the ins and outs of competitor services, and identified potential opportunities where we could out-perform them.
User Interview
As my partner and I had been out of high school for over 4 years, we needed a refresh on the current methods surrounding volunteer applications and tracking. We decided to send out a survey to current high school students in need of volunteer opportunities and asked questions related to searching and submitting for volunteer hours. We sent out surveys via reddit, facebook, and recruited mutual friends with siblings in high school. We had 6 responses.
Survey Results
1.Do you prefer volunteering individually or in a group?
50% (3) of students preferred to volunteer both individually and as a group, with 33.3% (2) students preferring a group, and one being unsure.
2. How do you submit your volunteer hours?
16.7 % (1) student submitted via mail, 33.3% (2) used paper forms, 50% (3) submitted online, (16.7% (1) did not submit, and 16.7% (1) emailed their guidance counselor.
Key Insights
After gathering our survey results, we listed out 5 important findings. Here’s what we established after discussing our survey results:
User Persona
To better understand our users…
We created a persona named Frankie who reflects the findings within our initial user research.
How can our solution help someone like Frankie?
Providing a fun and engaging way to obtain volunteer opportunities
Peer help/ pairing systems to accommodate needs
Easily understandable for teens of all reading capabilities
How Might We…
We used the HMW (How might we) method by reframing our insights into questions by starting each yellow sticky note with “How might we…” We then hypothesized actionable design solutions for our questions using orange sticky notes.
PACT Analysis
A PACT analysis is a useful framework for thinking about human-centred design. The acronym PACT stands for People, Activities, Contexts, and Technologies. In the analysis we consider our app idea in the context of each category and summarize our intentions of what the app will do to better understand how we would tie our analysis to our solution/design.
WIREFRAME
User Flow
We created a user flow to map out the user journeys starting from the home page, and into the different categories within the navigation bar.
Medium-Fidelity Wireframes
After creating user flow, we created medium-fidelity wireframes after quick sketches to begin visualizing the wireframes.
Medium Fidelity Wireframe
Amazon Coaching Session
As offered by the the Creative Jam, Amanda and I had the opportunity to consult with a senior UX designer at Amazon about our progress. We presented our medium fidelity prototype and pitch one week into the challenge for feedback. Here’s what we took from the meeting:
Find ways to delight users when they open the app
Focus more on the friends/community aspects
Make sure your are designing for everyone
Allow calendar syncing during onboarding to simplify process
Medium-Fidelity Wireframes Changes
After taking in the advice from the Amazon coach, we decided to make changes within our medium fidelity wireframes before moving on to the final prototype. Here are the updated wireframes:
User is introduced to the app, then prompted to fill in their information and a quick survey.
User can search for a volunteer opportunity or let the app select a random choice to sign up.
User can track opportunities and verify hours through our signing system.
Users can collect rewards/badges, and be ranked in a leaderboard for their activity. Users can also opt for notifications for all upcoming opportunities/activities.
User can create a personalized profile and add friends from their contacts to build a community
VISUAL DESIGN
Accessibility and Design
In addition to our meeting with the Amazon coach, we set up an appointment with Adrian Petterson, an Inclusive Design Researcher at the University of Toronto to better understand how we could implement accessibility with gamification for our app. Heres what we learned:
User Interface Style Guide
After consulting with both mentors and implementing changes towards our prototype, our team decided to start creating a style guide which would be applied towards the final prototype. We designed a fun and youthful colour palette paired with simple typefaces to capture the essence of our app.
PROTOTYPE
Hi-Fidelity Prototype
Finally, our team created a hi-fidelity prototype based on the changes we made from our feedback and the style guide.
EVALUATION
Presenting to the Judges
Our team was informed prior to the presentation date that we had been selected as a top ten participant in the challenge. As a result, one member would be presenting our design to a panel of judges (industry professionals) who would score and rank our places. Heres how our presentation went:
Critiques
After presenting, the judge gave our team feed back on our design:
Positive Feedback 👍
Loved calendar and location syncing during onboarding
Randomize button offered ‘delight’ to users
Onboarding intro was great (liquid swipe)
Enjoyed the community building aspect of the app
Points of Improvement 👎
Design lacked guidance (too much going on visually)
Primary and disable buttons are too similar in shade
Certain colour contrast did not meet minimum accessibility
Results
So What’s Next for Volé?
1. We want to work on making the user interface more accessible for users with disabilities and special needs.
2. Usability testing on high school students to make adjustments and improvements to the user experience.
3. Further investigating logistics regarding volunteer sign ups, submissions, and verification methods.
Personal Takeaway 🤔:
Working Efficiently
As I was juggling this design challenge with work and school, I had limited time to work with my partner. As a result, I learned what steps within the process to prioritize and how to complete them under pressure.
Accessibility vs. Aesthetics
I learned the importance of combining accessibility and design. As someone with a strong design background, I learned that it is possible for good design and aesthetic to work with accessibility guidelines.
Receiving Feedback
Consulting with the Amazon coach helped our team take a step back, and figure out how we could improve our product. It helped widen our perspective and kept us from over-focusing on unnecessary details.