CASE STUDY:
TEER.

MY ROLES
UX/UI DESIGN


TOOLS
FIGMA
INVISION
OTTER.AI

TIME

10 WEEKS

2 SCREENS.png
Mockup Layout No Gap.png

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?

PROJECT OBJECTIVE:

To create a digital solution to help motivated young adults access & engage in volunteer opportunities in order to increase their civic involvement.

CONSTRAINTS:

  • Time Frame: 10 weeks

  • Agnostic App

PROBLEM
SPACE

SECONDARY RESEARCH

Photos: Unsplash

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.

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.

The target users of my digital product are young adults with greater mobility and proven interest in volunteership. My users have an increased chance of direct community involvement. There is also little offered by Dosomething.org to match users with causes they are invested in.

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 multiple filter layers that leave you with scant information about what you're getting into.

Before I began asking my user base what they need and why I wanted to define the assumptions surrounding my problem space and why I believed it was valid.

PROJECT
HYPOTHESIS

ASSUMPTIONS

  • I believe improving young adults' access to volunteer opportunities will lead to increased engagement in positive civic involvement.

  • I will know I am right when those who use the product become civically involved.

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 hunting opportunities down online. "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.

The 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!)

There was also an issue of transparency - it sounds really nice to say you want to volunteer when you really have no intention to do so. But let's assume, moving forward, those surveyed are transparent in their responses and mean what they say.

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.

PERSONA

"VOLUNTEER NUBIE"

EXPERIENCE
MAP

OPPORTUNITIES FOR DESIGN

Experience Map.png

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

Original Task Flow 1.png

Considering the Tasks Kathryn wants to accomplish, I researched existing Components whose functionality spoke to the goals of my Persona. I made sure to look not only within the non-profit sector, but at industries with adjacent 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

Screen Shot 2021-06-13 at 10.57.48 PM.png

VIRTUAL VS

IRL TOGGLES

Screen Shot 2021-06-13 at 10.24.35 PM.png
Screen Shot 2021-06-14 at 8.10.19 PM.png
Screen Shot 2021-06-13 at 10.49.31 PM.png

FILTER

TABS

Screen Shot 2021-06-14 at 1.35.25 PM.png
Screen Shot 2021-06-14 at 8.02.39 PM.png
Screen Shot 2021-06-14 at 1.35.51 PM.png

SKETCHES

EXPLORATORY

HORIZONTAL

CAROUSEL

Scan.jpeg

VIRTUAL VS

IRL TOGGLES

Scan 4.jpeg
V1 Solution Sketches 1.jpeg

DEATILS

PAGE

MODAL

FULL SCREENS

FILTER

TABS

Scan 4.jpeg
V1 Tabs Toggles Sketch.jpeg

FAVORITES PAGE

MAIN FEED

Once I felt I had a good hold on design elements I took my paper design into Figma and created a grayscale digital version. Stills of those screens are seen below.

VERSION 1
SCREENS

V1_S1.png
V1_S2.png
V1_S3.png
V1_S11.png
V1_S4.png
V1_S7.png
V1_S8.png
V1_S5.png
V1_S6.png

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:

  • Task 1 - Find an outdoor volunteer opportunity 

  • Task 2  - Add this to your Favorites 

  • Task 3 - Navigate to your Favorites Page

  • Task 4 - Pick the most relevant volunteer opportunity 

  • Task 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

Testins Resuluts Version 1 Round 1.png

SUMMARY:

Task 1 Find an outdoor volunteer opportunity​

​​

  • The sorting tabs didn’t read were not instinctually used.

  • NEW THIS WEEK could be either more subtle, repeated in style, or removed.

Task 2 Add this to your Favorites

​​

  • Users were able to recognize it right away as a “favorites” option that is clickable.

  • The filling of the star also satisfied expectations and communicated that the item was saved.

Task 3 Go to your Favorites

 

  • No major issues were detected other than that the star icon used could better match the rest of the icon set

Task 4 Pick the most relevant volunteer opportunity

  • The sorting tabs at the top which are repeated from the top of the feed again did not read.

  • Make it more clear that these are sorted by MOST relevant - “best matches!” “Top Picks!” “For you!” label could be implemented.

  • Rather than the matches in 2 columns, they could be stacked one on top of the other.

Task 5 Apply for the opportunity

 

  • A user tester suggested that there may be a hyperlink or smaller apply button at the top so the user does not have to scroll all the way down.

  • The large apply CTA could be smaller, in keeping with the style of most apps on the market.

DESIGN
PRIORITIZATION

VERSION 1

