The document summarizes the work of a design team that created prototypes to improve the usability of Hypatia, a database system for managing metadata records. The team conducted requirements gathering, created personas and wireframes, developed a paper prototype, tested it with users, and created an HTML prototype based on findings. User testing revealed usability issues which were addressed in the HTML prototype, such as adding fields and clarifying labels. The team presented their work to the client who felt the design simplified the metadata evaluation process and kept it within one workspace. Some implementation challenges were noted regarding coding, search functionality, and ensuring the evaluation form was understandable.

1. Revolutionizing the Hypatia
Metadata Experience
Group B:
Kat Chuang, Craig MacDonald, Dave Marino, Lily Rozaklis

2. Outline
• Introduction
• Design brief & requirements gathering
• Design goals
• Our approach
– Step 1: Wireframes & Personas
– Step 2: Paper Prototyping & User Testing
– Step 3: HTML Prototype & Demo
• Conclusions & implementation

3. Introduction
• Who we are:
– Kat Chuang, iSchool PhD student
– Craig MacDonald, iSchool PhD student
– Dave Marino, iSchool MSIS student
– Lily Rozaklis, iSchool PhD student

4. DESIGN BRIEF & REQUIREMENTS
GATHERING

5. Design Brief
• IPL resources are stored as URLs and metadata in a
database system called Hypatia
• The existing IPL metadata needs to be converted to
DublinCore standard by “crosswalking”.
• Any inconsistencies with the existing IPL metadata will
limit the effectiveness of the crosswalked metadata
• IPL metadata must be checked for quality assurance.
– Non-specialists: MLIS students at Drexel and other
participating universities
– Existing metadata is evaluated using the Hypatia Metadata
Evaluation Form.

6. Requirements Gathering
with Mike Galloway
Required: Recommended:
•IPL required metadata fields must •Auto-complete within metadata
include: Main elements
Title, Abstract, Keywords, Main •Form validation for required fields
URL, Author, Publisher, Email, and •Improving the Help icon to ensure
Headings/Subject Headings. that it is intuitive
•Display records •Resolving the Item Relationship
•Navigating between fields and/or status page after metadata changes
records are saved
•Looking at the resource •Automatically check for duplicate
•Rubrics of field format records
•Edit and View mode •Ordered fields
•Ease in locating pending records
•Overall presentation of metadata
elements that are not used and/or
hidden

7. Requirements Gathering
through Analysis of the Existing Tool
• Problematic Elements:
– The Search by Item Number feature is hidden.
– Poor feedback when a search returns no results.
– Old search criteria doesn’t clear out unless you hit “reset” button.
– Poor feedback after completing the “Resolving Items” page.
– There was no way to translate website information unless using an
external translation tool.
• What Doesn’t Work:
– Overall appearance is not pleasing.
– The “Body” field is bulky, unused space on every metadata record.
– Unnecessary presence of the first “Status” drop-down box.
– Too many options for the “Record Status” drop-down box.
– Need to work between windows containing the metadata record and
resource.
• What Works:
– Presence of the “View Website” link right next to the URL.
– Noticeable consistency in terminology and icons, as well as font color
and capitalization.

8. Major Usability Problems
Working in multiple windows
Look and feel is outdated and not pleasing
Overall workflow is inefficient
Pages are too cluttered
Many problems with searching (e.g., too
many search fields)

9. DESIGN GOALS

10. Design Goals
Major Usability Problems Possible Solutions
Working in multiple windows One window with three panes:
1.Metadata record
2.Resource
3.Metadata evaluation form
Look and feel is outdated and not Update the look with modern web
pleasing design elements
Overall workflow is inefficient Keep it simple: improve navigation
and reduce clicks
Pages are too cluttered Reduce amount of non-essential
information
Many problems with searching Improve search interface and provide
(e.g., too many search fields) more options for filtering search
results

11. Brainstorming Ideas
• Efficient
• Modern
• Sleek
• Helpful
• Simple
• Easy
• Intuitive

12. Our Approach
• Step 1:
– Wireframes/sketches and Personas/scenarios
• Step 2:
– Paper Prototype and User Testing
• Step 3:
– HTML Prototype

13. STEP 1: WIREFRAMES &
PERSONAS

14. Step 1: Wireframes & Personas
• First, identify the pages that must be
included:
– Log-in
– Basic Search + More options
– Advanced Search
– Search Results
– Evaluation
– Evaluation finish
• Next, create four personas that illustrate the
characteristics of typical Hypatia users
• Then, sketch wireframes with potential design
solutions

