-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnursing-homes.html
212 lines (175 loc) · 15.5 KB
/
nursing-homes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE html>
<html>
<head>
<!-- Made with <3 by a nerd who loves data! Feel free to fork this repo or, if you have any questions about how something on here works, reach out to me! -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Local CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Favicon -->
<link rel="icon" href="img/male-technologist.png" type="image/gif" sizes="16x16">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=PT+Serif:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet">
<!-- Font Awesome, for the icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Something to do with responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Supporting a health agency monitor nursing facilities through data viz</title>
<!-- Meta tags for social -->
<meta property="og:url" content="https://vivrao9.github.io/nursing-homes"/>
<meta property="og:type" content="website" />
<meta property="og:title" content="Supporting a health agency monitor nursing facilities through data viz"/>
<meta property="og:description" content="Learn more about how I designed dashboards, built an ETL pipeline, and learned the basics of UX design for a health agency."/>
<meta property="og:site_name" content="Vivek Rao's portfolio">
<meta property="og:image" content="https://vivrao9.github.io/img/Social preview.png"/>
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@v1vra0">
<meta name="twitter:creator" content="@v1vra0">
<meta name="twitter:title" content="Supporting a health agency monitor nursing facilities through data viz">
<meta name="twitter:description" content="Learn more about how I designed dashboards, built an ETL pipeline, and learned the basics of UX design for a health agency."/>
<meta name="twitter:image" content="https://vivrao9.github.io/img/Social preview.png" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand navbar-hed" href="index.html">Vivek Rao</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link navbar-text" href="index.html#portfolio" style="margin-left:70vw;">Work</a>
<a class="nav-item nav-link navbar-text" href="resume.html">Resume</a>
</div>
</div>
</nav>
<div class="container-fluid">
<img src='img/Nursing Homes Cover.png' alt='A banner image containing design elements from the project.' width="100%" style="margin-bottom: 1.5rem;" class="desktopImg">
<img src='img/Nursing Homes Cover__Mobile.png' alt='A banner image containing design elements from the project.' width="100%" style="margin-bottom: 1.5rem;" class="mobileImg">
</div>
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-md-6 justify-content-center">
<h1 class="storyHeadline">Supporting a health agency monitor 300+ nursing facilities through data viz</h1>
<hr style="color: #dedede;">
<p class="copy">Our client was a state health agency that had recently been mandated to improve nursing home transparency. The agency was required to create a platform for residents to search, compare, and evaluate nursing homes. The agency also decided to use this opportunity to create an internal tool to monitor underperforming nursing homes.</p>
<p class="copy">This project was interesting because I was a <b>UX designer, data analyst, and data engineer</b>. The tools we built would later be used by 5,000+ people. I learned how to user test, rapidly iterate, and design with empathy for users.</p>
<p class="copy">I worked on a team with one other designer and one Tableau developer. The Tableau developer and I worked on the internal tool, while the other designer worked on the public dashboard. I owned designs and conducted testing and research.</p>
</div>
</div>
</div>
<div class="container-fluid caseStudySummary">
<div class="row d-flex justify-content-center">
<div class="col-md-1"></div>
<div class="col-md-8 intro__side_panel">
<div>
<p class="intro__title">Challenge</p>
<ol>
<li>Create a public-facing tool so residents could easily search and compare nursing homes</li>
<li>Create an internal tool that a team would use to regularly monitor nursing homes for quality and make interventions, if needed</li>
</ol>
</div>
<div>
<p class="intro__title">Constraints</p>
<p class="copy">The tool had to be developed using Tableau. Also, different user personas had different levels of familiarity with the technical terms in the data.</p>
</div>
<div>
<p class="intro__title">Outcome</p>
<p class="copy">The internal dashboard has been used to improve safety standards at 15+ problematic nursing homes. The public dashboard has been used by 5,000+ people since inception.</p>
</div>
</div>
<div class="col-md-3 intro__side_panel">
<div>
<p class="intro__title">Time</p>
<p class="copy">Six months</p>
</div>
<div>
<p class="intro__title">Team</p>
<p class="copy">2 designers<br>1 Tableau developer</p>
</div>
<div>
<p class="intro__title">My role</p>
<p class="copy">UX design<br>data engineering<br>product design</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-md-6 justify-content-center">
<h2>Conducting user research</h2>
<p class="copy">To begin, we scanned through the state legislature to scope out the project. A bill that had been passed outlined requirements of the external dashboard.</p>
<p class="copy">Early on, we stressed the importance of speaking with the users to identify their pain points. We expanded our interview group to include personas we hadn’t initially considered, such as advocates and public health officials.</p>
<p class="pullQuote">“What is something you want to do in one year that we can help you do today?”</p>
<p class="copy">We documented all our interviews and consolidated them in a Miro board. Based on our feedback, I interpreted the problem statement as <b><i>"We want a way to see how nursing homes across the state are trending, identify outliers, and drill down into underperforming nursing homes."</i></b></p>
<p class="copy">I roughed out the average user journey through the tool. To simplify it to the layperson, the idea had to fit on the back of a napkin.</p>
<img src="img/napkin.jpeg" alt="A picture of the back of a napkin showing the user flow diagram starting at the state-wide overview page navigating all the way to facility intervention." class="storyImg">
<h2>Identify information architecture</h2>
<p class="copy">Was the internal tool going to be structured like DoorDash? Or like a news website? To identify the information architecture, I drew out the average user journey and indexed on the call-to-action or the <i>So what?</i> on every page.</p>
<p class="copy">Once I drew out the user journey, I realized that it was important for the client to get a summary of how the state was doing (Overview). Then they wanted a way to compare different facilities against each other (LTC scorecard). And lastly, they wanted to drill into a particular facility if they wanted to get more information.</p>
<p class="copy">Through this exercise, we realized there were two levels of data granularity — one at the state-level and at the facility-level.</p>
<p class="copy">From here, I created wireframes and tested the navigation structure with our clients.</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-12">
<img src='img/Wireframes.png' alt="A diagram of wireframes for the internal tool." class="desktopImg">
<img src='img/Wireframes__Mobile.png' alt="A diagram of wireframes for the internal tool." class="mobileImg">
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<h2>Rapid iteration</h2>
<p class="copy">Next, we turned to Figma to create rapid mockups based on our information architecture. The visual design of the tool changed drastically between design critiques and testing sessions.</p>
<p class="copy">Since this was one of my earlier projects, I learned the importance of font hierarchy and using color sparingly. At one point, I turned to mocking designs in black-and-white to focus on the message, not the UI.</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-12">
<img src='img/Prototypes.png' alt="A diagram of wireframes for the internal tool." class="desktopImg">
<img src='img/Prototypes__Mobile.png' alt="A diagram of wireframes for the internal tool." class="mobileImg">
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<p class="copy">Throughout this project, we stressed on <b>prioritizing what metrics to show before we prioritized <i>how</i> to show them</b>. I learned that users are less excited about what chart type you use and typically more interested in what metric you highlight, what tab it's under, and whether it's been labeled correctly.</p>
<p>For example, in our early wireframes, we didn't include a map of the state on the Overview page. But during the user research phase, we heard many people stress the importance of finding "clusters" of poor performance, or COVID-19 "outbreak areas." When we mocked up a map, our users were mildly interested but didn't see the value just yet. After some iterating and tweaking, we prototyped a map with the ability to toggle between counties and facilities. This excited our users and they said it would open perspectives they'd never had before.</p>
<h2>User testing</h2>
<p class="copy">Throughout the above processes, we conducted several rounds of user testing. There were two takeaways that I now apply to all projects.</p>
<p class="copy">First, there is one group of stakeholders that is typically overlooked in product design:</p>
<div class="tenor-gif-embed storyImg" data-postid="4458491" data-share-method="host" data-aspect-ratio="1.335"><a href="https://tenor.com/view/developers-gif-4458491">Developers GIF</a>from <a href="https://tenor.com/search/developers-gifs">Developers GIFs</a></div> <script type="text/javascript" async src="https://tenor.com/embed.js"></script>
<p class="copy"><b>Developers are also stakeholders</b>. When user testing, I would share designs with developers to get their feedback on what was feasible and if the data could support our designs. This meant that we would catch issues early on and we wouldn't have to redo our prototypes.</p>
<p class="copy"><b>Prototype with real data</b>. Despite starting testing sessions with “this is all fake data,” our client would try to find insights from lorem ipsum, or question how there were suddenly 123,456 facilities in the state. Instead, when we prototyped with real data, the users were able to better put themselves in the driver's seat and testing became more fruitful.</p>
<h2>Creating a robust data pipeline</h2>
<p class="copy">State legislature required that the public tool had to be updated at least quarterly. After combing through the data, we learned that nursing homes frequently change their names. This meant the tool had to be updated more frequently. We settled for monthly updates, given the frequency of some data points.</p>
<p class="copy">I worked with the Tableau developer and the client’s IT team to develop a data pipeline to extract, transform, and load (ETL) data to Amazon S3. I wrote scripts to consolidate files into three tables, ready for ingestion into Athena and Tableau.</p>
<img src='img/Data pipeline.png' alt="A diagram of 14 data files moving through five Python scripts to become three consolidated tables stored on AWS Athena, before being read into Tableau." class="storyImg">
<p class="copy">Outputs from some Python files were used in others and files were updated at different frequencies.</p>
<h2>Effective hand-off</h2>
<p class="copy">Once development was close to the finish line, we set up biweekly calls with the clients to walk them through how to update the dashboards.</p>
<p class="copy">Just after our team wrapped up development, we asked the client to take the lead on updating the dashboards. We said we’d be there in the background if they needed support, but they were on their own. This made them self-reliant and — when the pipeline initially broke — the clients were better equipped to deal with it themselves.</p>
<p class="copy">The developer and I also left about 18 pages of extensive documentation with an FAQs section.</p>
<h2>Conclusion</h2>
<p class="copy">On a closing note, this was one of my most fulfilling projects. I contributed to a tool that 5,000+ people used to search for a nursing home for their loved ones or for themselves. I learned how to user test, rapidly iterate, and design with empathy for the user.</p>
<p class="copy">Here are some screenshots of the internal tool that I worked on. All data is fake.</p>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-12">
<img src='img/Final_Product.png' alt="A collage of screenshots of the internal tool." class="desktopImg">
<img src='img/Final_Product.png' alt="A collage of screenshots of the internal tool." class="mobileImg">
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<hr style="width: 100%">
<p class="copy external-link">If you liked this article, please reach out! I’m a data visualization designer with experience in UX design, data engineering, and analytics. Shoot me <a href="mailto:[email protected]?subject=Wanted to chat about your nursing homes project" style="border-bottom: 2px black solid;">an email</a>!</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>