bsa - final design

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/


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


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


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


5/36

Original Homepage


6/36

Content Inventory


7/36

Original Sitemap


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


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


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?


11/36

The Competitors

The Music L

New York Library Club


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


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


14/36

RHB identified three main user groups:

Academics InformaProfessio

Students

IV. User Research


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


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.


17/36

Qualitative Research Methods - Questionnaire

range answer

sliding-scaleanswer

answerclarification

demographicquestions atbeginning


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.


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


20/36


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.


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


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.


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


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


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


27/36

Redesigned Site Map


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


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


30/36

Refined Sketches

RBH s partners theneach chose the bestof their initial 6-8rough sketches and

created 2-3 morerefined hand-sketched designs.


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


32/36

Based on theagreed design

direction, RHB spartnersindividuallycreatedwireframes, thevisual

representationof the skeletonof the site, forselect pages.

Wireframes


33/36

Wireframes

UsingOmniGraffle

and BalsamiqRHB spartnerscreatedrefineddesigns for the

paths thatwould betested in theprototype.

Wi f


34/36

Wireframes

VI Th P t t


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


36/36

bsa - final design

Documents