-
Notifications
You must be signed in to change notification settings - Fork 0
/
va-os.html
72 lines (55 loc) · 5.02 KB
/
va-os.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Ryan Thurlwell / Projects / Case study: VA Online Scheduling Tool</title>
<meta name="description" content="rtwell.com">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="container">
<a class="back-link" href="index.html"><img src="./images/left-carat.svg">All projects</a>
<h1>Case study: VA Online Scheduling Tool</h1>
<h2>The problem</h2>
<p>VA Online Scheduling Tool (VAOS) is a web utility Veterans use to schedule basic healthcare appointments which lived outside the VA's main website VA.gov. The previous tool didn't use the VA.gov design system, functioned poorly on a mobile phone, required unique login credentials, and most importantly, delivered a broken UX to Veterans. The Digital Modernization strategy issued from VAHQ required that VA online services be on par with their private sector equivalents.
<h2>The solution</h2>
<p>Migrate the legacy tool onto the new VA.gov tech stack, which allowed other VA.gov pages to easily integrate the tool and use the same login credentials as the rest of the site — VA.gov will be the one stop shop for all Veteran needs on the internet, and VAOS needs to be a part of it.
<h2>Design process</h2>
<p>Our business goal was to migrate VAOS from a bespoke website into the parent website VA.gov. First, we formed a product strategy to align VA stakeholders from the different arms of VA, which could boil down to 2 main goals: 1/ VAOS will retain all of its current functionality, but will be migrated feature-by-feature, and 2/ it must live wholistically on VA.gov (i.e. use the VA.gov tech stack, design system, etc). In order to achieve these goals, we broke our approach into phases. Phase 1: change nothing about the UX of VAOS, simply skin it with the design system and get an MVP working on VA.gov. This allowed the engineers to focus on functionality (refactoring microservices, login credentials, etc) instead of reworking the entire tool. Phase 2: Once VAOS is up and running, we can slowly start adding more functionality (e.g. Community Care appointments), and reworking the UX to meet best practices and VA.gov standards. </p>
<p>First, I auditted legacy VAOS user flows, grabbing low hanging fruit UX improvements. Some of these improvements would come simply by applying the design system, but many required a rework of conditional logic. As we made these design decisions, we validated their efficacy via usabilty testing and accessibilty audits, and if successful, implemented them in production. </p>
<h2>My role</h2>
<p>My responsibilities included working with multiple stakeholders to gain alignment on project goals, including getting buy-in from different department heads inside of VA. I worked with contractors and engineers to ensure VAOS would be able to mirror its current functionality, as well as develop a roll out plan for implementation. Additonally, I was responsible for refactoring the legacy tool with the VA.gov design system, which meant crystal clear mockups in Sketch depicting every screen and error state.
<div class="caption">
<h3>Diagraming user flows</h3>
<img src="./images/va-os-userflow-2.png" alt="Diagram of the VAOS userflows">
<h3>Understanding the VAOS backend</h3>
<img src="./images/va-os-backend.png" alt="Diagram of the VAOS backend">
<h3>Prototype of the first phase of migration</h3>
<img src="./images/va-os-phase-1-prototype.png" alt="Prototype of the first phase of migration">
<h3>Final design excerpts for VAOS</h3>
<img src="./images/va-os-app.png" alt="Final design excepts for VAOS">
<h2>Impact</h2>
<p>Upon migrating onto VA.gov, the VAOS tool saw exponential growth.</p>
<h3 class="pt1">A one year snapshot of improvement of VAOS</h3>
<img src="./images/va-os-data.jpg" alt="Powerpoint slide depicting the increase in VAOS usage month over month for one year">
</div>
<div class="row caption">
<div class="column">
<h3>Before</h3>
<p>Users blindly selected a region to receive care.</p>
<img src="./images/va-os-region-before.png" alt="Legacy VAOS tool selection with a list of locations">
</div>
<div class="column">
<h3>After</h3>
<p>Giving users timely, relevant information to help navigate the complicated VA system.</p>
<img src="./images/va-os-region-after.png" alt="A list of regions, including distances from users location">
</div>
</div>
<a class="back-link" href="index.html"><img src="./images/left-carat.svg">All projects</a>
</div>
</div>
</body>
</html>