15. Example 1: Wireframe and Persona
Name: Jane Hamels (Student/Employee)
Age: 25
Gender: Female
She is a part-time graduate student and works full-time with a Digital Library.
She is Senior Director of Information. Her job is to manage a small team of
graduate students as well as to maintain, edit, and validate the metadata.
School Activities Part-Time master student at Drexel University
Work Activities Full-Time employee at the IT School at Drexel University
Goals, Fears, Her career goal is to be a manager of a digital library. She has
Aspirations become very knowledgeable with the information stored in the
Digital Library. Her biggest fear is being a strong manager. Her
only managing experience is with students.
Demographic She grew up in the Philadelphia area, all of her family lives in
Attributes the Philadelphia area. Her fiancé and his family also grew up in
the area. Her and her fiancé are Italian and she spends every
holiday with both families and sees her entire family every
Sunday for dinner.
Computer Skills, Very knowledgeable with computers. Understands database
Knowledge, and structure and management, information retrieval, reporting, and
Abilities a little programming. Pretty good at interpreting problems and
finding solutions in a timely manner.
Technology Jane loves creating and editing metadata and researching new
Attributes ways to manage information and metadata over the internet.
Technology Attitudes Jane feels information technology is improving the quality of life
for most humans
Quotes “I would love for our search tool to be more efficient and
effective”

16. STEP 2: PAPER PROTOTYPING
& USER TESTING

17. Step 2: Paper Prototype & Testing
• After an initial set of wireframes for each
page, we then developed paper prototypes
• As a group, we critiqued the prototype of
each page and made additions or changes
as necessary

18. Existing Hypatia: Log-in & Search

19. Paper Prototype: Log-in

20. Paper Prototype: Advanced Search

21. Existing Hypatia: Search Results

22. Paper Prototype: Search Results

23. Existing Hypatia: Evaluation

24. Paper Prototype: Evaluation

25. Paper Prototype: Evaluation Finish

26. Paper Prototype: User Testing
Correct Action Sequence Comments/Observations:
Scenario: 1. User enters login and password
Your name is Jane Hamels and you are a master’s information in the Hypatia login screen
student in IST at Drexel. You are enrolled in the and clicks “Log in”.
course Digital Libraries (INFO653) with Dr. Xia Lin. Success Failure
Your assignment this week is to evaluate five IPL 2. User enters the term “Cricket World” in
metadata records in Hypatia and you just realized that the Basic Search box and clicks
you didn’t complete the final two records. You also “Search”.
can’t find the e-mail with the link to the records you are Success Failure
supposed to evaluate and you have to rely on your 3. User clicks on item number or record title
notes. The assignment is due tonight but you have to to open record.
get dinner ready and pick up your fiancé from work, so Success Failure
you need to get this assignment done in the next 20 4. User evaluates the resource by filling out
minutes. Here are your notes: the Metadata Evaluation Form.
Success Failure
5. User clicks “Submit” to complete the
evaluation.
Success Failure
6. In window that pops-up, user enters
record number 12345 and clicks “Go”.
Success Failure
7. User evaluates the resource by filling out
the Metadata Evaluation Form.
Success Failure
8. User clicks “Submit” to complete the
evaluation.
You can’t make out the item number, but looks like the
first record is titled “Cricket World”. The second record Success Failure
9. User clicks “Hypatia Home”.
number is clearly 12345.
Success Failure
10. User clicks “Logout”.
Success Failure

27. Usability Findings: Evaluation
Finding #4:
Clearly indicate “Title”
Finding #5: Finding #3:
Change “Subject” to
Finding #6: Consider resizing panes
“Subject Heading(s)”
Find a way to visually Finding #2:
Finding #1: indicate if field is empty Make “open in new
Add “Alternate URL” field window” link more visible

28. Usability Findings: Evaluation Finish
Finding #9:
Relay to Dr. Khoo and IPL
that evaluation form is
Finding #7: confusing
Add a “Close” button to Pop-up Window
Finding #8:
Add “Log-off” button
to Pop-up Window

29. STEP 3: HTML PROTOTYPE

30. Step 3: HTML Prototype
• Final changes made to prototype based on
usability findings:
– Changed the “Subject” to “Subject Heading” in the
metadata record on the evaluation screen
– Added the word “Title” to mark the resource’s title in
the metadata record on the Evaluation screen.
– Added the words “none given” for any metadata
within the metadata record that contains no metadata.
– Added an alternative URL metadata element in the
metadata record on the Evaluation screen.
– Added a log-off button on the Thank You pop-up
window
– Added a “close” symbol on the Thank You pop-up
window.

31. Step 3: HTML Prototype
• Additional changes not addressed in user
testing:
– Added new color scheme and incorporated
CSS for visual appeal
– Increased font size for easier readability
– Changed name to “Hypatia 3.0”

32. HTML Prototype: Demo
Start Demo

33. Conclusions
• Members of the team met again with Mike
Galloway:
– He described design as “simple and clean”
– He observed that the design made the
metadata evaluation process appear “easy”.
– He appreciated the three-pane layout
because non-specialists could work in one
place.

34. Implementation Issues
• Coding would likely need review and modification
since no professional programmer was on the team.
• The basic search function envisioned by the design
team is Google-like (i.e., one text box), which may
pose a challenge.
• The pop-up window that appears after submitting
the results of the quality assurance must be
technically feasible in terms of Google Doc
allowances.
• We stress another review of the questions asked on
the Hypatia Metadata Evaluation Form to make the
verbiage more understandable for non-specialists.

35. QUESTIONS?