-
Notifications
You must be signed in to change notification settings - Fork 0
/
jobs-for-hope-case-study.html
241 lines (209 loc) · 10.9 KB
/
jobs-for-hope-case-study.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
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Nicole Doan - Portfolio</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/animations.css">
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.html" class="brand-logo">Nicole Doan</a>
<ul class="right hide-on-med-and-down">
<li><a href="about.html">About Me</a></li>
<!--<li><a href="mailto:me@nicolendoan.com" target="_blank"><i class="fa fa-envelope"></i></a></li>-->
<li><a href="mailto:me@nicolendoan.com">E-Mail</a></li>
</ul>
<ul id="nav-mobile" class="sidenav">ql
<li><a href="about.html">About Me</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</nav>
<div id="index-banner" class="parallax-container">
<div class="section no-pad-top no-pad-bot"></div>
<div class="parallax"><img src="/images/jobsforhope/development.jpg" alt="jobs for hope by hack for la"></div>
</div>
<!-- Overview -->
<div class="container">
<h2 class="col s12">JOBS FOR HOPE</h2><br>
<div class="row">
<div class="col s12 m6 l6">
<b>Challenge</b>
<p>The 'Jobs' section of the Los Angeles County Homeless Initiative’s website is difficult to navigate and provides inconsistent job listings between organizations. Job seekers are thus deterred from applying and providing their skills in high-need jobs assisting this vulnerable community.</p>
<b>Conditions</b>
<ul>
<li>2 week design sprint which includes a pitch deck.</li>
</ul>
<b>Tools</b>
<ul>
<li>SketchApp, InvisionApp, Illustrator, Google Drive, Google Slides, GitHub, Visual Studio Code, sketch pad.</li>
</ul>
</div>
<div class="col s12 m6 l6">
<b>My Responsibilities</b>
<p>Heuristic analysis, C&C analysis, task analysis, site map, mid-fidelity prototype, pitch deck.</p>
<b>Solution</b>
<p>A redesigned 'Jobs' section that streamlines the usability and search experience of skilled individuals seeking jobs that directly assist the homeless community in Los Angeles.</p>
<a class="waves-effect waves-light btn" href="https://projects.invisionapp.com/share/BTN6GLIJNUY#/screens/311450642" target="_blank">View Prototype</a>
</div>
</div>
</div>
<br>
<div class="divider"></div>
<!-- Process -->
<div class="container">
<div class="section">
<h3 id="dp">Step 1: Research</h3>
<h4>CURRENT WEBSITE EVALUATION</h4>
<div class="row">
<div class="col s12">
<div class="card wow slideInUp">
<div class="card-image">
<img src="images/jobsforhope/heuristicevaluation.jpg">
</div>
<div class="card-content">
<p>Using <b>Jacob Nielsen’s 10 heuristics of usability</b> I evaluated the LA County Homeless Initiative’s current job portal and compiled a list of opportunities to address. In the chart below are specifics of some of the key issues, which heuristic was violated, and a measure of how severe this problem would be for the user.</p>
</div>
</div>
</div>
<div class="col s12">
<div class="card wow slideInUp">
<div class="card-image">
<img src="images/jobsforhope/c&canalysis.jpg">
</div>
<div class="card-content">
<p>A <b>C&C Analysis</b> was completed to identify the differences between the 'Jobs for Hope' features and layout compared to 3 other major job search databases.</p>
</div>
</div>
</div>
<center><i class="large grey-text mdi-hardware-keyboard-arrow-down" style="padding-top: 8px"></i></center>
<h4>TASK ANALYSIS</h4>
<div class="row">
<div class="col s12">
<div class="card wow slideInUp">
<div class="card-image">
<img src="images/lette/Journey Map.jpg">
</div>
<div class="card-content">
<p>I create a <b>Task Analysis</b> of a user trying to find a job as a 'Manager' on the existing portal. This informs the <b>User Journey Map</b> that I create to illustrate and put into scope the current site's shortcomings and areas of opportunity.</p>
</div>
</div>
</div>
</div>
<div class="col s12">
<div class="card wow slideInUp">
<div class="card-content">
<p>Understanding the user's pain points and integrating findings from the above-referenced research techniques, I create a <b>Problem Statement</b>: 'Lette is aiming to improve their website's e-commerce presence order to improve their users' macaron-ordering experience. However, 'Lette Macaron’s current dashboard experience is not intuitive and it places too many barriers between the user and their end goal.</p>
</div>
</div>
</div>
<center><i class="large grey-text mdi-hardware-keyboard-arrow-down" style="padding-top: 8px"></i></center>
<h4>Step 3: Making Sense of My Findings</h4>
<div class="row">
<div class="col s12">
<div class="card wow slideInUp">
<div class="card-content">
<p>With the problem and user in mind, I was able to come up with a <b>Solution Statement</b> to work towards: To address this problem is to redesign the primary navigation to clearly define what products are available and their individual information. This interface will help the user identify what they're trying to purchase, while expediting their checkout experience.</p>
<br>
<p>To maintain scope, I identify a <b>Success Metric</b>:
<ul>
<li><i class="tiny mdi-action-assignment-turned-in"></i> User completes an order starting from 'Lette Macaron's landing page and ending at the order confirmation. </li></p>
</div>
</div>
</div>
<!--<div class="col s12">
<div class="card wow slideInUp">
<div class="card-image">
<img src="images/lette/userflow.jpg">
</div>
<div class="card-content">
<p>I create a <b>User Flow</b> based on how Kelsey may use an online checkout.</p>
</div>
</div>
</div>-->
</div>
<center><i class="large grey-text mdi-hardware-keyboard-arrow-down" style="padding-top: 8px"></i></center>
<h4>Step 4: User Testing</h4>
<div class="row">
<div class="col s12 m12 l12">
<div class="card wow slideInUp">
<div class="card-image">
<img src="images/lette/paper prototype.jpg">
</div>
<div class="card-content">
<p>I begin testing with a <b>Paper Prototype</b> in order to iterate and re-iterate.</p>
</div>
</div>
</div>
<div class="col s12 m12 l12">
<div class="card wow slideInUp">
<div class="card-image">
<img src="images/lette/wireframe.jpg">
</div>
<div class="card-content">
<p>Based on my findings, I create a <b>Wireframe</b> that I use to inform the higher fidelity prototype.</p>
</div>
</div>
</div>
</div>
<center><i class="large grey-text mdi-hardware-keyboard-arrow-down" style="padding-top: 8px"></i></center>
<h4>Step 5: The Solution</h4>
<div class="col s12">
<div class="card wow slideInUp">
<div class="card-image">
<img src="images/jobsforhope/mock-up.jpg">
</div>
<div class="card-content">
<p>I create a clickable <b>Prototype</b> in SketchApp and InvisionApp and incorporate it into the pitch deck to be presented to one of the directors of the Los Angeles County Homeless Initiative.</p>
</div>
<div class="card-action">
<a href="https://projects.invisionapp.com/share/BTN6GLIJNUY#/screens/311450642" target="_blank">View Prototype</a>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div id="pagination">
<div class="container">
<!--<a class="waves-effect waves-light btn" href="opskins-case-study.html">OPSKINS</a>
<a class="btn-floating btn-large waves-effect waves-light teal right" href="opskins-case-study.html">OPSKINS<i class="material-icons">arrow_forward</i></a>
<a class="waves-effect waves-light btn right" href="opskins-case-study.html"><center>NEXT STUDY<i class="material-icons">arrow_forward</i></center></a>-->
</div>
</div>
<!-- Footer -->
<footer class="page-footer white">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="black-text">Nicole Doan</h5>
<h6 class="black-text">EMAIL</h6>
<a class="black-text" href="mailto:me@nicolendoan.com"><h7>me@nicolendoan.com</h7>
<br><br>
<div class="col s12">
<a class="black-text" href="https://www.linkedin.com/in/nicoledoan" target="_blank"><i class="fab fa-linkedin fa-2x"></i></a>
<a class="black-text" href="https://github.com/nekobox" target="_blank"><i class="fab fa-github fa-2x"></i></a>
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made with <a class="teal-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script src="js/wow.min.js"></script>
</html>