Examples of My Work

Human-Computer Interaction Design

Primary v. Secondary: A Visual Guide to Scientific Sources

For the UW-Tacoma Library, my team was assigned a task to design a how-to guide to bridge to the gap between novice and expert users. I had the opportunity to conduct an expert inquiry, sketch out the team's ideas, produce prototypes and mockups, and perform usability testing. My principal role was to create the HTML pages of the guide and the essential graphics. The guide was mainly visual - a collection of annotated screenshots from primary and secondary examples that would give the user a clear and simple idea of what to look for.

The Design Cycle:

1. A lot of time was spent on brainstorming ways to help students with tasks in the library using plenty of sticky notes.

2. Our design team voted on the tasks. We decided to design a guide to help novices differentiate between primary and secondary scientific sources.

Brainstorm ways to help students with tasks in the library.

3. The initial sketch of our how-to guide was overwhelming. We did not know how to organize all our information in an easy to follow way:

The First Sketch.

4. We turned to the librarian, who served as our expert user. We asked the librarian many questions about the differences between primary and secondary sources, especially across disciplines.

5. A pivotal point in the development of our how-to received from the contextual inquiry was that visual cues or examples were really powerful in quickly identifying primary and secondary sources.

6. The Sales Pitch: A collection of annotated screenshots from primary and secondary examples that would give the user a clear yet simple idea of what to look for. Below is the visual cue example we initially designed:

The Sales Pitch.

7. First Attempt: We used the existing library website and added three buttons that took the user to the annotated examples. The problem was that the existing page was buried deep in the library website and was rather noisy with the existing text:

First Attempt.

8. Usability Study: We tested our mockup on our expert and four novices and also received comments from our design expert.

9. Total Redesign: Because of the how "noisy" the first attempt was, we decided for our next iteration to create a separate website instead of embedding content on the existing library page. This would enable us to control the pages and to easily guide users to the right places.

10. The Final Product: At the end, we implemented a separate website for our how-to guide. We envisioned that a link under the resources page of the library website would be added to take the user directly to our how-to guide.

The Home Page:

Screenshot of the final product home page.

The Inside Page: Note the blurring and dimming effects used on the example to guide user's eyes to the annotation.

Screenshot of the final product inside page example.