Case Study - Kiva

Project Overview

A digital responsive guide for mental health and substance use resources, that can be navigated through searchable features, such as: menus, tags, and information hircherary.

Team | Caroline Light, Ernesto Fernandez, Nana Wartemberg
‍Role | Client lesion, Project management, Accessibility research
‍Tools | Figma, Adobe illustrator
‍Duration | 3 ½ weeks

UX Research Methods
User surveys, user interviews, competitive and competitive analysis, affinity mapping, usability testing, personification of the user, user journey mapping, information architecture, wireframes and prototyping.

Who is Kiva Centers?
Kiva Centers is a nationally recognized peer-run and trauma-informed organization that offers training, technical assistance, and networking opportunities statewide across Massachusetts.

The Problem
Users need a way to easily search through the Kiva Centers massive amounts of resources and find the information wanted from their phone or a Center’s desktop easily.

Competitor and Comparator Analysis

Trying to figure out how to help users best

After reviewing and discussing what other sites had to offer; in which Kiva Centers could benefit from. We crafted a list of the reviewed sites and why that would help.

Insights gained:

Having multiple links to the same result on one page helps guide the user and creates better accessibility, for example: Global Navigation option, Icon or description feature option, and footer navigation.
Avoiding dropdowns, but if need to have them then don’t make dropdowns the main source of navigation for the site.
Having more than one search field helps and allows the user to get where they want quicker and easier.
Having proper headers, sudheaders, descriptions and call to action buttons in order allows users to fully understand what is offered to them. Using icons or visuals for connected links/paths to navigate the site allows users to not be overwhelmed with information.
A side navigation might be better than multiple dropdowns.
Avoid hovers, they are frustrating.
Creating a button or call to action for the user is easier to understand than a hyperlink. Plus the hyperlink can take up precious real estate on the site with how long it is.
Suggestion tags on the home screen/ landing page might help navigation the user through the site easier.

User Research

Analyzing two groups of users to give them what they want.
‍
Our team created two surveys to send out to users; one directed only at Kiva Centers daily users and the other at users unfamiliar with the organization. This allowed us to separate the types of users who do use the center's resources from those that don’t. Having the two types of user data was helpful when analyzing the current site and assessing its true needs and functions.

From there our team continued to research through interviewing non-Kiva center users to get fresh takes on the functions of the current site and its accessibility levels.

“I don’t see anything about meetups and I struggle to find groups.”

Questions we started to ask ourselves:

How might we make resources more accessible to the user?
How might we help create a better experience when navigating the website?
How might we organize the website to make information searchable for the user?

Persona

Zia, the Hopeful Peer
‍
“I would like to connect with peer support groups, services and trainings in my community.”

About:
Having experience a lot in life, Zia the hopeful Peer, is looking to find community support through peer lead groups. Having a close network is very important to Zia, to help her overcome her struggles in life. Having found a wonderful community to connect with her next steps are to attend meetings and chat with peers so Zia can be her best self.

Outside of her support groups, Zia researches other benefits that could help her in her situation across a website that is overloaded with information and hard to navigate she gets flustered. To burn off that frustration, Zia can be found playing baseball with friends.

Goals & needs:
‍
Support from peers
‍
Online resources

Easy to find information

Frustrations:
‍
Not being able to find peer groups or resources easily

Given too much information

Websites that are hard to navigate when features don’t work right

Personality Behaviors:

Outgoing/ people person

Hard worker

Sensitive

Caring

Tough

Fire-y

User Flows

Current Kiva Centers Resource Site:

As part of the interview process, our team asked users to participate in a usability test of the current site. The task: find the online youth and young adult support group section. Below is a depiction of the user flow and a few pain points users ran across.

Purposed Kiva Centers Resource Site:

The user flows show here make it hard to show one of the biggest issues for users, which is the massive amount of information they have to search through before finding the what they are looking for. This new flow helps cut down the search time and gives users easy to follow site paths.

Sitemap

Laying out the foundations to help users sort through many resources

This first portion of the site map shows how the current site is and how how our new proposed addition could live within the existing site or as a solo site. The client at the time had not made up their mind as to how they wanted this, so we provided an option that worked with either option.

Diving deeper into the local navigation, it can be seen how we architected the offered resources. One thing that needs pointing out, all the items below with a blue outline are resources that the client said needed to be included and easy to find in the new site.

Mood Board

From Kiva's past to present. Groups who bring value to the community surrounding Kiva in Worcester, MA.

Creating a mood board helped our team set the stage for the design process. With photos from the community, Kiva Centers workers, the beautiful street art in Worcester and other inspiring mobile designs our team was ready to tackle prototyping.

Usability Testing

Throughout the design process our team conducted over 9 usability tests. Each time we sat down with someone we gained more and more insights for our design. The below images have notes on the features we improved or considered improving over the testing period.

Low fidelity design testing:

HIGHLIGHTS

“It looks easy to use with one hand and I like that the text size is good and appropriate to read for users.”

“I like that there are many navigation options”

“Love the icons and typeface choice, very modern and clean.”

CHALLENGES

“The back arrow feels off to me, maybe add the word “back” with the arrow”

“Suggests to have a visual or icon next to group names”

“When clicking on the icon Financial Assistance on the home page the icon jumps”

Accessibility

Key points of consideration added to the design: Contrasts, text size and Navigation‍

Benefits page example of contrasting colors and text with responsiveness
Must have a contrast of 4.5 for AA; must have a contrast of 7.1 for AAA

Home page example of text sizing with responsiveness
For best accessibility, text is less than 16 pixels for mobile websites

Prototypes

Mobile
Hi - Fidelity Figma Prototype
Click Here

Desktop
Hi - Fidelity Figma Prototype
Click Here

The Solution
By creating a clean design that allowed for simple search solutions, navigable resources and responsive features for users our client walked away happy. Having focused on the hirechery of search options and the clients request for accessibility for mobile, users are now able to find what they need without wading through massive amounts of information.

Designed for:

Connection with community Better organization Accessibility for users

Next Steps

If time had allowed and our team could keep chipping away at this site, we would have added or continued the following:

Continue making sure the contrast is AA and AAA compliant
Update sitemap to match the clients One Notes file
Create subtext copy for headers and back in descriptions for accessibility purposes
Continue user testing High - Fi with Kiva Centers community
Create a working sort or filter option for site pages
Create a list of searchable keywords to input into a Wordpress search bar plugin

Stage 1 Empathize

Stage 2 Define

Stage 3 Ideate

Stage 4 Design

Thank you for reading through this case study!