-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlibrary-architecture.html
214 lines (188 loc) · 12.2 KB
/
library-architecture.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
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<header role="banner" class="header">
<a href="/" rel="home" class="name__container">
<span class="name__intro">my name is</span>
<span class="name">Summer Saleh</span>
</a><!--end name class-->
<nav class="primary-nav" role="navigation">
<ul class="primary-nav__list">
<!-- <li class="primary-nav__item"><a href="https://summersaleh.github.io/#resume" class="primary-nav__link">Resume</a>
</li> -->
<li class="primary-nav__item"><a href="#work" class="primary-nav__link">Work</a>
</li>
</ul><!--end primary-nav__list-->
</nav><!--end primary-nav-->
</header>
<div class="access-container" id="access">
<h1 class="access-title">Taylor Community Library Information Architecture</h1>
<h4 class="work-copy" style="margin-bottom: 1rem;">The Taylor Community Library’s mission is to provide knowledge and information to the users of their site. Their users need to be able to complete all tasks such as: finding the library catalog, information about student reading program times, reserving a meeting room, etc. The site’s current state is overwhelming with so much information being put out it would take a user a long time to find what they are looking for. It is important for the site to be simple, concise, and easy for the user to navigate.</h4>
<div class="flex-container-column">
<h3 class="access-subtitle mb05">Project Plan</h3>
<h4 class="work-copy mb05">Tasks:</h4>
<ul>
<li>Developed an interview protocol for discovering user needs</li>
<li>Interviewed stakeholders and synthesized the user research results.</li>
<li>Created content analysis, a classification scheme, and a site map.</li>
<li>Evaluated of taxonomy and labeling. Changed the structure of the navigation systems and organized schemes to streamline a more efficient searching process</li>
<li>Iterated and Finalized</li>
</ul>
</div>
<div class="flex-container-column">
<h3 class="access-subtitle mb05">User Research & Personas</h3>
<p class="mb05">I started by interviewing two of the librarians at my local library. I asked them a series of questions that I had in advance from a screener I made. Although I had a prepared a list of questions to ask the stakeholders It was not ridged and built more questions based on the answers I received. I grouped the main user types into three groups: Child, Adult, and Senior. From what I discovered, the users browse the shelves for books or media, borrows print books, research topics that interest them, get help from the librarian. Online they use the site to search the library catalog, get basic library information, reserve books, renewed books, read book reviews, paid fines, reserved meeting rooms, etc.</p>
<img class="img-size-moflex" src="images/personas/persona_img1.png">
<img class="img-size-moflex" src="images/personas/persona_img2.png">
<img class="img-size-moflex" src="images/personas/persona_img3.png">
</div>
<div class="flex-container">
<div class="flex-1">
<h3 class="access-subtitle mb05">Task priority by persona table:</h3>
<p class="mb05">Afterwards I created a list of tasks that best suited the users needs based off of the personas in order of priority.</p>
</div>
<div class="flex-2">
<img class="img-size" src="images/personas/table_img1.png">
</div>
</div>
<div class="flex-container-column">
<h3 class="access-subtitle mb05">Sitemap</h3>
<p class="mb05">Then I created a sitemap to show my intended structure for the website and recruited participants to test through its usability.</p>
<p class="mb05">After going over the results with the participants I found a few structure changes that I decided to make. The library location and hours were put under the ‘Contact Us’ tab on the tree which caused confusion for all of the participants so I iterated and placed it at the top of the page above the search bar since that is something people look for often and try to find quickly.</p>
<p class="mb05">The other tasks were simple and easy to complete. I placed ‘Contact Us’, ‘Donate’, and ‘Careers’ in the footer of the page because that is where those are typically found on a site so users would most likely scroll to the bottom first to check.</p>
<ul class="indent-list">
<li>Top Nav</li>
<ul class="indent-list">
<li>Home</li>
<li>Location & Hours</li>
<li>Library Catalog</li>
<ul class="indent-list">
<li>Navigation with filter for users to narrow down their search</li>
</ul>
<li>Pay fine or Fee</li>
<li>About Us</li>
<ul class="indent-list">
<li>FAQ</li>
<li>History</li>
<li>Policies</li>
</ul>
<li>Event</li>
<ul class="indent-list">
<li>Calendar</li>
<li>Friends Group</li>
<li>Book a classroom visit</li>
</ul>
<li>Volunteer</li>
<ul class="indent-list">
<li>Volunteer Application</li>
<li>Homework Help</li>
<li>Teach a Class</li>
</ul>
</ul>
<li>Footer</li>
<ul class="indent-list">
<li>Contact Us</li>
<li>Donate</li>
<li>Careers</li>
</ul>
</ul>
</div>
<div class="flex-container-column">
<h3 class="access-subtitle mb05">Navigation Structure</h3>
<p mb05>I chose to create a horizontal drop down navigation bar that shows the categories of the site in a simple and understandable way. The horizontal nav worked well because I had a limited amount of categories on the page and they were short enough to fit. The nav and header would be sticky on the page so when the user scrolls it would scroll with them so I felt there wasn’t a need for a vertical navigation with the same information. The drop down was successful because the users can see the next level category without having to load a new page. On the ‘Library Catalog’ screen I had the horizontal navigation as well as a vertical filter</p>
</div>
<div class="flex-container">
<div class="flex-1">
<h3 class="access-subtitle mb05">Low Fidelity Wireframes</h3>
<h4 class="work-copy mb05">Home Screen:</h4>
<img class="img-size" src="images/personas/library_img1.png">
</div>
<div class="flex-2">
<h4 class="work-copy mb05">Events drop down on home screen:</h4>
<img class="img-size" src="images/personas/library_img2.png">
</div>
</div>
<div class="flex-container">
<div class="flex-1">
<h4 class="work-copy mb05">Volunteer drop down on home screen:</h4>
<img class="img-size" src="images/personas/library_img3.png">
</div>
<div class="flex-2">
<h4 class="work-copy mb05">About Us drop down on home screen:</h4>
<img class="img-size" src="images/personas/library_img4.png">
</div>
</div>
<div class="flex-container">
<div class="flex-1">
<h4 class="work-copy mb05">Library Catalog Home:</h4>
<p class="mb05">Once the user selects the ‘Library Catalog’ link in the navigation header they are taken to a new page with a filter to search for books. Whenever the user updates the filter the area with the big box will refresh with the updated search requirements.</p>
</div>
<div class="flex-2">
<img class="img-size" src="images/personas/library_img5.png">
</div>
</div>
<div class="flex-container">
<div class="flex-1">
<h4 class="work-copy mb05">Library Catalog Filter Drop Downs:</h4>
<h4 class="work-copy mb05">Format Screen</h4>
<img class="img-size" src="images/personas/library_img6.png">
</div>
<div class="flex-2">
<h4 class="work-copy mb05">Content Screen</h4>
<img class="img-size" src="images/personas/library_img7.png">
</div>
</div>
<div class="flex-container">
<div class="flex-1">
<h4 class="work-copy mb05">Audience Screen</h4>
<img class="img-size" src="images/personas/library_img8.png">
</div>
<div class="flex-2">
</div>
</div>
</div>
<footer class="c-footer" role="contentinfo" id="work">
<div class="l-container">
<ul class="l-grid l-grid--wowee-zowee">
<!-- <li class="l-grid__item">
<a href="/anf1" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">Abercrombie Outerwear Visual Filters</h3>
<p class="c-block__desc">Tested variations of outerwear visual filters with current/potential A&F shoppers to gain qualitative insight on how users prioritize attributes when shopping for outerwear, and if this changes between fashion/functional outerwear.</p>
</a>
</li> -->
<!-- <li class="l-grid__item">
<a href="/anf2" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">Abercrombie PDP Subcategories</h3>
<p class="c-block__desc">Observe users' behavior as they interact with 5 design variations of subcategories on PDP, collecting qualitative feedback and identifying any points of friction and survey users on understandability, ease of use, perceived values, and overall preference of the design variations.</p>
</a>
</li> -->
<!-- <li class="l-grid__item">
<a href="/dating-app-analysis" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">Dating Apps Analysis</h3>
<p class="c-block__desc"></p> -->
</a><!--end c-block-->
</li><!--end l-grid__item-->
<li class="l-grid__item">
<a href="/accessibility" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">FabFitFun Accessibility Evaluation</h3>
<p class="c-block__desc">This project through Kent State required performing an accessibility evaluation using the three methods that we learned about – automated code inspection, manual code evaluation, and experience walkthrough - as well as reporting the results of your evaluation and providing recommendations.</p>
</a><!--end c-block-->
</li><!--end l-grid__item-->
<li class="l-grid__item">
<a href="/library-architecture" class="c-block c-block--boxed c-block--link">
<h3 class="c-block__title">Taylor Community Library Information Architecture</h3>
<p class="c-block__desc">The Taylor Community Library’s mission is to provide knowledge and information to the users of their site. Their users need to be able to complete all tasks such as: finding the library catalog, information about student reading program times, reserving a meeting room, etc.</p>
</a><!--end c-block-->
</li><!--end l-grid__item-->
</ul><!--end l-grid-->
</div><!--end l-container-->
</footer>
</body>
</html>