-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathw2wAccordion.html
453 lines (393 loc) · 19.6 KB
/
w2wAccordion.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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Innovative student designer with a vision to create the next immersive interface at the intersection of contemporary technology and digital marketing.">
<meta name="keywords" content="Nick Marker, Design, UI/UX, USC">
<meta name="author" content="Nick Marker">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--GOOGLE FONTS-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap" rel="stylesheet">
<!--INTER FONT-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<!--PERMANENT MARKER FONT-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--CSS STYLESHEET-->
<link rel="stylesheet" href="style.css">
<!--JQUERY FOR RESPONSIVE NAVBAR-->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<title>Nick Marker Design--W2W</title>
<style>
#changeText {
display: inline-block;
}
/*--ACCORDION STYLE--*/
.accordion {
width: 100%;
}
.accordion .contentBx {
position: relative;
margin: 10px 20px;
}
.accordion .contentBx .label {
font-family: 'Inter', arial, sans-serif;
ffont-style: italic;
font-weight: 600;
font-size: 20px;
position: relative;
padding: 15px;
background-color: #252525;
color: #FFF;
cursor: pointer;
}
.accordion .contentBx .label:hover {
background-color: #474747;
}
.accordion .contentBx .label::before {
content: "+";
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 20px;
}
.accordion .contentBx.active .label::before {
content: "-";
}
.accordion .contentBx .acc-content {
position: relative;
background-color: #FFF;
height: 0;
overflow: hidden;
transition: 0.5s;
overflow-y: auto;
}
.accordion .contentBx.active .acc-content {
height: auto;
padding: 20px 0px;
}
</style>
</head>
<body>
<!--NAVBAR START-->
<div class="nav">
<div class="nav-container">
<img src="img/NMDesignLogo.png" alt="NMDesign Logo">
<a class="active" href="projects.html">Projects</a>
<a href="about.html">About</a>
<a href="resume.html">Resume</a>
<div class='clear'></div>
</div>
</div>
<!--NAVBAR END-->
<!--RESPONSIVE NAVBAR START-->
<div class='responsive-navigation'>
<header class="res-nav">
<img src="img/NMDesignLogo.png" alt="NMDesign Logo">
<!-- Side Nav -->
<div id="js-nav" class="side-nav">
<ul class="list">
<li><a class="active" href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
</div>
<!-- Hamburger Button -->
<div id="js-hamburger" class="hamburger button">
<span id="js-top-line" class="top-line"></span>
<span id="js-center-line" class="center-line"></span>
<span id="js-bottom-line" class="bottom-line"></span>
</div>
<div class='clear'></div>
</header>
</div>
<!--RESPONSIVE NAVBAR END-->
<!--W2W PROJECT HEADER START-->
<div class="pheader">
<div class="pimgmobile"><img src="img/w2w/w2wvertical.png" alt="When to Work Mockup Vertical"></div>
<div class="pheadtext">
<h1>When to Work Mobile App Redesign</h1>
<br>
<h6>A modernized redesign of an employee scheduling app. Reducing the repetitive aspects of the app's pages and condensing the app's various tasks make this redesign aimed toward increasing user friendliness.</h6>
<br>
<div class="infobox"><h5>Duration</h5><p>5 days, August 2022</p></div>
<div class="infobox"><h5>Role</h5><p>UI/UX Designer</p></div>
<div class="infobox"><h5>Tools</h5><p>Figma, Adobe Illustrator, Adobe Photoshop</p></div>
</div>
<div class="pimg"><img src="img/w2w/w2wvertical.png" alt="When to Work Mockup Vertical"></div>
</div>
<!--W2W PROJECT HEADER END-->
<!--W2W PROJECT CONTENT START-->
<div class="content , project">
<h2 class="sectionhead">Introduction</h2>
<br/>
<p>WhenToWork is a privately owned California corporation that provides an online scheduling platform to businesses across the country. For this individual project I used my personal experience with the WhenToWork app over the course of four years, along with surveyed user input to identify the primary problems within the current app and redesign a more clear, user-friendly, application.</p>
<hr class="newhead">
<h2 class="sectionhead">Final Redesign</h2>
<div class="designs">
<div class="designslide">
<h5>Menu Page</h5>
<p>Contains the basic information about the schedule and time off</p>
<img src="img/w2w/w2wMenu.png" alt="Slide 1">
</div>
<div class="designslide">
<h5>Date Page</h5>
<p>When a specific day is chosen, the assigned shifts for that day appear</p>
<img src="img/w2w/w2wMessages.png" alt="Slide 2">
</div>
<div class="designslide">
<h5>Dashboard Page</h5>
<p>Contains updates on upcoming shifts and staff messages</p>
<img src="img/w2w/w2wDashboard.png" alt="Slide 3">
</div>
<div class="designslide">
<h5>Staff Page</h5>
<p>A scrollable page with each staff member's contact information</p>
<img src="img/w2w/w2wStaff.png" alt="Slide 4">
</div>
<div class="designslide">
<h5>Account Page</h5>
<p>Contains account information and general settings for the app</p>
<img src="img/w2w/w2wAccount.png" alt="Slide 5">
</div>
</div>
<hr class="newhead"/>
<h2 class="sectionhead">Design Process</h2>
<br/>
<!-----ACCORDION START----->
<div class="accordion">
<div class="contentBx">
<div class="label"><em>Step 1: Research</em></div>
<div class="acc-content">
<div id="step1">
<!--<h5><em><strong>Step 1: Research</strong></em></h5>-->
<h5>Summary</h5>
<p>In addition to my personal experience with the WhenToWork app for over four years, I also surveyed <strong>20 other users</strong> of the WhenToWork app. The survey included questions concerning their experiences while performing various actions on the site (checking the schedule, messaging other employees, trading shifts, etc.) and also questions about what changes they would like to see in the redesign.</p>
<br/>
<br/>
<div class="surveysection">
<div class="surveyQ , survey-left">
<h5>What is your primary reason for using the W2W app?</h5>
<img src="img/w2w/W2W Survey1.png" alt="Survey Question 1">
</div>
<div class="surveyQ , survey-right">
<h5>Which areas of the app would you like to see improvement?</h5>
<img src="img/w2w/W2W Survey2.png" alt="Survey Question 2">
</div>
<div class="surveyQ , survey-left">
<h5>How would you rate your overall experience on the W2W app?</h5>
<img src="img/w2w/W2W Survey3.png" alt="Survey Question 3">
</div>
<div class="surveyQ , survey-right">
<h5>Would you recommend the W2W app to a friend?</h5>
<img src="img/w2w/W2W Survey4.png" alt="Survey Question 4">
</div>
<h5>Do you have any additional comments about the W2W app or what you would like to see in the redesign?</h5>
<p><em>Response 1: "Didn't even know the app allowed me to message other staff!"<br/><br/>
Response 2: "Design feels out of date compared to other apps"<br/><br/>
Response 3: "Information is repeated across the app and is very unorganized"</em></p>
</div>
</div>
</div>
</div>
<div class="contentBx">
<div class="label"><em>Step 2: Main Problems and Solutions</em></div>
<div class="acc-content">
<div id="step2">
<!--<h5><em><strong>Step 2: Main Probems and Solutions</strong></em></h5><br/>-->
<div class="problems-text">
<h5>Lack of Hierarchy</h5>
<p>The current app is very bland and is visually outdated. Despite the development efficiency, the block-shaped buttons with the lack of hierarchy make the site dull and lacking user engagement. Creating a more modernized app design with visual hierarchy will help reinstate a “wow factor” for the app, in addition to creting a more intuitive user-flow.</p><br/>
<h5>Unclear Information</h5>
<p>The current app design contains duplicated information, just reformatted on a new page. The “upcoming” and “dashboard” pages both show the user’s upcoming shifts in a similar weekly calendar format, making the app difficult to navigate. There are also various methods of accessing the user’s schedule, all in different places on different pages, again increasing navigation difficulty. The app must not only be redesigned but the information must also be reorganized in a more user-friendly manner.</p><br/>
<h5>Messaging Difficulty</h5>
<p>The current app allows users to send messages, but the process of doing so forces a user to navigate to the “menu” page, then select “messages”, then click “new message”, and then finally compose a message. But even when they begin to write a message, they must know the recipient’s contact information prior to composing the message. This app redesign needs to ifacilitate the method of sending messages to employees and receiving messages from other employees, without having to go through a multi-step process. This will increase the overall efficiency of the app and better reveal one of the app’s currently ‘hidden’ features.</p>
</div>
<img class="original-app" src="img/w2w/w2wOriginal.png" alt="Original W2W Dashboard">
</div>
</div>
</div>
<div class="contentBx">
<div class="label"><em>Step 3: Comparative Study</em></div>
<div class="acc-content">
<div id="step3">
<!--<h5><em><strong>Step 3: Comparative Study</strong></em></h5><br/>-->
<div class="problems-text">
<h5>Lack of Hierarchy</h5>
<p>A modern design with buttons that have a clear sense of hierarchy with blue typefaces on a white button. The curved edges of the buttons create an updated look when compared to the block shaped buttons. Bottom icons are a more muted color in order to keep user attention focused on the page's content.</p><br/>
<h5>Unclear Information</h5>
<p>The different pages of the app all serve their own purpose and there is no duplicated information. The buttons on the “Home” page organize the basic duties of the app into their own section, making the different actions easily distinguishable by the user.</p><br/>
<h5>Messaging Difficulty</h5>
<p>There is a specific “Messages” button on the home page where all actions related to messaging can be found. When on other pages, there is a small mail logo at the top of the app that redirects the user to the same “Messages” page. When searching for people to send a message to, their account automatically populates when you type their name. Sending a message can be done entirely on a single page, increasing the user-friendly aspects of the site.</p>
</div>
<img class="original-app" src="img/w2w/Dayforce.png" alt="Dayforce Homepage">
</div>
</div>
</div>
<div class="contentBx">
<div class="label"><em>Step 4: Redesign Client Restrictions</em></div>
<div class="acc-content">
<div id="step4">
<!--<h5><em><strong>Step 4: Redesign Client Restrictions</strong></em></h5>-->
<p>Must maintain the same color palette and logo as the current WhenToWork mobile app.<br/><br/>All of the information and pages presented on the current app must remain, however sections may be moved or reorganized to redefine the structure of the app.<br/><br/>The messaging system is only operable within the WhenToWork app. Staff phone numbers and emails are available to access, however the in-app messaging only allows the user to send/receive messages through the WhenToWork app.</p>
</div>
</div>
</div>
</div>
<div class="accordion">
<div class="contentBx">
<div class="label"><em>Step 5: Ideation</em></div>
<div class="acc-content">
<div id="step5">
<div class="content , project , center">
<!--<h5><em><strong>Step 5: Ideation</strong></em></h5>-->
<h5>Information Architecture</h5>
<img src="img/w2w/w2wInfoArch.png" alt="Information Architecture Diagram">
</div>
</div>
</div>
</div>
<div class="contentBx">
<div class="label"><em>Step 6: Wireframe, Prototype, and Test</em></div>
<div class="acc-content">
<div class="content , project">
<div class="step6">
<!--<h5><em><strong>Step 6: Wireframe, Prototype, and Test</strong></em></h5>-->
<h5>Initial Wireframe Sketches</h5>
<div class="center">
<img id="sketch" src="img/w2w/w2wSketchWireframe.png" alt="Wireframe Sketch">
</div>
<h5>Mid-Fidelity Wireframes</h5>
<div class="designs">
<div class="designslide">
<h5>Menu Page</h5>
<img src="img/w2w/MidFelMenu.png" alt="Slide 1">
</div>
<div class="designslide">
<h5>Date Page</h5>
<img src="img/w2w/MidFelMessages.png" alt="Slide 2">
</div>
<div class="designslide">
<h5>Dashboard Page</h5>
<img src="img/w2w/MidFelDashboard.png" alt="Slide 3">
</div>
<div class="designslide">
<h5>Staff Page</h5>
<img src="img/w2w/MidFelStaff.png" alt="Slide 4">
</div>
<div class="designslide">
<h5>Account Page</h5>
<img src="img/w2w/MidFelAccount.png" alt="Slide 5">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!------ACCORDUION END----->
<br/>
<br/>
<br/>
<h2 class="sectionhead">Final Design</h2>
<br/>
<h5><em><strong>Design Board</strong></em></h5>
<div class="center">
<img id="design-board" src="img/w2w/w2wFontBoard.png" alt="Final Design Board">
</div>
<h5><em><strong>Mobile App Design</strong></em></h5>
<div class="designs">
<div class="designslide">
<h5>Menu Page</h5>
<img src="img/w2w/w2wMenu.png" alt="Slide 1">
</div>
<div class="designslide">
<h5>Date Page</h5>
<img src="img/w2w/w2wMessages.png" alt="Slide 2">
</div>
<div class="designslide">
<h5>Dashboard Page</h5>
<img src="img/w2w/w2wDashboard.png" alt="Slide 3">
</div>
<div class="designslide">
<h5>Staff Page</h5>
<img src="img/w2w/w2wStaff.png" alt="Slide 4">
</div>
<div class="designslide">
<h5>Account Page</h5>
<img src="img/w2w/w2wAccount.png" alt="Slide 5">
</div>
</div>
<br/>
<br/>
<br/>
<h5><em><strong>Solutions</strong></em></h5><br/>
<h5>Hierarchy Based Design</h5>
<p>This redesign now more closely relates visually to WhenToWork's competitors through the curved button edges and updated icons. These icons are not only more relevant to the time but are also more intuitive to what actions they provide. Additionally, the new typeface provides a sleek, modern look to the app's redesign, while also providing hierarchy to the different aspects of the app. All together these changes work to facilitate the different actions made by the user.</p><br/>
<h5>Information Clarity</h5>
<p>The redesigned app has been reorganized so that there are no longer duplicates of information available to the user. Each page has its own subpages that provide specific tasks relevant to the parent page (ex. staff page includes actions to message and interact with staff), making the application easier to navigate for the user and more intuitive.</p><br/>
<h5>Effortless Messaging</h5>
<p>Messaging on the app redesign is now done all in a single place. Within the staff page there is a list of employees with their contact info and a message icon that allows the user to send a direct message without having to first search for an employer's contact, making in-app messaging much less complex. New messages continue to appear on the user's dashboard, now with the ability to respond or trash the message without having to navigate to an entirely new page.</p>
<br/>
<br/>
<br/>
<h2 class="sectionhead">Reflection</h2>
<br/>
<h5><em><strong>Takeaways</strong></em></h5><br/>
<p>Overall, I really enjoyed spending some time analyzing an app that I have had a close relation to over the course of four or so years. I was able to identify the problems that frequently frustrated myself and many other staff members while using the WhenToWork app and use my creativity to develop solutions. I hope to have the opportunity to work on more app redesigns that I am familiar with in the future.</p><br/>
<h5><em><strong>Future Improvements</strong></em></h5><br/>
<p>If I were to have more time with this redesign, I would like to develop additional pages like a “Sign in or Create an Account” page and a “Loading” page when the app needs time to process data. If I had the opportunity, I would also like to work with an API or back-end data software to allow the messages in the WhenToWork app to also be sent directly to a user’s personal cell phone number or email.</p>
</div>
<!--W2W PROJECT CONTENT END-->
<!--FOOTER ANIMATION START-->
<div class="footeranimation">
<div class="figure" id="f1"><img src="img/walkingman.gif" alt="Walking Stick Man"></div>
<div class="bubble"><p>Thanks for visiting!</p></div>
</div>
<!--FOOTER ANIMATION END-->
<!--FOOTER START-->
<div class="footer">
<p><a class="navfoot" href="projects.html">PROJECTS</a> | <a class="navfoot" href="about.html">ABOUT</a> | <a class="navfoot" href="resume.html">RESUME</a></p>
<a href="tel:484-365-3437"><img class="icon" src="img/Phone.png" alt="Call Me"></a>
<a href="mailto:ncmarker@usc.edu"><img class="icon" src="img/Mail.png" alt="Email Me"></a>
<a href="https://www.linkedin.com/in/nickmarker" target="_blank"><img class="icon" src="img/Linkedin.png" alt="Linkedin Profile"></a>
<br>
<img id="logo" src="img/NMDesignLogo.png" alt="Nick Marker Design Logo">
<p id="copyright">Designed and Developed by Nick Marker © 2022</p>
</div>
<!--FOOTER END-->
<script>
/*--ACCORDION--*/
const accordion = document.getElementsByClassName('contentBx');
for (i = 0; i < accordion.length; i++){
accordion[i].addEventListener('click', function(){
this.classList.toggle('active')
})
}
/*--NAVBAR SLIDE IN/OUT--*/
const hamburgerBtn = document.getElementById("js-hamburger");
const topLine = document.getElementById("js-top-line");
const centerLine = document.getElementById("js-center-line");
const bottomLine = document.getElementById("js-bottom-line");
const nav = document.getElementById("js-nav");
hamburgerBtn.addEventListener("click", () => {
topLine.classList.toggle("active");
centerLine.classList.toggle("active");
bottomLine.classList.toggle("active");
nav.classList.toggle("show");
});
$("#js-hamburger").click(function () {
$("#js-top-line").toggleClass("active");
$("#js-center-line").toggleClass("active");
$("#js-bottom-line").toggleClass("active");
$("#js-nav").toggleClass("show");
});
</script>
</body>
</html>