thumbnail image of website kaitlyn nguyen
Display of an essential needs website prototype on a laptop screen

Trauma-Informed Design for Essential Needs

MSU Hub for Innovation in Learning and Technology

Role

Duration

Tools

UX Design Researcher

February 2020 - Current

Adobe XD, WordPress, Google Drive, Zoom

Overview

The Challenge

Creating an essential needs portal for the community, designed for users that have a past that informs the way they think and act. How do we undo an institution of exclusion to make users feel included by defining our own trauma-informed heuristics?

The Solution

A trauma-informed, user-facing directory offering resources on essential needs. At the moment, this is a prototype that has been presented to stakeholders at the higher University level. Our team is working to move forward with user testing and research involving faculty members, graduate students, and undergraduates.


Scroll down to navigate an interactive prototype or click here.



Process

Here is the user-informed process I took with this project. I delve into details of each step below!

A graph showing four steps of a design process: discovery, user research, design, and test

Discovery

Define, Understand

Starting this project, our team had to ask why we were building an essential needs portal. A major reason was to undo the sense of exclusion universities tend to have with resources. More often than not, students do not know where to reach out to get the proper resources.

Creating an essential needs portal/directory designed for users with a past that informs the way they think and act is a step in the right direction.

Key Takeaways

  • Students do not know where to reach out for resources
  • Users will be influenced by their experiences when reaching out

User Research

Competitive Analysis, Trauma-informed Heuristics, Personas

Our team began researching other university portals and synthesizing how trauma-informed design will translate to our work. Using resources that researched trauma-informed design, such as Melissa Eggleston’s work, our team started a research sprint that would help develop our design heuristics.

Trauma-informed Heuristics

Using the heuristics from our compiled resources, we analyzed best practices and inefficient practices from other portals. The heuristics we evaluated was safety, trustworthiness, choice, collaboration, and empowerment—pulled from the University of Buffalo School of Social Work’s Trauma-Informed Organizational Change Manual, shown below.

Venn diagram with five values: safety, trustworthiness, choice, collaboration, and empowerment

After this research, we created working heuristics—still open to change—using the manual. Additionally, we added a heuristic: historical, and gender/sexuality issues.

Personas

With our working heuristics, our team analyzed a multitude of essential needs portals from other universities through the lenses of user personas we created for our project. Our personas included faculty members looking for resources to provide a student they’ve noted is struggling with needs to students seeking out resources for themselves.

An image showing information of a persona named Jarret
An image showing information of a persona named Michelle

Design

University Branding, Wireframes, Prototype

From this, my fellow Design Researcher and I started three design sprints, each consisting of two weeks. Between each sprint we gathered feedback from our team to continue improving each rough design.

Wireframes

Below is the progression of wireframes to high fidelity mock-ups in Adobe XD!

The first wireframe of website A high fidelity mock-up of a website
A low fidelity mock-up of a website An updated high fidelity mock-up of a website

Prototype

View the Prototype

Transitioning to being the solo Design Researcher, my team had to reevaluate our time to create a fully working, interactive prototype for presentation. In the span of three to four weeks, I worked to complete a prototype for stakeholders in Adobe XD.

Updated home page for the essential needs portal Updated pop-up for a user to pick what resource they are looking for on the essential needs portal
Updated student testomonies page on the essential needs portal Updated application form webpage for users to input information on the essential needs portal

Test

Focus Groups, Iteration

Our team held focus groups with staff and faculty of Michigan State University affiliated with the essential needs portal. These sessions gave insight on the strengths and weaknesses of our designs and heuristics.

Focus Groups

An important piece of feedback our team received was the use of language to invite a user to connect with our portal. Members of our focus groups noted some interactions had language that seemed passive. Language cross-cuts each category of our heuristics, making this feedback exponentially useful for our future iterations of the design.

Iteration

With the feedback our team gathered from focus groups, we created our first interactive prototype to present to university stakeholders.

Key Takeaways

  • How do we use language to invite interaction?
  • Attention needs to be given to language and how it can influence a user

Moving Forward

After presenting the prototype to university stakeholders, our project is transitioning to the next phase: more research. As of now, our team is working to start user testing with more faculty members, graduate students, and undergraduates. Within these focus groups, I will facilitate sessions with undergraduate students and assist in observing other sessions.

Lessons Learned

  • Working on a project that focuses on trauma can cause strain in any team member. Creating an atmosphere where it is okay to communicate discomfort or the need for a break is important when creating empathetic, meaningful services.
  • Our project can not be 100% trauma-informed, but our team is trying to ensure our portal is responsive to input to create an atmosphere where users can openly speak about their concerns.