Natalie Aaronson

Abilis Case Study

Abilis Case Study

Abilis Case Study

Executive Summary

Project Overview:  We set out to modernize and streamline the way users ask for help using the Abilis website.

My Role:
  • User Research
  • Problem & User Definition
  • Prototyping
  • Testing and Ideating

Goal:  By creating a “Get Help Now!” form, we will provide overworked caretakers with the opportunity to explain their situation briefly– and efficiently– so that they can receive the help that they need faster and with minimal energy excursion.

Project Plan:

  • Two weeks of researching and defining
  • One week of prototyping the final UI design

Context

Abilis is a non-profit based in Fairfield County, CT that provides people with developmental disabilities (and their families) with support and advocacy for building able lives and strong communities.

Our goal was to modernize/streamline the UI of the Abilis website & create a “Get Help Now!” form which would allow users to tell Abilis a bit about their situation and provide best contact method/times so that the organization can reach out to them and offer help.

What I Did

User Plan & User Testing: Created an interview introduction, wrote questions that dove into the heart of the issue, and executed this segment’s testing.
User Persona & Empathy Map: Synthesized user research into deliverables created with compassion, understanding, and empathy to help the team visualize the root of the problem.
Style Guide, Low-Fi, High-Fi, and Pixel Perfect Wireframes: Dove into the UI elements of this project by creating a style guide (complete with 26 Figma elements) which was then translated into ideated wireframes.

Research & Define

Research Findings

First, we needed to research in order to Define the Problem. We collected:

17

Survey
Responses

10

User
Interviews

2

Stakeholder
Interview

After compiling our research into an Affinity Diagram:

We found one key emotional takeaway: that caretakers are “extremely drained” -Interviewee 5, [00:04:22]
…As well as one key practical takeaway: that seeking help and “understanding Abilis’ work is difficult” -Interviewee 3, [00:10:06]
These repeated sentiments reminded us to keep in mind that our primary user does not have much emotional energy to dole out in their day-to-day life. This led us to the guiding word of this project: simplicity.
Our redesign needed to be clean, easy to use, and make requesting help as easy as possible.

After compiling our research into an Affinity Diagram:

We found one key emotional takeaway: that caretakers are “extremely drained” -Interviewee 5, [00:04:22]
…As well as one key practical takeaway: that seeking help and “understanding Abilis’ work is difficult” -Interviewee 3, [00:10:06]
These repeated sentiments reminded us to keep in mind that our primary user does not have much emotional energy to dole out in their day-to-day life. This led us to the guiding word of this project: simplicity.
Our redesign needed to be clean, easy to use, and make requesting help as easy as possible.
Defining the User & the Problem
For our User Persona, we went with a mother named Karla. She represents the overworked and overwhelmed caretaker that Abilis seeks to help. At this point we also created an Empathy Map, Storyboard, and User Journey (not pictured).

Problem Statement

We observed that visitors to Abilis’ website are unable to find important information or understand the nonprofit’s mission due to the large amount of text and poorly organized information currently present on the site. How might we simplify the current web design so that users can easily access key information, develop a strong understanding of Abilis’ mission, and ask for help with minimal effort? How can we help Karla?

Our Hypothesized Solutions

Our Hypothesized 
Solutions

We intend to modernize and streamline the UI of the Abilis website. Moreover, we will create a “Get Help Now!” form which allows users to tell Abilis a bit about their situation and provide best contact method/times so that the organization can reach out to them and offer help. We hypothesize that this will take the onus off of overworked caretakers to reach out and contact the nonprofit. We predict that our changes will increase the number of possible beneficiaries and allow Abilis to service more people and do more good. So we can get Karka the help she needs.

Ideate. Prototype & Test

Low-Fidelity Wireframes

First, consider the existing Abilis Website pictured to the left. With this content in mind, we created Low-Fidelity Wireframes that we could later add our UI elements into. Intentionally simplistic, we built the home page layout and form skeleton pictured on the right.

Heuristic Evaluation, Redlining & Style Guide Creation

A few possible areas of concern came to light during our Heuristic Evaluation and Research:

  • The current site doesn’t list their “Values” until the bottom of their homescreen, making understanding their mission difficult
  • Users are unsure of what elements are buttons because of arrow misplacement, making users unsure of where to click to seek help
  • While users enjoyed the bright colors, infantilization in the disability/illness community is a big issue. Users wanted a design that kept the same hopeful energy without crossing the line. We decided to look for a color pallet that was encouraging without being infantilizing. We decided on the following Style Guide:
Final Prototype

This led us to our final, High-Fidelity Wireframes (more shown in complete case study):

Conclusion & Future Opportunities

Conclusion

So, what did we learn here? We researched to find out what caretakers actually needed from the site. We identified the problem. We came up with an artful solution.

Where do we go from here?

Where do we
go from here?

Future steps would be to expand the scope of this project and apply our style guide to the remaining screens of the existing website. We would want to collect data on the number of potential users who seek help using the form, and eventually interview them about their experience. From there, we would speak with the social media and marketing teams to implement consistent design and branding strategies across platforms that create a cohesive user experience.

Thank you for reading!

Want to see how this study presents?

Want to see how
this study presents?
Download Slide Deck

Let’s get to know each other!  Read more About Me.

Behance Instagram