-
Notifications
You must be signed in to change notification settings - Fork 0
/
va-design-system.html
42 lines (32 loc) · 2.65 KB
/
va-design-system.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
<!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 / VA Design System</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>VA Design System</h1>
<h2>The problem</h2>
<p>When I detailed to VA via USDS in early 2018, the <a href="https://design.va.gov/" target="_blank">VA design system</a> was in its nacent stages. While it borrowed its styles and framework from an older version of the USWDS <a href="https://designsystem.digital.gov/" target="_blank">U.S. Web Design System</a>, it had limited components and was not widely adopted by the VA as an organization. It also lacked comprehensive documentation and was difficult for users (typically government contractors) to contribute to the design system.
<h2>The solution</h2>
<p>Our mission was to expand the VA.gov design system so that users could easily and quickly deliver digital services to Veterans. We accomplished this by adding new components as needed, vetting them by the design system team for proper accessibilty. We made it easier for teams to work with and contribute to the design system by implemention language-agnostic web components and creating a contribution process (which has evolved into the <a href="https://design.va.gov/about/maturity-scale" target="_blank">maturity scale</a>).
<h2>My role</h2>
<p>As design lead of VA.gov as a platform, my role on the design system team was to review proposals of new components, which includes documentation on how they are used, what data do we have that justifies a new component or pattern, etc, design new components and patterns from scratch to expand the system.</p>
<div class="caption">
<p>Example: proposed component and guidance for downtime maintenance alerts</p>
<img src="./images/va-ds-alert-1.jpg" alt="proposed component and guidance for downtime maintenance alerts">
<p>Example: proposed component and guidance for anchor links</p>
<img src="./images/va-ds-anchor-1.jpg" alt="proposed component and guidance for anchor links">
</div>
<a class="back-link" href="index.html"><img src="./images/left-carat.svg">All projects</a>
</div>
</div>
</body>
</html>