-
Notifications
You must be signed in to change notification settings - Fork 0
/
project1_test.html
229 lines (127 loc) · 9.38 KB
/
project1_test.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
<!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">
<div class="content no-bg">
<div id="project-ux" class="project-content">
<div class="container">
<!-- PROJECT HEADER -->
<h1>IBM Experience</h1>
<!-- SECTION HEADER -->
<h2 class="headline">Data Server Manager</h2>
<p>Design problem: Design a simple, scalable, and smart solution to administer, monitor, manage, and optimize the performance of DB2 for Linux, UNIX and Windows databases across any enterprise. (NDA required for more details).</p>
<div class="row image-block">
<div class="col-sm-3 hidden-xs"><a href="images/ibm/ibmdsm1.png" data-lightbox="old" title="Click for bigger image"><img src="images/ibm/ibmdsm1.png" alt=""></a></div>
<div class="col-xs-3"><a href="images/ibm/ibmdsm2.png" data-lightbox="old" title="Click for bigger image"><img src="images/ibm/ibmdsm2.png" alt=""></a></div>
<div class="col-sm-3 hidden-xs"><a href="images/ibm/ibmdsm3.png" data-lightbox="old" title="Click for bigger image"><img src="images/ibm/ibmdsm3.png" alt=""></a></div>
<div class="col-sm-3 hidden-xs"><a href="images/ibm/ibmdsm4.png" data-lightbox="old" title="Click for bigger image"><img src="images/ibm/ibmdsm4.png" alt=""></a></div>
</div>
<!-- PARAGRAPH -->
<p>I was involved through every stage of design for Data Server Manager. UX was pulled into the project very late in the process, so we had to do disaster control with development and gather requirements at the same time.<br><br>
I was involved in requirements gathering by conducting interviews, wire framing, building interactive prototypes using HTML, CSS, JavaScript, Dojo and GridX.<br><br>
Medium-fidelity mockups that I created were shown at Information On Demand in Las Vegas for user feedback.<br><br>
Some highlights of the project:</p>
<ul>
<li>My boss gave myself and one colleague an award for our rapid work with development and the nickname
Batman and Robin. We were able to work very efficiently together.</li>
<li>Created an interactive prototype which development used in actual code</li>
<li>Received praise from a notoriously difficult-to-work-with project manager on design work I did.</li>
</ul>
<p>Email from project manager:</p>
"Hi [Greg] and Matt, <br>
During the [demonstration] yesterday I was totally wowed by the UI. It has come a long way since the [first] drop. I am very hopeful that customers will be wowed too! When I asked [Steven] about it he said both of you played an instrumental role in making it happen. I want to take a moment to say a BIG THANK YOU! Keep up all the good work!!"
<h2 class="headline">Data Server Manager Mobile</h2>
<p>
Having expressed an interest in mobile to my boss, I was given charge of the DSM mobile user-experience design work. No other UX members were involved directly in the mobile design. I worked with two mobile developers and bounced ideas off fellow UX team members.<br><br>
The existing mobile design was very confusing to navigate and it took me a long time to figure out how it worked. I was able to drive a much more user-friendly navigation and drill-down process.<br><br>
</p>
<h2 class="headline">Another Mobile UI</h2>
<p>
<ul>
<li>Converted an existing web interface to mobile.</li>
<li>Tested my design against an alternative design in usability sessions.</li>
<li>My design was able to overcome some design flaws in the existing mobile design.</li>
</ul>
</p>
</div> <!-- end container -->
</div>
<!--
<div id="project-vd" class="project-content">
<div class="container">
<h1>Visual Design</h1>
<p>
Very quickly I was recognized for my visual design skills. I became the go to person to do high
fidelity mockups. My work was shown at IOD in Las Vegas and always received positive feedback. As you can see the released version of Data Server Manager is not pretty. I did not contribute to the final design.<br><br>
I also became the Leaison between visual design and UX. I worked directly with the lead designer on
the visual design team assigned to our project. We held weekly meetings and distributed visual
design work load. I contributed to brainstorming and problem solving on different visual design
problems.
</p>
</div> end container
</div>
-->
<div id="project-dev" class="project-content">
<div class="container">
<h1>Development</h1>
<p>I was involved in a small amount of development work. I worked with Dojo to write functions for
a user interface prototype. I also prototyped in HTML, CSS, javascript and jQuery. I was recognized
for my ability to quickly implement changes in the prototype and became the go-to person to make
changes and tweaks to the code.<br><br>
I developed multiple prototypes for various ideas I had. I submitted a patent disclosure for a user
interface idea I came up with. Before I submitted the disclosure, I prototyped a version of the UI
using the above mentioned libraries (not dojo). <br><br>
I modified a prototype written by someone else to illustrate some UI ideas I had for DSM (the vertically
aligned components I talked about in the UX section). We were designing an interface that utilized
tiles laid out in a grid. The layout was inefficient and messy, so I began wireframing and prototyping a
version that stacked the tiles in a vertical list. The prototype I modified became the basis for the
developer’s code.</p>
</div>
</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>
</div>
</body>
</html>