CASE STUDY:
TEER.
MY ROLES
USER RESEARCH
UX / UI DESIGN
CONTENT DESIGN
BRANDING
MARKETING
TOOLS
FIGMA
INVISION
OTTER.AI
TIME
10 WEEKS
PROJECT
BACKGROUND
IDENTIFYING THE PROBLEM
After the onset of COVID, I saw friends speaking out on social media. What grabbed my attention was not what they were doing, but what they weren’t doing; they shared the message, but didn't seem poised to take measurable action. Don't get me wrong - I'm glad to see so many vying for positive change. Still, I couldn't help but wonder what huge amount of comprehensive change was possible if we channeled even a fraction of these sentiments into physical community engagement.
It is clear from social media, news, and my personal interactions that many young adults genuinely want to change their communities for the better. But for some reason, they are not engaging in civic opportunities to do so.
Why not?
PROBLEM
SPACE
SECONDARY RESEARCH
Photos: Unsplash
PROBLEM
SPACE
DEFINED
During COVID, there were two impediments to volunteering: one was the virus, and the other was a lack of knowledge about how to access organizations to volunteer. Covid is going to end, but that second impediment isn’t going away. As a society, we have a problem in that these young adults who want to volunteer don’t know how to best access the opportunities.
To turn this problem space into an actionable task to design within, I authored the following Design Challenge.
PROJECT
GOAL
To create a digital solution to help motivated young adults access & engage in volunteer opportunities in order to increase their civic involvement. TEER aims to reduce the frustration preventing people from engaging in civic activities and will hopefully lead to community betterment.
Following the convergent and divergent thinking of the Double Diamond Design Methodology, I developed and explored a wide range of ideas before taking focused action. This established creative process guided me through four defined stages to organize my design process.
Dan Nesser - British Design Council
DISCOVER
Research
Key Insights
DEFINE
Persona
User Stories
Task Selection
DEVELOP
Sketching
Wireframes &
Prototype
User Testing
DELIVER
Visual Identity
Marketing
Next Steps
METHOD
DISCOVER
DESIGN
CHALLENGE
How might we connect young adults who have an interest in social change with meaningful volunteer opportunities in order to increase civic involvement?
From here I looked to the current market for existing digital tools and solutions for finding volunteer opportunities. I wanted to know the nature of any competitors and to find areas any existing solutions might fall short. And look for inspiration!
MARKET
RESEARCH
WHAT'S OUT THERE
Dosomething.org is the largest digital platform for not-for-profit youth involvement. With members in 131 countries, their online presence is bright, bold, and their target user is estimated to be between the ages of 13 and 22.
However, their presence is limited strictly to their website and social media platforms. A beta version of an app was launched in 2016 but is now defunct.
There are also web platforms like Volunteermatch.org, but their interface is rather outdated and they don't offer much in the way of information pertaining to the nature of organizations or opportunities offered there. These are just another jungle of civic opportunities thrown at people with few insights to aid in choosing.
There is ample room in the current market for a mobile-based tool that helps young adults gain access to volunteer opportunities. Let's face it, there is basically nothing out there. The digital tools that exist don't cater to my young adult user group. Most are stiff, web-based, and have filter systems that leave the user with scant information about what they're getting into, forcing them on to reference multiple information sources to get the full picture.
To better know the "why" behind my Problem Space I created a Research Plan to speak with 4 users directly through virtual interviews. I wanted to ask some general and specific open-ended questions about their experiences and feelings around finding volunteering opportunities to get a better sense of their Pain Points, Goals, and Motivations.
In addition to this qualitative data from interviews, I elected to create an online survey to strengthen the interview insights I found with additional quantitative data.
RESEARCH
PLAN
PERSONA INTERVIEWS (QUALITATIVE)
ONLINE SURVEY (QANTITATIVE)
PARTICIPANT CRITERIA:
-
Ages 18 - 34
-
Access to Smart Phone & Wi-Fi
-
Have an interest in or have volunteered
SETTING & PARAMETERS:
-
My apartment
-
Transcripted by Otter.ai
-
4 vitual interviews over Zoom
GOALS & OBJECTIVES:
-
To validate the assumption that young adults lack access to volunteer opportunities.
-
To validate the assumption that young adults are not civically engageed despite wanting to be.
-
To understand the pain points, frustrations & motivations surrounding seeking out volunteership.
PARTICIPANT CRITERIA:
-
Ages 18 - 34
-
Smart Phone & Wi-Fi
-
Have interest in or have volunteered
SETTING & PARAMETERS:
-
Google Survey
-
66 total participants
-
Distributed on Instagram
GOALS & OBJECTIVES:
-
To guage the relative percentage of young adults who wan to volunteer but do not
-
To gauge relative percentage of why from a select set of answers.
INSIGHT 1
46% surveyed said they want to volunteer but don't.
Half of those people said it is because they don't know where to look.
INSIGHT 2
"Googling" delivers too many volunteer options with little insight to aid in comparing & choosing.
INSIGHT 3
INSIGHT 3
30% of those who want to volunteer (but do not) say they would if they had a friend to go with.
KEY
INSIGHTS
INTERVIEWS & SURVEY
My findings showed the most prevalent factor holding young adults back from volunteering was the fact that "just Googling," produced too many results with the necessary information to choose scattered across multiple platforms. Because of the prevalence of this issue within my user group, this is the insight I chose as the jumping-off point for my design.
I also uncovered a social motivation: The desire to volunteer with a friend.
My quantitative survey data was particularly useful in assigning number values to my subjective assumptions & concepts. And what a turn out; nearly 70 people were kind enough to respond. (If you're reading this, thank you!)
It's with this information that I crafted my persona. Since most of those I spoke to had little to no experience volunteering in their community, this is the perspective she took on.
DEFINE
PERSONA
"VOLUNTEER NUBIE"
EXPERIENCE
MAP
OPPORTUNITIES FOR DESIGN
OPPORTUNITY
FOR DESIGN
Looking at my Experience Map I found the greatest opportunity for design intervention when Kathryn was SEARCHING & COMPARING volunteer opportunities.
From here I authored a comprehensive set of user stories to see, from Kathryn's perspective, how completing tasks have tangible benefits and outcomes. This also allowed me to prioritize a more specified solution to base my design around. I titled her perspective "New Volunteer" because that is the user base she is most representative of.
USER
STORIES
As a New Volunteer, I want to...
-
Know what volunteer opportunities need my skills so that I can decide the best place to offer my help.
-
Get detailed information about the opportunity I can decide based on the full nature of the experience.
-
See what the volunteer experience looks like so that I can be assured it’s right for me.
-
Know the type of environment the volunteer work is done in so that I can know if it is a place I want to spend time.
-
Learn how much the organization spends on administration so that I can decide to go based on their priorities.
-
Read an organization’s mission statement so that I can decide to go based on their values.
-
Find out what volunteer opportunities are available so that I can commit to participating in civic engagement.
-
See similar opportunities to the ones that appeal to me most so that I can increase my participation in civic engagement.
-
Get suggestions of opportunities that appeal to me so that I can avoid an arduous search.
-
Compare volunteering opportunities in my area so that I can participate in the opportunity best suited to me.
-
Apply to participate in volunteer opportunities that suit me so that I can participate in creating positive change in my community.
-
Invite a friend to volunteer with me so that I don’t have to feel awkward in a new place alone.
TASK
SELECTION
To determine the core functionality of my product I used Agile Methodology to leveraged these User Stories as building blocks for uncovering Themes, converting the most compelling of those into Epics.
CORE EPIC: CHOOSING
I then integrated the theme of APPLYING to the opportunity. Although this was not a prominent Theme derived from my stories (you can really only apply to an opportunity in so many ways), I still included it because I knew it was the ultimate end goal of the user and answered the Design Challenge.
PRIMARY TASK: CHOOSING
SECONDARY TASK: APPLYING
TASK
FLOW
VERSION 1
DEVELOP
Considering the tasks Kathryn wants to accomplish, I researched existing mobile app components whose functionality spoke addressing her goals. I made sure to look not only within the non-profit sector but at industries with adjacent search and filter tasks (Hotel Room Searches, Flight Searches, Dating Apps).
From there I sketched exploratory ideations of design elements, first as individual features, then as full-screen solution sketches.
Here is a sample of that exploratory work.
UI INSPIRATION
HORIZONTAL
CAROUSEL
VIRTUAL VS
IRL TOGGLES
FILTER
TABS
SKETCHES
EXPLORATORY
HORIZONTAL
CAROUSEL
VIRTUAL VS
IRL TOGGLES
DEATILS
PAGE
MODAL
FULL SCREENS
FILTER
TABS
FAVORITES PAGE
MAIN FEED
With my Version 1 Wireframe Prototype solidified I was ready to test. To bring clarity and consistency to my testing I devised a Testing Plan outlining the steps to validate my design assumptions and smoothness of the overall flow. Considering my time constraints, I tested 5 tasks with 5 individuals with my Figma prototype over Zoom.
TESTING
PLAN
VERSION 1
SUMMARY
-
5 Tests of Version 1
-
5 Users total, 5 tasks per
-
Zoom
-
June 17, 2021
GOALS & OBJECTIVES
-
To evaluate the assumptions and design decisions of the v1 app prototype.
-
To test the overall usability of the design, identifying areas of success and areas for improvement.
TASKS
1 - Find an outdoor volunteer opportunity
2 - Add this to your Favorites
3 - Navigate to your Favorites Page
4 - Pick the most relevant volunteer opportunity
5 - Apply for the opportunity
After my first round of testing, I found the Filter Tabs to lack the intuitiveness necessary for the user to engage smoothly. This along with other potential changes were plugged into a Design Prioritization Matrix to delineate what should and could be done to improve the design. I found the majority of my changes necessary and feasible so I applied all of them to my Version 2 wireframe prototype.
TESTING
RESULTS
VERSION 1
TASK
1
-
The sorting tabs didn’t read were not instinctually used.
-
NEW THIS WEEK repeated is distracting.
TASK
2
-
The filling of the star satisfied user expectations & communicated that the item was saved.
TASK
3
-
No major issues were detected other than that the star icon used could better match the rest of the icon set.
TASK
4
-
The sorting tabs again did not read.
-
Which opportunity is "most relevant" to the user is not obvious.
TASK
5
-
The large apply CTA could be smaller, in keeping with the style of most apps on the market.
DESIGN CHANGE
PRIORITIZATION
VERSION 1
After further research, I learned that the universal application I wanted to offer users is not the preferred application method used by non-profits. This became a high-priority improvement I knew I had to make. I chose to add a link that led the user directly to the unique application for that organization.
The Filter Tabs were not as intuitive as I'd hoped. So another big change was creating a "sticking" interaction with the Filter Tabs - when the user swipes up in Version 2, I chose to have the Filter Tabs stick up to the top of the screen to give the user a full-screen view of the Main Feed, with the Filter Tabs remaining accessible throughout.
Before I started designing improvements, I developed a new task flow for Version 2 to house the changes. I also wanted to add the secondary task of INVITING a friend. The more I considered the significance of this as a motivation to my user base, the more I felt the functionality should be tested.
TASK
FLOW
VERSION 2
VERSION 2
ITERATIONS
BEFORE
V1 Feed
"I don't understand why it matters if these are new or why that's vertical."
- 3 of 5 users
"I don't understand why it matters if these are new?"
"Why is this wording vertical?"
"I almost didn't see the feed down there..."
- 3 of 5 users
V1 Favorites
"What would I search for in the Saved?"
- 3 of 5 users
"I can't tell which of these is the most relevant."
- 4 of 5 users
V1 Apply Button
"You shouldn't have to scroll all the way down to apply."
- 2 of 5 users
AFTER
V2 Feed - "open" / "closed"
V2 Favorites
V2 Dual Hyperlinks
I repeated my testing & iterative process from Round 1, this time with a few small updates to the tasks to reflect the new flow.
TESTING
PLAN
VERSION 2
SUMMARY
-
5 Tests of Version 1
-
5 Users total, 5 tasks each
-
Zoom
-
June 20, 2021
GOALS & OBJECTIVES
-
To evaluate the assumptions and design decisions of the v2 app prototype.
-
To test the overall usability of the design, identifying areas of success and areas for improvement.
TASKS
1 - Set your feed to Sorted By Relevance (Skills / Interests)
2 - Pick Your Top Match from the Relevance Tab
3 - Add This Option To your Favorites and View Favorites
4 - Pick The Best Matched Volunteer Opportunity From the Relevance sort on the Favorites / Saved Page (default)
5 - Share This Opportunity With A Friend Via Text, and Click Apply Link To Go To the Website
TESTING
RESULTS
VERSION 2
TASK
1
-
The POPULAR THIS WEEK seems “squished.”
TASK
2
-
“Top Match” label and badge cued users in as to the ordering and nature of the feed.
TASK
3
-
Minor flub by one user who corrected themselves immediately.
TASK
4
-
The addition of the “Top Match” label and badge cued users in as to the ordering and nature of the feed
TASK
5
-
The hyperlink did not offer easier access to the application. Instead, the users thought the top link was the title of the page.
DESIGN
PRIORITIZATION
VERSION 2
With the design changes, I found the Filter Tabs to test more effectively. However, I was considering they still might not be the right design choice for the user. The Tabs could only filter by a single criteria at a time.
Considering my time and unsure if I should pivot at this point, I applied the necessary changes from my Design Matrix above to create Version 3 of my prototype. All changes from the Matrix were valid and worth the effort.
VERSION 3
ITERATIONS
BEFORE
V2 Feed
"what is behind this menu if you have everything on the bottom [navigation]?"
- 2 of 5 users
"Maybe there could be some writing or words to explain this feed."
- 3 of 5 users
V2 Dual Hyperlinks
"I wasn't sure that was a link. I thought it might be a title for the page.
- 3 of 5 users
AFTER
V3 Feed
V3 Feed - Anchored Button
PIVOT
CONSIDERING VALUE
The core function of my product is to help young adults access volunteer opportunities. Considering that the benefit of the filter must outweigh the benefit of Googling, the Tab Filters as they stand do not deliver our core value proposition. The tab iterations were not satifying the users’ needs of using multiple filters to choose volunteer opportunities.
Considering the ineffectiveness during testing, the feedback from other designers, and the general lack of intuitiveness and functionally showed me that this design element must go. The tabs must be replaced with an alternate, easy-access filter system to best help my users.
Unfortunately, the testing window closed on the process. However, I was committed to delivering the best product possible to effectively address the users' goals.
Looking to the current market again for inspiration, the notion of Pill Filter Buttons arose. These activate Filter Modals that the user can easily activate without leaving the feed.
Perfect.
Iterations of Pill Buttons and Filter Modals were created using the feedback of fellow designers and, as I moved into branding, I finally landed on the missing piece of my design puzzle.
PILLS + FILTER MODAL
BYE-BYE TABS
Pill Filter Carousel
Filter Modal (Causes)
To better incorporate the new Pill Filter and Modal elements into my flow prior to creating my High-Fidelity version, I created an updated Task Flow and tweaked my design accordingly.
TASK
FLOW
VERSION 3
DELIVER
BRANDING
Colors. Shapes. Vibes. We need them to carry branding. My users (Millennials and Gen Z) are younger and know an online presence is an identity.
What better way to get all this in one place than a Moodboard. Created in Invision App, the Moodboard houses our values of sharing & caring, speaking your truth, doing good, and inspiring others to do the same.
I started with adjectives:
-
accessible
-
bold
-
DIY
-
communal
-
useful
-
smart
-
youthful, but not young
-
edgy, but not grungy
-
uplifting
-
urgent, but not pushy
-
humorous
-
inclusive
... Then collected visuals that support and express those concepts and values. I then extracted colors to use in my UI alongside my UI Inspiration Board. I knew I wanted to use the colors sparingly as the product is photo-heavy.
For my typography, I wanted a readable sans serif with just enough attitude and feeling of "signage." Helvetica made for the perfect typeface - clean and bold, neutral yet urgent.
MOODBOARD
COLOR & TYPOGRAPHY
ACCESSIBILITY
KEEPING EVERYONE IN MIND
Accessibility is incredibly important to my brand and to me. To ensure my chosen color palette and typography were used in a manner that is accessible to as many possible, I used the Github Accessible Color Palette Builder prior to designing my UI. As I designed in Figma I applied the Stark Contrast Checker.
This ensured that I remained within the WCAG AA 2.1 Accessibility Standards because everyone and anyone should be able to use digital tools to improve and simplify their lives.
BRAND
BUILDING
DESIGN RESEARCH &
BRAINSTORMING
NAMING +
WORDMARK
Abbriv’s are very popular. They are a youthful style of vernacular. They sound fresh & fun. Just like my product. That's why I chose “Teer,” short for volunteer, which is also a homonym of “tier,” as in the tiers of filters we can now apply to our feed.
I wanted a youthful and trendy yet urgent feel to the wordmark. I chose and styled fonts that expressed these feelings.
With a strong visual concept and accessible color palette, I started designing my UI. I used Brad Frost's Atomic Design approach. This means I started small: Icons and buttons. Then started combining those elements to create larger elements like search bars, modals, etc. working my way up to the completed interface templates.
UI LIBRARY
ICONS
BUTTONS
IMAGES
TEMPLATE
The video below offers a walkthrough of the completed design. You'll see the user already logged in looking through the carousel and main feed, then filtering through specific causes, favoriting one, and comparing it to other favorites. They then share the "TOP MATCH" of their favorites with a friend and tap the Application button.
If you're interested in interacting with it yourself please click the button below!
MARKETING
RESPONSIVE WEBSITE
To create what might be the first point of contact with my users, I designed a Responsive Marketing Website.
Designing for Desktop first then moving to Mobile, I considered:
-
Branding and messaging.
-
The value proposition of my design: providing a singluar platform for young adults to find, compare, & apply for volunteer opportunities
-
My audience of young adults, keeping my content fresh and upbeat with a trendy aesthetic.
My Design Plan ensured deliverables were responsive, effective, consistent & of value to my user base:
-
Research the current market.
-
Exploratory sketches.
-
Full-screen sketches.
-
Grayscale Wireframes.
-
Content Flow Diagram.
-
High-Fidelity Prototypes. (We must consider Desktop, Mobile, Tablets & animations in our responsive design).
Feedback from other designers was used to iterate and prioritize improvements of my design throughout the process.
FUTURE
THINKING
As many aspects of our lives move further into an online realm, I hope that this mobile tool can be a hub for almost anyone who wants to be a part of the betterment of their communities. However, the strength of a tool like this is determined by its use capacity. We need the time to use it and engage in opportunities to help our communities.
In the future, I wish to see employers carving out time within the workweek to encourage and facilitate community outreach. We are busy. We don't have time (another insight from my interviews, but one I felt I couldn't address within the constraints of this project). There needs to be a shift in the way we prioritize our day-to-day to allow room to engage in our communities for not the betterment of others' lives and our own lives as well.
KEY
LEARNINGS
-
Novelty for the sake of novelty is not effective design (until it is) - I initially shied away from "common" filter treatments. I wanted my product to have the element of surprise in its UI. However, my iterations in this vein didn't bring as much value to the user as I'd initially hoped. Commonly seen UI is often common because it works.
-
It's okay to pivot - Designing is not a zero-sum game. It is okay to reexamine during the process and continue to explore if that is what your testing feedback and insights call for. Usability designed within the given constraints is the most important aspect of the process and must take president over personal preference always.
NEXT
STEPS
-
Test my Filter Pills with users to confirm my assumption that they are indeed what is best to help my users reach their goals.
-
Continue to integrate constructive feedback from other designers around me to find where I can continue to improve.
-
Test the scalability of my design with data from various communities. (Knowing the reality of how many volunteer opportunities exist in any given community may change my design).
-
Reach out to community organizations for their input as to how I can improve my design and better serve them as well.