LINKNOW

A personalized volunteering selection experience to reduce the barriers of entry for young volunteers

BACK
Overview
Research
Ideation
visual Design
Reflection

LINKNOW

A personalized volunteering
selection experience

Scroll Down

OVERVIEW

LinkNow allows potential volunteers to gain a personalized selection experience by connecting them to positions, organizations, and groups with like-minded individuals based on their time availability and interests.

My Role

User Experience Designer
  • Conducted Ideation and developed personas & user journey
  • Led team effort in Wire-framing & developed lo-fi interfaces
  • Carried out Usability Testing and integrated feedback
  • Created high fidelity mockups of digital interfaces
Researcher
  • Gathered initial insights from comparative analysis
  • Facilitated semi - structured interviews and observational research
Team Members
Jenny Dieng
Jesse Du
Wallid Beidas
Duration
9 weeks

The Process

Research

• Understanding the problem
• Gathering insights
• Goals and Requirements

Ideation

• Conceptualizing solutions
• White-boarding ideas
• Narrowing scope

Usability Testing

• Gaining user perspective
• Re-evaluating solution based on feedback

Design & Prototype

• Building a design system
• Creating interactive prototypes

The Outcome

The Problem

A study done in 2015 stated that for the first time in 30 years college volunteering rates have declined. Today roughly 25% of college students volunteer amounting to $6.7 billion worth in services. While there are numerous benefits (8.5% increase in mental health and 9% increase in physical health), there are several factors such as time and lack of awareness that create barriers of entry into the world of volunteering.

RESEARCH

We used Semi structured interviews, comparative analysis and ethnographic observations to understand our problem space. The information gathered helped us identify their motivations and pain points, and were used to inform the creation of personas and a user journey map.
(1) User Interviews
(2) Ethnographic Observation
(3) United Way of King County
(3) Golden Volunteer
(3) Volunteer Match
(3) Handshake
1. Semi-Structured Interviews
Interviewed UW students with volunteering experience in order to narrow down the problem space
2. Ethnographic Observation
Observed "physical" volunteering recruitment at Resident Student Organization (RSO) Fair at UW.
3. Comparative Analysis
Reviewed popular volunteering platforms to identify design patterns
Affinity Mapping

Main Findings

Busy

Students are often busy to go out of their way to look for volunteering opportunities

Specific & No Variation

Students' academic needs are very specific and platforms contain few types of positions.

Community

Students like to volunteer with organizations that are a part of their community

Categorization of Users

We split out users into Actively looking users and Passively looking user

Personas and User Journey

We decided to create two personas, Anna and Bob, to represent active and passive volunteers respectively. Doing so, we could establish “the user” and solidify their different pain-points to help develop our product around. Due to the time constraints placed by the course, we built our journey map around Anna's scenario.

View full document here
‍

Design Requirements

As the culmination of our research, we formed 6 design requirements that would dictate the direction of our product.
‍

Time Availability

Allow User to input Time Availability and filter open position to when they are free

Interests

Allow users to add their interests to filter volunteering opportunities

Events

Allow users to view upcoming and past events or positions they have signed up for.

Easy Apply

Allow Users to easily apply for a volunteering position, and display information needed to make this decision

Community

Allow users to engage with a group or community of like-minded individuals volunteering in similar areas

Favourites

Allow users to favorite events or organization and have the ability to share these with friends.

IDEATION

In the Ideation phase, we focused on integrating our design requirements into the preliminary version of LinkNow. Storyboarding allowed us to discuss various use case scenarios that later informed the Information Architecture, helping us conceptualize the apps features and functionality provide. We then built wireframes and paper prototypes to be tested out by users.
Story Boards
Information Architecture
Wireframing

Paper Prototypes

Utilizing our Information Architecture and combining our vision from our storyboards we were able to identify three key user flows. Combining this knowledge with our Interface Sketches, we transformed these user pathways into paper prototypes. We spent a lot of time white-boarding our ideas and sketching out how the interactions between these screens would flow. I've outlined one of the tasks that were used below.

View full document here
‍

Example Task

Signing Up for a Volunteering Position

We would like our users to be able to sign up for a volunteering position. As one type of our user is "passively looking" for opportunities, they should be able to sign up for positions with minimal effort while gaining access to essential information
Prerequisites
• User should have already set up their account
• User should have filled in their profile
• User should have filled their Time-Slot Availability

01

02

03

04

05

06

Usability Testing

