-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscope-diagnosis-redesign.html
108 lines (108 loc) · 9.3 KB
/
scope-diagnosis-redesign.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
<!DOCTYPE html>
<html data-current="home" lang="en">
<head>
<title>RWK IxD</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- <link rel="stylesheet" href="assets/css/main.css" /> -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<div class="wrapper">
<header id="header">
<span><a class="home-link" href="https://rwk-moj.github.io/rwk-ux/" title="Back to homepage">RWK-UX</a></span>
<div class="face-container"><img class="ma-face" src="images/MyFace.png" alt="Picture of ma face" /></div>
</header>
<main>
<h1 class="project-title">Redesigning the self triage process in Check Legal Aid</h1>
<h2>The project</h2>
<summary><p>TThe CLA team have been working on the scope diagnosis or self triage part of the Check Legal Aid journey.</p>
<p>It is a complex state of user journeys that combine emotional user states and legal / policy driven terminology.</p>
<p>This project is still ongoing but has been created to improve the experience for users when checking if they are eligible for legal aid and attempting to match their situation to the categories of law.</p>
<p>This project is broken down into two parts:</p>
<ol>
<li>Component design challenge</li>
<li>User journey challenge</li>
</ol>
</summary>
<h2>My Role</h2>
<p>My role in this project has been interchangeable since I joined the MoJ. I initially started the project looking at interactions at a compoment design level where I was tasked with improving the accessibility of the scope option component.</p>
<p>I also supported our user researcher in several research sessions when the project began to look at understanding how users navigate and interpret the information they see. In any true discover, the role of the designer is to observe and support and this is what I did.</p>
<p>I also managed a cabinet office fast streamer who I supported, working on a spike of the diagnosis journey based on the initial round of user testing.</p>
<p>We are about to (as of Nov 2020) begin to look at design ideation based on a large amount of research work.</p>
<h2>The Team</h2>
<p>There are so many facets to this piece of work and it truly requires a great amount of effort from the delivery team. I am currently working on this project with a:</p>
<ul>
<li>User researcher (only available on the scope part of the work)</li>
<li>Business analyst</li>
<li>Content designer</li>
<li>Front end developer</li>
<li>Previously Cabinet Office fast streamer</li>
</ul>
<h2>The problem</h2>
<p>Although the satisfaction rate of our service is in the mid 70 percentile, users have reported that self diagnosing their issue is difficult and complex.</p>
<p>For the LAA to be able to provide a quality of service to our users, and a majority of the time in vulnerable states of wellbeing, it is critical for us to continue to improve the standard of our service.</p>
<p>This is even more important because it is generally the first part of the process that a user will see on their journey to get legal aid and is paired directly back to our product road map.</p>
<p>In addition to this, the existing components used on the CLA journey were outdated and failed to comply with accessibility requirements. With the new accessibility legislation coming into effect on 23rd September 2020, this needed to be addressed quickly.</p>
<h2>1. Scope Diagnosis Component</h2>
<h3>My Approach</h3>
<blockquote><span>Problem statement</span>The grey boxes where users select scope are no longer used across government. They also fail accessibility standards. We need to bring them to GOV.UK standards.</blockquote>
<p>Working on the scope diagnosis compoment, I needed to understand if their was a component across gov that could be utlitised to quickly improve the design and accessibility of our existing component.</p>
<p>I reached out on the cross government slack to gather information from the design community and discovered that our service was using an old gov elements design that had never made it into the design system.</p>
<p>I also received some insightful feedback about using alternative components such as radio buttons or navigation links.</p>
<figure class="compare">
<img src="images/scope_sketch_1.jpg" class="example" alt="Sketches of flows and component">
<figcaption>All 3 component solutions with notes</figcaption>
</figure>
<figure class="compare">
<img src="images/scope_sketch_2.jpg" class="example" alt="Sketches of flows and component">
<figcaption>Zoomed in design of the component options</figcaption>
</figure>
<p>I then took these sketches and moved directly to the prototype kit as the suggestions from across Gov already existed in the design system. I also created an updated design iteration of the existing scope diagnosis interaction.</p>
<figure>
<img src="images/scope_designs.jpg" class="example" alt="Sketches of flows and component">
<figcaption>Mocked up designs using the prototype kit</figcaption>
</figure>
<p>I utilised the MoJ design community and delivery team to get feedback on the design concepts and also carried out some responsive testing myself.</p>
<p>This informed the decision making process and allowed the team to quickly move the selected design option of the existing button as it added more immediate value for less effort into staging.</p>
<p>I also presented our design solution to the Design System meeting which gained positive feedback from the Product Manager and Head of Interaction Design at GDS.</p>
<h3>Outcomes</h3>
<h4>For the business</h4>
<p>The outcomes for the business of this component work were quite simple. I created an improved iteration of the design that tested well with accessibility tools such as screen readers. It also performed well during a DAC audit of our service.</p>
<p>This meant that their were no issues for the business around accessibility.</p>
<h4>For the user</h4>
<p>The main benefit for our users was that we have created an improved accessible design that is:</p>
<ul>
<li>Clearer in presentation</li>
<li>Has improved colour contrast</li>
</ul>
<h2>2. Improving the user journey through self diagnosis</h2>
<h3>My Approach</h3>
<blockquote><span>User story</span>As a user of the service, I need to be able to easily navigate the scope options so that I can check if I can get Legal Aid.</blockquote>
<p>This part of the project required a more active listening approach than conceptualising a design, but led to two outputs that would help continue to drive the project forward. These were:</p>
<ol>
<li>I supported our user researcher with several workshops with the team to understand the research findings and how they would be applied to the existing service.</li>
<li>I mapped out all of the existing user journeys for each category of law and facilitated a workshop with the team to gather all of our understanding and issues with the flows and content.</li>
</ol>
<p>These workshops were run in both a physical but also remote setting utilising post it's and Miro boards.</p>
<p>I documented the workshop notes for the team. From these sessions we had a better understanding of the challenges that our users faced but it led to us asking more questions about our service and how we could improve it for the users.</p>
<figure>
<img src="images/merit_flow.png" class="example" alt="Sketches of flows and component">
<figcaption>All the scope option flows in CLA</figcaption>
</figure>
<figure>
<img src="images/workshop.jpg" class="example" alt="Sketches of flows and component">
<figcaption>Workshop session with the team to understand scope option issues</figcaption>
</figure>
<h3>Outcome (as it stands)</h3>
<p>The outcomes of this part of the project led to our user reeaearcher having a better idea of how we could delve deeper into the problem. This resulted in them carrying out some incredibly complicated card sorting exercises and creating a map of how users interpret and link content to categories of law.</p>
<p>As mentioned at the start, we are about to move into a design sprint and potential swarm session to solve this challenge for users.</p>
</main>
</div>
<footer><div class="copyright"><small>© RWK-UX</small></div></footer>
<!-- <script src="assets/js/jquery.min.js"></script>
<script src="assets/js/main.js"></script> -->
</body>
</html>