UX Research, UX Design, Usability Testing

Health + Social

Upwards of 80% to 90% of what makes you healthy or sick are social factors, such as where and how you live, grow, learn, and age. Meaning, as little as 10% to 20% of a person's health is determined by genetics or biology. This concept is known as Social Determinants of Health.

The Challenge

Despite its impact, nobody knows what to do with the concept. Nobody knows how to run a hospital, train practitioners, or build a healthcare system based on a patient's social and environmental factors. In 2016, Andrew Benedict-Nelson published a document containing insights from leading thinkers in health care who worry about social determinants. I was on a team tasked with designing a digital information architecture to help further share and foster discussion about Andrew's Health + Social concept and Social Determinants of Health (SDOH).

My Role

This project took place between January 2017 and March 2017 as a part of DePaul University's User Experience Design Practicum. As a team of seven, all of us participated throughout the entire design process. While I participated in all phases of the design, I was primarily responsible for user research and information architecture. I conducted user interviews and performed usability tests on our wireframes and prototypes. I was also responsible for structuring the publication into an information architecture suitable for the web.

Planning & Discovery

The team had ten weeks to deliver a solution to our client, Andrew. Nobody on the team had ever heard of Social Determinants of Health. We were not entirely sure what the expected outcome of the end deliverable was supposed to be either. With these constraints in mind, our team decided that it was crucial to the success of this project to have a strict project timeline, a better understanding of what we were designing, and what our client's expectations were.

Project Timeline

At the beginning of the project, time and the final deadline were our only constant. We immediately got to work on coming up with a schedule. Our design process would occur over the course of ten weeks in three overlapping phases: research, design, and develop. Our plan was to have a linear approach at the beginning of the project that gradually became more agile and iterative towards the end.

Project Kickoff

Our team severely lacked context around the problem that we were trying to solve. How can we design for a problem we do not understand? Before having an initial conversation with the client, we wanted to educate ourselves on the topic. The team found resources from the Centers for Disease Control and Prevention and the World Health Organization informative but not all that insightful.

In addition to the general information the team gathered, we decided to find stories and articles that, from our perspectives, related to the concept of SDOH and resonated with us. I found an article about a start-up that is trying to improve the interaction between caregivers and patients who have Alzheimer's or dementia. The startup uses a form of personas to inform caregivers about the lives and histories of their individual patients so that they can provide more personalized care for each patient.

Project Brief

The team began the design process by initiating a conversation with our client to understand his goals, expectations, and intentions for the site that we were creating. From our conversation, we learned that the publication is a part of an effort to shape University of Southern California's new graduate nursing program - the first program of its kind to be housed in a school of social work.

We live in a different world now from when the document was written.

- Andrew Benedict-Nelson

The journal initially targeted social workers and health policymakers. However, with recent changes in the political climate and health policy, this audience was no longer feasible. In addition to breaking down the publication into a format that was easily consumable online, we needed to redesign the content to be informative, engaging, and actionable for a different set of target users.


Who are the users?

After the kickoff conversations, the team determined that medical practitioners, educators, and students would be most likely to take action on Social Determinants of Health. After visiting the site, users should be able to understand Health + Social at a high level but be able to dig deeper into related topics that interest them.

Understanding the Users

To effectively design the site, the team needed to know the kind of information that people in medical and healthcare spaces look for and share online. We were curious about the level of awareness on Social Determinants of Health with the people we were interviewing as well as their opinion and response to the concept.

The team interviewed eight participants that fit into at least one of our three target groups. Some members of the team conducted interviews over the phone while others recruited medical practitioners on a whim in hospital cafeterias around Chicago. After transcribing and coding our interviews, we shared our participants' stories and responses with one another. Using an affinity diagram, we analyzed the data points and clustered together with the many insights we gathered.

Notes about Social Determinants of Health Affinity diagram of quotes and data points from interviewees Team members brainstorming key insights

Defining the Target Users

Based on results of our user interviews, we arrived at fourteen key points supported by quotes from our participants.

We then used the insights, quotes, and stories from our interviewees to develop personas for each of our user groups. The team had initially assumed medical students to be our primary persona because of their openness to the concept and willingness to partake in social causes. However, further talks with the client revealed that we should primarily target educators, as they would be the ones most likely to seek out the kind of information gleaned from the Health + Social document. Instructors could then potentially incorporate the concept into their classrooms and reach a larger group of medical students than the website alone would.

Primary Persona: Medical Educators

Educator persona

Secondary Persona: Healthcare Practitioners

Practitioner persona

Tertiary Persona: Medical Students

Student persona

Design & Iteration

Design Considerations

Based on insights gained from the interviewees, we determined that their feedback impacted our design in the following ways:

Communicate Relevance - How can we illustrate the impact of social factors on health in a manner that resonates with people’s situations? We should give examples and tell stories about the potential uses of Social Determinants of Health. How can one apply Social Determinants to healthcare roles? How can the general public apply Social Determinants to their lives? How can people use Social Determinants for conditions and diseases?

Education - Most of our interviewees were not intimate with the concept of Social Determinants of Health. Before exposing visitors to information within Health + Social, which is an advocate of Social Determinants, we should provide some general education. Can we offer other sources information related to Social Determinants and associate ourselves with them?

Convey Credibility - Practitioners all had specific sites they visit for healthcare information; sites they trust for this kind of information.

Designing for the Busy Practitioner - Our team will need to consider how to structure the content of the SDOH publication so that it is easily digestible for professionals.

Designing for Both Desktop and Mobile - Healthcare professionals expressed that they used both mobile and desktop to search information. It is important to provide them with both options since some healthcare professionals heavily relied on mobile devices to access information.

Information Architecture

Our first approach to constructing the sitemap was to break down the publication into logical groups and themes within the document. When trying to translate this structure over to the form of a website, the team noticed that the content was not necessarily a strict hierarchy. Many of the concepts and components we were trying to communicate are deeply interconnected.

Planning the sitemap Sitemap drawn on a whiteboard Detailed sitemap sketched and expanded

By maintaining interconnectedness throughout the site, users can explore themes or topics that interest them most. The site can then direct the user to relevant insights, interviews, and stories. We also wanted to provide users with the ability to search the site in a traditional method. To accomplish that, we made the decision to segment the material from the document by its content type on the site: convergence points (insights), interviews, and stories.

Sitemap of Health + Social


Each team member created a paper prototype for the homepage of the site. We then transferred our drawings to a whiteboard and compared them as a team. Do we want to have the landing page focus on the contents of the Health + Social document, or do we want to introduce users to the Social Determinants and then discuss the glossy journal? We circled back with our client and determined that the best route would be to have the homepage focus on the document content instead of immediately introducing users to supplemental stories and concepts. These decisions also reinforced our intent to educate and communicate relevance throughout the design.

Casey's homepage sketch Discussing the team's sketches The team's individual site sketches

Our team created five wireframes based on the concept of having the homepage reflect the Health + Social content up front. Based on critique and review of which layouts best fit our design considerations, we narrowed our decision down to the three examples below for our client to choose. He selected the wireframe (middle) that lists out all five main themes for users to select and expand to learn more. The selected wireframe became the foundation for our mid-fidelity interactive prototype.

Pearl Hair Salon