In order to evaluate our designs we conducted a usability test with 7 different users, each carrying out three tasks. The insights would inform our design choices and modifications as we developed the wireframes. For each test, the user had to complete the user path flow and answer a set of pre and post test questions.

View full document here
‍
Takeaways
Time Slot
It was difficult to navigate through the Time Slot Availability feature
Facebook
Didn’t understand “Connect to Facebook” in setting up profile
Interface
The application had inconsistent interfaces in terms of button placement & styles
Icons
The icons were confusing for “Groups”, “My Events” and the main LinkNow symbol
Terminology
Unclear terminology caused confusion in users between “Organizations” and “Opportunities”

Modifications

Data from our pre and post interviews, combined with the usability testing aided with extracting actionable recommendations for our design.
‍

Time Slot  

Allows users to input their time availability during setup. Positions recommended to the user are based on this data.

Users Said
The navigation functions of the page were unclear, as it contained a day selector, a next button and an arrow key to swipe to the next day. "Why can't we import data from our online calendars (Google Calendar, iCal, etc)?" (User 6). The scroll wheel UI to add time slots was confusing. "Do we select a time for every day individually, or select the days and a common time?" (User 7) "Can we add multiple time slot sections to the scroll wheel?" (Users 4, 5, 6, 7)
‍Design Recommendation
Add the ability for Users to import data from an online calendar
Create a more recognizable UI to increase familiarity of interface with users and eliminate the present learning curve
Updated User Flow

Facebook

Allows users to link their profile to Facebook, allowing them to volunteer with their friends

Users Said
Users weren't clear on the information LinkNow would take from facebook.
Due to the placement of this button right under the 'Address' field users said "Connect to Facebook is bothering,Facebook doesn’t have the address hence why are you asking for it?” (User 6)". As other application read "Sign in with Facebook", this confused users.
‍Design Recommendation
Provide some form of context to users by having a "?" icon near the feature
Change the placement of the button

Interface & Iconography

The icons refer to the symbols associated with our features and the interface referes to the layout, consistency and terminology used.

Users Said
The My events page uses a calendar icon which was viewed by users as a 'Calendar'. The groups icon was seen more like a 'friends' section. They stated “In a million years, I wouldn’t have thought that groups was that icon, it looks more like friends to me.” As we asked users to connect to facebook they assumed that it was a friends section.

'Organizations' and 'Opportunities' caused confusion between a lot of users. Firstly, the button placed under the search bar indicated it being a filter to some and a link to others. Secondly, the terms had various connotations to user.
‍Design Recommendation
Add a title under each icon along with updating the icons
Change the word Opportunities to Jobs and re-design the filter system
Icons
Filter

Annotated Wireframes

Using our paper Prototypes as a key reference point and sorting through all our learnings from our usability tests we developed annotated wireframes for LinkNow.

View full document here
‍

VISUAL DESIGN

To create our final designs we had to firstly develop a visual system to bring consistency to our work. After creating our first version we presented our stills to our peers and iterated based on their critique.

Style Guide

The visual system needed to be clean and simple due to the large amounts of textual information present. We went with SF Pro Display as the font. The headings were differentiated using font weight.

We stuck to one main accent color and distinguished components by changing opacity. Additionally, complimentary pastel colors were used to support our primary accent color.

Our iconography consisted of rounded edge symbols that helped with the readability. As previously stated, we had to iterate on our icons based on user feedback to clarify what we were trying to say with them
Font

Aa

SF Pro Display
Regular
Medium
Bold
Colors
#0A0B5A
100 %
#0A0B5A
75 %
#0A0B5A
60 %
#0A0B5A
40 %
#26E3E6
#E62727
#0A0B5A
#0A0B5A
Icons

First Iteration

We took our wireframes along with the feedback we received on it and created our high fidelity mockups. These screens represented the most essential functionality of each user task flow: The Time Slot Availability, Home Screen and Groups Page.
‍

Final Result

REFLECTION

Team Work & Time
  • Learning to coordinate with peoples busy schedules was challenging
  • Understanding the unique value that everyone brought to the team and how to delegate tasks based on that
  • The UCD process can always do with more interviews, research and iteration
  • Knowing when to stop work and to correctly allocate time to different parts of the project
Improvements
  • I would expand my user group to people other than students, from all phases of life
  • I learned a lot from usability testing, not asking leading questions, knowing when to prompt a participant, etc.
  • Explore more design patterns and iterations of the final design
View Other Projects
SaferZone
Spring OS