-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
250 lines (225 loc) · 11.8 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
UX/UI Homework 20 Case study
</title>
<!--Bootstrap link and script-->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<style>
html {
scroll-behavior: smooth;
}
#top{
margin: 0%;
}
#section1 {
margin: 0%;
}
#section2 {
color:white;
}
#section3{
color:white;
}
#section4{
color:white;
}
#section5{
color: white;
}
</style>
<!--CSS link-->
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary" id="#top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/True new logo in the works.png" alt="Bootstrap" id="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent" >
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="https://bagua-zen.github.io/UX_UI_HW_19/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Resume</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Current Case study quick nav
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#section1">About Ed.gov</a></li>
<li><a class="dropdown-item" href="#section2">Week 1 research of customer</a></li>
<li><a class="dropdown-item" href="#section3">Week 2 problem/goal</a></li>
<li><a class="dropdown-item" href="#section4">Week 3 inspiration/solution</a></li>
<li><a class="dropdown-item" href="#section5">Week 4 & 5 presenting findings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">look at more case studies</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link"> About me</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<h1>Snapshot of project</h1>
<h2>Redesign of the Department of Education Navigation.</h2>
<ul>
<li>5 weeks</li>
<li>designers: Tim M.</li>
<li>tools used: figma and figJam</li>
</ul>
</div>
<img src="./images/stockphoto.png" alt="">
<div class="customer" id="section1">
<h1>Introducing Ed.gov!</h1>
<div id="theCo">
<div class="rowOfInfoCon">
<img src="./images/image 2134.png" alt="">
<div id="info1">
<q>ED's mission is to promote student achievement and preparation for global competitiveness by fostering educational excellence and ensuring equal access.</q>
<img src="./images/missionhero.png" alt="">
<ul>
<li>Establishing policies on federal financial aid for education, and distributing as well as monitoring those funds.</li>
<li>Collecting data on America's schools and disseminating research.</li>
<li>Focusing national attention on key educational issues.</li>
<li>Prohibiting discrimination and ensuring equal access to education.”</li>
</ul>
</div>
</div>
<div id="confusion">
<h3>What does all of that mean? </h3>
<p>Answer: This site supposed to be an information hub for various people of many backgrounds.</p>
</div>
</div>
<img src="./images/questionmark.png" alt="">
</div>
<div class="goal" id="section2" >
<h1>The research conducted to uncover the Problem statement</h1>
<h3>GOAL: To make the site more UI friendly </h3>
<div class="rowOfInfoCon">
<img src="./images/image 219.png" alt="">
<img src="./images/heuristicEval.png" alt="">
<img src="./images/cardsorting.png" alt="">
</div>
<h4>As I looked for problems the average user might have with navigation and ease of access (all the while refining my understanding of the users needs based on interviews and other forms of evaluation and research) I found more problems than I wanted to or could fix in the time given.</h4>
</div>
<div class="problem" id="section3">
<h1>The problem statement uncovered</h1>
<div id=probSol>
<li>The Problem:
Overwhelming amounts of information and a shoddy navigation process make it difficult for users to easily navigate the Department of Education website which houses the info of many other departments.
</li>
<li> My Solution:
Creating a minimalist design with curated content that helps keep the interface clean by displaying only pivotal information and housing more robust information for common users.
</li>
</div>
<div class="rowOfInfoCon">
<img src="./images/eddirectory.png" alt="">
<img src="./images/tempstress.png" alt="">
<img src="./images/newsitedev.png" alt="">
</div>
<div class="rowOfInfoCon">
<p>So I set about reorganizing the site based on the results of thourough card sorting to look for useful patterns and insight.</p>
<img src="./images/newsitedev2.png" alt="">
</div>
</div>
<div class="solutions" id="section4">
<h1>How the work was iterated based on user testing</h1>
<div>
<p>Ease of access to information of relevance to different main user groups, and clarity of navigation became key.
Four types of users who come to the ED.gov website.
<li>Students or families looking for information on student loans.</li>
<li> Businesses, non-profits and individuals looking for information about grants.</li>
<li> School administrators or relevant stakeholders looking for information on laws impacting their school.</li>
<li> Users of all kinds interested in data relevant to education in the United States.</li></p>
</div>
<div class="rowOfInfoCon">
<img src="./images/Screenshot 2024-04-29 230410 1.png" alt="" >
<img src="./images/Screenshot 2024-04-29 230549 1.png" alt="" >
<img src="./images/Screenshot 2024-04-29 230557 1.png" alt="" >
</div>
<p>The design went through various iterations in an attempt to make the site a bit easier to digest by planning for more infographics, segmenting out information with clear headings, and making use of “White space” in addition to other design approaches.</p>
</div>
<div class="results" id="section5">
<h1>The final prototype that solved the problem</h1>
<div class="rowOfInfoCon">
<p>The first two images below are the main page site before and After with the biggest difference being the change in clutter and initial overload allowing one more time to first process navigation.</p>
<img src="./images/finalbefore.png" alt="">
<img src="./images/after1.png" alt="">
</div>
<div>
<ul>
<p>The end result wound up being a need for curated content via an updated navigation bar for better clarity: </p>
<li>An updated landing page with simplified navigation in two forms.</li>
<li>Three new curated "homepages" for users to best provide both common and new/one-time users with the fastest access to all the information they would need.</li>
</ul>
<div class="columnInfo">
<img src="./images/curatedContentWUpd.png" alt="">
</div>
<p>The main pages listed in the navigation and starting with the landing page were all sorted, curated, and simplified for an easier viewing experience with less clutter on the page and a little color to feel more welcoming.</p>
<div class="columnInfo">
<img src="./images/updatedMainpages.png" alt="">
</div>
</div>
<div class="rowOfInfoCon">
<p>Below are rough overviews of the pages in their entirety as redesigned for web and mobile use with RWD for various sizes.</p>
<img src="./images/Screenshot 2024-04-29 230644 1.png" alt="">
<img src="./images/mobile version.png" alt="">
</div>
<div class="rowOfInfoCon">
<p>Below are close ups of the mobile equivalent pages with the alternate main menu pop-up display of said pages.</p>
<img src="./images/mobileCuratedFinal.png" alt="">
<img src="./images/mobileGeneralFinal.png" alt="">
</div>
<div class="columnInfo">
<p>Final thoughts and notes for future iterations: Though there were more problems than I could fix I did what I could to work on base key information structuring and organization while minimizing overload, though it became a bit text-heavy as I did not have time to develop proper infographics. </p>
<img src="./images/working-at-night.png" alt="">
<ul>
<li>This is a much bigger job than an individual can take on all at once, i'd like to work in a team next time on this site.</li>
<li>A better home landing page</li>
<li>Curated content pages for Students and parents, Teachers, and administrators for easier fact finding and navigation.</li>
<li>A new visual overlay</li>
<li>A little less text heavy in favor of better of more white space and better visuals.</li>
<li>Simpler navigation to pages with better organized content.</li>
</ul>
</div>
</div>
<footer>
<ul>
<li>ABOUT</li>
<li>SKILLS</li>
<li>WORK</li>
<li>CONTACT</li>
<Button class="smoothScroll">
<div>
<a href="#top">Click Me to Scroll back to the top</a>
</div>
</Button>
</ul>
</footer>
<!--Custom JS-->
<script src="js/scripts.js"></script>
</body>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous">
</script>
</html>