bsa - final design
TRANSCRIPT
-
8/13/2019 BSA - Final Design
1/36
The Remaking ofwww.bibsocamer.org
The website ofThe Bibliographical Society of America
http://www.bibsocamer.org/http://www.bibsocamer.org/http://www.bibsocamer.org/ -
8/13/2019 BSA - Final Design
2/36
Contents
I Introduction Slide
II The Original Website Slides 4-
Original Site Map Slide
III Competitive Analysis Slides 9-1
IV User Research Slides 14-2
New Site Map Slide 2
V The Redesign Slides 28-3
Sketches Slides 29-3
Wireframes Slides 33-3
VI The Prototype Slides 35-3
-
8/13/2019 BSA - Final Design
3/36
ReinhalterHudsonBrown (RHB) is a boutique design agency managed bpartners Lauren Reinhalter, Rob Hudson and Laura Brown. RHB wapproached by the Bibliographical Society of America (BSA) with a request foproposal for the redesign of their website.
RHB s goal in the redesign was to create a highly functional website that woulrepresent BSA s professionalism and purpose while meeting its usersexpectations and information needs. This document sets out the processundertaken by RHB and the resulting prototype.
I. Introduction
-
8/13/2019 BSA - Final Design
4/36
II. The Original Website
RHB s first step was to collect information from BSA s website that wouldprovide a complete understanding of its current content, navigation andorganization. Two deliverables were created:
A Content Inventory , which hierarchically sets out each item of contthe site including pages, links, etc.
A Sitemap , which visually depicts the navigation/organization of the sitincluding hierarchical relationships, etc.
Know from whence you came. If you know whence you came, there absolutely no limitations to where you c
Jam
http://www.goodreads.com/author/show/10427.James_Baldwinhttp://www.goodreads.com/author/show/10427.James_Baldwin -
8/13/2019 BSA - Final Design
5/36
Original Homepage
-
8/13/2019 BSA - Final Design
6/36
Content Inventory
-
8/13/2019 BSA - Final Design
7/36
Original Sitemap
-
8/13/2019 BSA - Final Design
8/36
Purpose The website provides information regarding the activities and publicathe BSA, although there is no statement of the society s homepage .
Content The Content Inventory shows that there are approximately 20 pagedocuments in HTML, PDF and Word formats.
Design The visual design is unsophisticated and primarily uses the colors blue,and white, as illustrated on the homepage . The design is incopage to page within the website.
Organization/Structure
Navigation of the website is accomplished through a left-handas seen on the homepage , which contains 16 higher category menulimited second and third level hierarchy. In the absence of grouped content, the site structure is unintuitive as illustrated by the explosiMap . The navigation is also inconsistent from page to page within the w
Maintenance The website was built some time ago and is not professionally maintaine
Initial Observations
-
8/13/2019 BSA - Final Design
9/36
In the next stage, RHB conducted a competitive analysis in order to build astrategy for the redesign.
The goals of the competitive analysis were:
to see how BSA compares to its competitors in terms of conten
structure and navigation to learn about websites maintained by scholarly societies and find any
industry norms to gain design insights which might aid the redesign.
III. Competitive Analysis
-
8/13/2019 BSA - Final Design
10/36
RHB selected three competitor websites with comparable purpose and/odesirable functionality and compared them on the following dimensions:
The Criteria
Homepage
Does the homepage look professional?
Does the homepage convey the purpose of the site?How many content items are on the homepage?Is the homepage layout pleasing in terms of design, formatting ,etc.?Is multimedia used?
NavigationIs there a search capability?What is the main navigation tool?Is the global navigation and page templates consistent from page to page?
Are links indicated obviously and consistently?Is it clear to the user where he/she is located on the website at any given point?
Site OrganizationIs content grouped together logically (like with like)?Is the site structure intuitive?How many menu items are listed on the navigation tool?
ContentIs content appropriate to needs of the audience?Is news and/or new content presented in a way that indicates how current it is?How are publications handled?
How are forms formatted?Is there a way for users to connect through social media?
-
8/13/2019 BSA - Final Design
11/36
The Competitors
The Music L
New York Library Club
-
8/13/2019 BSA - Final Design
12/36
Similar content among all competitors (including BSA), but BShomepage, organization, structure, and navigation compared poorlyand thus appeared less professional.
BSAs site lacked many consistent norms for websites of scholarlysocieties , such as consistent global formatting, navigation and userlocation indicators; top placement of navigation bar; a search option, etc.
Each competitor utilized unique methods for presentation ofpublications and forms.
Results of the Analysis
-
8/13/2019 BSA - Final Design
13/36
Based on the competitive analysis, RHB devised several design directiorecommendations for BSA s redesigned website:
informative, uncluttered homepage (up to 3-4 pieces of content ato 10 links)
statement of purpose on the homepage no more than 8 menu items in the primary navigation tool
secondary navigation tool follow content grouping of competitors, e.g. About Us, Publications
Awards blog or news feed to handle current content links to social media
Design Directions and Recommendations
-
8/13/2019 BSA - Final Design
14/36
RHB identified three main user groups:
Academics InformaProfessio
Students
IV. User Research
-
8/13/2019 BSA - Final Design
15/36
RHB follows a user-centered approach to design and in the next stage of theprocess, they sought a better understanding of these three user groups.
In particular, the goals were to understand these users :
backgrounds , including their education, technical capabilities etc. information needs from scholarly and professional websites information behaviors , such as how they interact with and what they
expect of these websites
A User-Centered Approach
-
8/13/2019 BSA - Final Design
16/36
Qualitative Research Methods - Questionnaire
RHB chose to use a questionnaire because it was convenient to: reach a broad audience
work within the time-constraints allow for direct comparison of results
Particular attention was paid to: order and flow of questions construction and explanation of questions
format options for answers pilot-testing
RHB created the questionnaire as a group using Google Forms. The partnersdistributed it individually to their allocated user groups.
-
8/13/2019 BSA - Final Design
17/36
Qualitative Research Methods - Questionnaire
range answer
sliding-scaleanswer
answerclarification
demographicquestions atbeginning
-
8/13/2019 BSA - Final Design
18/36
Qualitative Research Methods - Interview
RHB chose to use interviews because the method: allowed for comparison of results
allowed for flexibility with restructuring/rephrasing of questions provided deeper insights with follow-up questions
Particular attention was paid to: the order and flow of the interview/conversation a neutral setting
the use of open and closed questions when necessaryRHB created the interview protocol as a group, following a similar pattern ofquestions to the questionnaire and with attention paid to the context of theusers. The partners interviewed individuals from their respective user groupsindependently, following a semi-structured approach.
-
8/13/2019 BSA - Final Design
19/36
Qualitative Research Methods - Findings
AcademicsUsers are internet savvy and usethe internet to do research
Users are members of aProfessional/Scholarlyorganization
Users participate in social media
Users utilize a site search orbrowse a navigation menu to findinformation on a website
Students
Users are internet savvy withstrong research skills andconduct/read their researchmostly digitally
Users expect certain items, suchas about us, news, events, toappear on a homepage
There is a student community thatprovides a basis for informationsharing, including social media
Users expect to be able tonavigate websites through thenavigation menu
Information Prof
News, information oprimary reasons to vscholarly/profession
Online forms are premethod for applicati
Social media not conimportant as means current
Most users prefer brnavigation menu to fneed
-
8/13/2019 BSA - Final Design
20/36
-
8/13/2019 BSA - Final Design
21/36
Personas and Scenarios - The Academic
During weekly office hours betweenclasses at the University of NorthCarolina, Dr. Denise Latham is working onher laptop making a PowerPointpresentation for an upcoming class on19th century book history. Since herstudents are in their first year of school,she wants to give them advice about howto get more involved in the field and startnetworking with other professionals. Shedecides she will give a short presentationon professional organizations related to
the topic of the class. She wants toencourage her students to attend eventsand conferences, and perhaps becomemembers of organizations that interestthem so she begins to compile a resourcelist with organizational websites. Tocomplete the presentation, Dr. Lathamalso needs information on scholarship orfellowships for which her students can
apply in order to fund their membershipand event fees.
-
8/13/2019 BSA - Final Design
22/36
Sarah just arrived home to her shared apartment inBrooklyn. She had a long day interning at the MorganLibrary s Conservation Center followed by an evening
class. Her phone ran out of battery in the afternoon andshe is feeling a little irritated and fatigued. Not in themood to socialize, she goes to her room.
Sarah heads over to her desk, sits down and turns onher laptop. A couple of friends in class had mentionedthe Bibliographical Society of America s upcoming
Annual General Meeting. Apparently, esteemedprofessionals, including a Morgan Library historian,would be speaking there. She sees an opportunity todemonstrate her interest in her profession and minglewith co- workers. As she couldn t use her phone on theway home, she now goes to Google on her laptop andsearches for the society. She is interested in findinginformation about the event and student memberships.
Personas and Scenarios - The Student
-
8/13/2019 BSA - Final Design
23/36
Personas and Scenarios - The Information ProfessionalJohn had joined the Bibliographical Societyof America as a graduate student studyingEnglish literature, but during the busy time ofgoing to library school and making a career
shift, he allowed his BSA membership tolapse. Now that he has settled into his new
job at Huxley University, having spentseveral years immersed in libraries andspecial collections, John would like tobecome involved once again in the world of18 th century literary scholarship. SinceHuxley has an excellent collection of firsteditions of Jonathan Swift, he wants torenew his BSA membership and propose apanel discussion on 18 th Century PoliticalWriting for the next annual meeting. Johnsits down at the computer in his office andsearches for the BSA website, so he canapply for membership online and find
location, schedule, and other informationabout the annual meeting.
-
8/13/2019 BSA - Final Design
24/36
Further User Research - Card Sorting
Based on the user research, it was decided that Academics were the primaryusers of BSA s website, with students and professionals as secondary users.
RHB conducted a second stage of user research with Card Sorting.partners each held two face-to-face open card sorts of 45 cards usingOptimalSort. The goals were to:
gain a deeper understanding of users mental models when ha
websites identify patterns in users' expectations for the grouping and labelling ocontent
gain insights regarding overall structure and organization of the BSAwebsite to inform RHB s redesign
-
8/13/2019 BSA - Final Design
25/36
Further User Research - Card Sorting Findings
Several findings became apparent after collecting and analyzing the sixresponses to the card sort exercise:
Participants created similarcategory labels
4-7 logical navigation labelswere sufficient
A multi-level hierarchy emerged
-
8/13/2019 BSA - Final Design
26/36
The results of this card sort exercise provide clear instruction for improving thesite s organization and depth:
Homepage navigational menu items can be reduced from 16 to fiv
The original flat organization can be reorganized into a four-levehierarchy
Clearer and more consistent labelling can be created based on sort data
Based on its complete user research findings, RHB was able to proporedesigned sitemap for BSA.
Further User Research - Card Sorting Design Directions
-
8/13/2019 BSA - Final Design
27/36
Redesigned Site Map
-
8/13/2019 BSA - Final Design
28/36
Armed with an understanding of the content of BSA s current website and itsusers information needs, behaviours and contexts, RHB progressed redesigning the website. Starting with rough sketches, the partners graduallynarrowed their ideas to refined sketches, then digital sketches then wireframes.When they had decided upon the final design as a group, they produced aworking prototype.
Design is a plan for arranging elements in such a way as best to accomplish a particula
Ch
V. The Redesign
-
8/13/2019 BSA - Final Design
29/36
In order to produce as many ideas as possible, RHB s partners workeindependently to hand-sketch designs following the 6-8-5 method.
Rough Sketches
-
8/13/2019 BSA - Final Design
30/36
Refined Sketches
RBH s partners theneach chose the bestof their initial 6-8rough sketches and
created 2-3 morerefined hand-sketched designs.
-
8/13/2019 BSA - Final Design
31/36
RHB s partnerseach transferred
their sketches todigital form (usingBalsamiq) to refinetheir best ideas andeasily communicatethe design. They
met and critiquedeach other s designsand togetherdecided upon adirection for theprototype.
Digital Sketches
-
8/13/2019 BSA - Final Design
32/36
Based on theagreed design
direction, RHB spartnersindividuallycreatedwireframes, thevisual
representationof the skeletonof the site, forselect pages.
Wireframes
-
8/13/2019 BSA - Final Design
33/36
Wireframes
UsingOmniGraffle
and BalsamiqRHB spartnerscreatedrefineddesigns for the
paths thatwould betested in theprototype.
Wi f
-
8/13/2019 BSA - Final Design
34/36
Wireframes
VI Th P t t
-
8/13/2019 BSA - Final Design
35/36
VI. The Prototype
Task 1
Learn about the BSA,read about bibliographyand apply for a BSAmembership.
Task 2
Read about the typesof Events held by theBSA. Find the date ofthe next Annual Meetingand look at the programof the Annual Event heldin 2013.
Task 3
Search publicawith keywordincunabula. search results tabs and facetsview two fullpublications inBiblioshare.
Live prototype available at: http://share.axure.com/41NOWC
http://share.axure.com/41NOWChttp://share.axure.com/41NOWChttp://share.axure.com/41NOWC -
8/13/2019 BSA - Final Design
36/36