-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathva-rs.html
65 lines (48 loc) · 4.49 KB
/
va-rs.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
<!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 Resources and Support</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 Resources and Support</h1>
<h2>The problem</h2>
<p>Relevant, Veteran-focused information that supports VA benefits for all Veterans was outdated, incorrect, and duplicative which made it near impossible for users to navigate the complex VA landscape.
How do we ensure that helpful, relevant tier 2 information that supports tier 1 benefit content is accessible and findable in the new VA.gov site experience, AND does not dilute, distract, and clutter Veterans' benefit product UX?
<h2>The solution</h2>
<p>Develop a Drupal-based content management system called Resources and Support that enables VA to easily migrate or rewrite content but also serve as a knowledge base for Veterans and others to access relevant content and connect them to appropriate benefit services and tools.
<h2>Design process</h2>
<p>In order to migrate <strong>over 650,000 pages of legacy content</strong> into the newly modernized VA.gov website, we triaged the content into tiers, prioritizing Veteran-facing content first. Tier 1 content is benefit content and tools (applying for benefits, accessing benefit tools to manage your existing benefits) for beneficiaries (Veterans, family members, service members). Tier 2 content is benefit-adjacent content (for beneficiaries, and people who work with beneficiaries). Tier 3 content is organizational/administrative/office content. Once we determined which content needed to be migrated, we gathered around a white board and spent many hours developing user and business goals, establishing who our users are, and developed research plans to validate our assumptions. We then developed the information architecture, wireframes and design comps for Resources and Support and put them in front of Veterans and VA staff to validate our hypotheses and goals. As we collected feedback, we iterated and refined our design decisions to account for accessibilty and industry best practices. </p>
<h2>My role</h2>
<p>Working with expert content strategists, engineers, and product owners, I designed page templates (e.g. a FAQ page, a Questions and Answers page, etc) that leveraged the VA design system and easily integrated with Drupal. These templates were designed from scratch, using previous VA web pages and content as samples. We worked together to provide documentation on how they are built, how they should be used (including guidance in the Drupal authoring experience), and how they will improve usability.</p>
<p>View a <a href="https://app.mural.co/t/departmentofveteransaffairs9999/m/departmentofveteransaffairs9999/1588167553516/2773c854e8ff3a725a5e3ee03272b78e8519f78b?sender=419a133c-cf61-4698-91a9-a8aa5a2966b2" target="_blank"> mural board</a> of all of the templates.
<div class="row caption">
<div class="column">
<h3>Before</h3>
<p>Complicated UX made it hard to find clear answers to questions.</p>
<img src="./images/va-rs-qa-before.jpg" alt="Legacy VA web page with too much content">
</div>
<div class="column">
<h3>After</h3>
<p>Question and answer template enables authors to provide simple, understandable information.</p>
<img src="./images/va-rs-qa-after.jpg" alt="New question and answer template">
</div>
</div>
<div class="caption">
<p>Mobile and desktop design for the landing page</p>
<img src="./images/va-rs-home-1.png" alt="Mobile and desktop design for the landing page">
<p>Mobile and desktop design for the step-by-step template</p>
<img src="./images/va-rs-steps-1.png" alt="Mobile and desktop design for the landing page">
</div>
<a class="back-link" href="index.html"><img src="./images/left-carat.svg">All projects</a>
</div>
</div>
</body>
</html>