Design Prioritization Matrix Round 1.png

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

Task Flow Version 2.png

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_S1.png

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_S11.png

V1 Apply Button

"You shouldn't have to scroll all the way down to apply."

- 2 of 5 users

V1_S4.png

AFTER

V2 Feed - "open" / "closed"

X - 119.png
X - 121.png

V2 Favorites

X - 117.png

V2 Dual Hyperlinks

X - 111.png

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:

  • Task 1 - Set your feed to Sorted By Relevance (Skills / Interests)

  • Task 2 - Pick Your Top Match from the Relevance Tab

  • Task 3 - Add This Option To your Favorites and View Favorites

  • Task 4 - Pick The Best Matched Volunteer Opportunity From the Relevance sort on the Favorites / Saved Page (default)

  • Task 5 - Share This Opportunity With A Friend Via Text, and Click Apply Link To Go To the Website

TESTING
RESULTS

VERSION 2

Testing Results Version 1 Round 2.png

SUMMARY:

Task 1 Set your feed to Sorted By Relevance

​​

  • 4 / 5 were also able to confirm that the order of the Main and Favorites feeds was listed by match in ascending order.

  • The POPULAR THIS WEEK seems “squished”

Task 2 Pick Your Top Match from the Relevance Tab (Feed)

​​

  • “Top Match” label and badge cued users in as to the ordering and nature of the feed

  • Easy to identify which was the “best” match and deduced that they were listed in ascending order from best match to least matched.

Task 3 Add This Option To your Favorites and View Favorites

 

  • No major issues were detected - one user narrated the action correctly, but followed it out by tapping the star on the  nav bar rather than next to the photo. They corrected themselves immediately.

Task 4  Pick The Best Matched Volunteer Opportunity From the Relevance Tab In Favoritestunity

  • The addition of the “Top Match” label and badge cued users in as to the ordering and nature of the feed

Task 5 Share This Opportunity With A Friend Via Text, and Click Apply Link To Go To the Website

 

  • The “share” option (words and commonly seen icon) were easily recognized as the share option.

  • The hyperlink did not offer easier access to the application. Instead, the users thought the top link was the title of the page. They went to the bottom instinctually to look there for the application “button” and only through deductive reasoning clicked on the word link to the application.

DESIGN
PRIORITIZATION

VERSION 2

Design Prioritization Matrix Version 2.png

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

X - 118.png

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

X - 108.png

AFTER

V3 Feed

X - 137.png

V3 Feed - Anchored Button

X - 126.png

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. These tab iterations are not helpful to our branding or filling the users’ needs of using multiple filters to choose volunteer opportunities with ease. The ineffectiveness during testing, the feedback from other designers, and the general lack of intuitiveness and functionally showed us 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 am committed to delivering the best product possible. 

Looking to the current market again for UI inspiration, the notion of Pill Filter Buttons arouse. These activate Filter Modals that the user can easily access 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.

BYE-BYE TABS

PILLS + FILTER MODAL

Pill Filter Carousel

Group 36.png

Filter Modal (Causes)

Animals Education Environmental Checked.png

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

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

MOODBOARD.png
COLOR PALETTE.png
Typography.jpg

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

12 NAMING.png

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.

“Teer,” short for volunteer, is also a homonym of “tier,” as in the tiers of filters we can now apply to our feed.

Adding the period tips off those who might not be in the know that this is the second half of the word.

20 WORDMARK.png

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

33 ATOMS ICONS.png
36 ATOMS BUTTONS.png

IMAGES

34 ATOMS IMAGES.png
44 TEMPLATES.png

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!

HIGH-FIDELITY
PROTOTYPE

ALL TOGETHER NOW

MARKETING

RESPONSIVE WEBSITE

To create what might be a 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 was used to iterate and prioritize improvements of my design throughout the process.

DEVELOPEMENT

MARKETING WEBSITE

Scan 6.jpeg
Scan 7.jpeg
Scan 9.jpeg
Scan 8.jpeg

DESIGN

WIREFRAME PROTOTYPES

Version 1 Wireframes

CONTENT FLOW
DIAGRAM

MARKETING WEBSITE

Mobile

Breakpoints

Desk

Tablet

29 HIGH FI FINAL VERSIONS_edited.jpg

HIGH-FIDELITY
PROTOTYPES

DESKTOP & MOBILE

High-Fidelity

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

Considering all I've learned in the last 10 weeks - going from never having designed to iterating an idea into a High-Fidelity Prototype - I am amazed at the nuance and required open-mindedness of informed user-based design. Here are some of the specific takeaways: 

  • 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.