-
Notifications
You must be signed in to change notification settings - Fork 0
/
project0.html
276 lines (145 loc) · 13 KB
/
project0.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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!DOCTYPE html>
<html lang="en" id="top">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable = no">
<meta name="description" content="">
<meta name="author" content="Matt Nearents">
<link rel="shortcut icon" href="favicon.ico">
<title>Matt Nearents | Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- my css file -->
<link href="css/screen-v1.css" rel="stylesheet">
<link href="css/projectcss.css" rel="stylesheet">
<!-- font awesome -->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JQUERY -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<!-- light box -->
<script type="text/javascript" src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<!-- my custom javascript -->
<script type="text/javascript" src="js/myscripts.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="project-wrapper">
<!-- preloader -->
<div class="content no-bg">
<div id="summary" class="project-content">
<div class="container">
<h1>McGraw-Hill Education</h1>
<p>I have been working at ALEKS/MHE for almost a year as a user interface designer. I have several relevant projects listed below.</p>
</div>
</div>
<div id="project-ux" class="project-content">
<div class="container">
<h1>Experience</h1>
<p>Projects I have worked on include (* = lead designer):</p>
<ul>
<li>QuickTables Integration*</li>
<li>ALEKS Student Module Redesign</li>
<li>User Onboarding*</li>
<li>College Algebra and Trigonometry Tools*</li>
<li>AlEKS Mobile UI*</li>
<li>Internal CMS Redesign*</li>
<li>Instructor Reports*</li>
</ul>
</div>
<div class="container">
<h2 class="headline">QuickTables Integration</h2>
<p>This was my first project. I took two separate products (ALEKS and QuickTables) and integrated them together for a seamless experience.</p>
<h3>QuickTables Before and After:</h3>
<div class="row image-block">
<div class="col-sm-6"><a href="images/mcgraw/quicktables.jpg" data-lightbox="quicktables1" title="Old ALEKS QuickTables"><img src="images/mcgraw/quicktables.jpg" alt="Old QuickTables Screenshot"></a></div>
<div class="col-sm-6"><a href="images/quicktables_new.png" data-lightbox="quicktables1" title="Old ALEKS QuickTables"><img src="images/quicktables_new.png" alt="New QuickTables Screenshot"></a></div>
</div>
<p>My goal was primarily to update interactions within QuickTables to be more consistent with the ALEKS redesign, integrate QuickTables navigation and reports into the ALEKS navigation menu and reports dashboard, and resolve space and layout issues for iPad compatibility.</p>
<h2 class="headline">ALEKS Student Module Redesign</h2>
<p>Before I arrived the team conducted extensive user research and was in the process of updating the ALEKS student module. I was involved in several small projects to tie up loose ends or find solutions for edge cases. These included:</p>
<ul>
<li>Simplifying a report dashboard tile for the student's dashboard</li>
<li>Transitioning students from one objective to another</li>
<li>Students switching classes or sections</li>
<li>Completing the initial Knowledge Check with a very good or very poor score</li>
<li>Creating a specification for date/time copy throughout the interface</li>
</ul>
<h3>ALEKS Student Module Before and After:</h3>
<div class="row image-block">
<div class="col-sm-6"><a href="images/classic-aleks.png" data-lightbox="quicktables1" title="Classic ALEKS Interface"><img src="images/classic-aleks.png" alt="Classic ALEKS Screenshot"></a></div>
<div class="col-sm-6"><a href="images/newaleks.png" data-lightbox="quicktables1" title="New ALEKS Interface"><img src="images/newaleks.png" alt="New ALEKS Screenshot"></a></div>
</div>
<h2 class="headline">User Onboarding</h2>
<p>I redefined the onboarding for both students and instructors new to ALEKS. In the student module, ALEKS presents series of pop ups with "Next" buttons and hopes you remember all the stuff it pointed at. I made the onboarding more intuitive in three ways:</p>
<ul>
<li>I eliminated the use of "Next" as much as possible and instead required action (like opening a menu)</li>
<li>I ordered the tips by necessity, reducing the number of total tips and increasing their effectiveness</li>
<li>I introduced the idea of exploration by creating a mechanism for students to learn about the UI when convenient for them</li>
<li>I changed the timing of tips to be "just in time" rather than "all at once." If something isn't useful now, we don't point it out.</li>
</ul>
<p>The new flow has yet to be implemented or user tested.</p>
<h2 class="headline">College Algebra and Trigonometry Tools</h2>
<p>I was chosen to be the UX designer on ALEKS first agile development team. I designed, tested, and prototyped (Axure, HTML/CSS/JavaScript) math input tools which included complex user interactions like dragging, rotating, snapping points to a coordinate plane, and remembering calculations.<br>Our process was as follows:
<ul>
<li>I receive a spec from Math Content Department for a new tool.</li>
<li>I decypher which requirements are content-based and which are UI-based.</li>
<li>Designed a tool I felt was user friendly based on intuition, meeting content requirements, and using familiar interaction patterns from other items or other UI students were familiar with.</li>
<li>Moderated in-house usability tests with actual students.</li>
<li>Iterated on initial design if necessary.</li>
<li>Convert interactive prototype to development specification.</li>
<li>Collaborate with development to test bugs and find deviations from the specification.</li>
</ul>
<p> Here are some examples: </p>
<ul>
<li>Polynomial graphing (HTML, CSS, JavaScript): The user can plot points on a coordinate plane. A ghost point moves with the cursor and snaps to points on the X and Y axis only. The point is plotted when the user clicks.</li>
<li>Geometry manipulation (Axure): The user can drag, rotate, enlarge/shrink, and reflect a given triangle to match a target triangle.</li>
<li>Damped cosine (Axure): The user can plot points on or within the bounds of e^(-x) and -e^(-x) (similar process to polynomial graphing). The point snaps to points on the coordinate plan and to points on the graphs of e.</li>
<li>Graph transformations (Axure): The user can move, vertically stretch/compress, horizontally stretch/compress, or reflect the graph of a parabola.</li>
<li>And many others.</li>
</ul>
<p>Here is an example of an existing, very basic input tool (not one I designed):</p>
<div class="row image-block">
<div class="col-sm-3"></div>
<div class="col-sm-6"><a href="images/mcgraw/aleks-input.jpg" data-lightbox="input" title="ALEKS input tool"><img src="images/mcgraw/aleks-input.jpg" alt="Time & Topic Report Screenshot"></a></div>
<div class="col-sm-3"></div>
</div>
<h2 class="headline">ALEKS Mobile UI</h2>
<p>Currently ALEKS is optimized for desktop and tablet. I am the lead designer on a new project to make ALEKS friendly on mobile phones. So far I have created a slide deck outlining the current UX issues and some potential solutions (wire frames) to present to executive leadership. This project will extend into 2016.</p>
<h2 class="headline">Internal CMS Redesign</h2>
<p>Our Content Management System was designed 10 years ago or more and is cumbersome and outdated. I just started a project to redesign specific pieces of the CMS system. So far I have conducted internal interviews with various departments. At each interview I scribble on some printed screen shots. I am compiling a sort of heat map in order to prioritize which features stay, which are removed, and which are hidden. I also have to work within certain constraints I was given. This project just started and will continue into 2016.</p>
<h2 class="headline">Instructor Reports</h2>
<p>I worked with another UX designer to redesign three data reports for instructors. The other designer was pulled onto other projects, so now I am the lead designer. I visited a couple of schools in Houston and Austin Texas to conduct contextual inquiries with several teachers. I also conducted interview sessions to gather requirements for the redesign.<br>The requirements were translated into stories for the future agile work. Currently I am creating an interactive prototype for remote user testing. This project is also ongoing.</p>
</div><!-- end container -->
</div>
<!--
<div id="project-ux" class="project-content col-md-4">
<div class="project-content-inner">
<h1>User Experience</h1>
</div>
</div>
<div id="project-vd" class="project-content col-md-4">
<div class="project-content-inner">
<h1>Visual Design</h1>
</div>
</div>
<div id="project-dev" class="project-content col-md-4">
<div class="project-content-inner">
<h1>Development</h1>
</div>
</div>
-->
<div id="project-footer" class="project-content">
<!-- <?php include $_SERVER['DOCUMENT_ROOT'] . '/portfolio/modules/project-footer.html' ?>-->
</div>
<script>
$("#project-footer").load("modules/project-footer.html");
</script>
</div>
</div>
</body>
</html>