Jessamyn Smallenburg
User-Experience Design and Web DevelopmentHuman-Computer Interaction Projects
Interface Design
Project: Borders Books and Music Holiday WebsiteProject Definition: During the weeks spanning the end of October and the beginning of November 2010, the Borders Books and Music Website underwent an extensive redesign in anticipation of the 2010 holiday season.
My Role: I worked on the front-end design, using CSS to format and position page elements. On the Home page, I worked on formatting the lists of popular books, lists that include New York Times bestsellers, top-rated books, and staff picks. On the holiday cooking and e-reading pages, I developed CSS layouts with image maps created in Dreamweaver.
Tools Used: Adobe Photoshop & Dreamweaver, CSS, HTML
> Click to visit the Borders home page
Website & Interface Design
Project: Health Sciences Scholars Program WebsiteProject Dates: February 2010 - Present
Project Definition: I recently completed the design of the departmental website for the University of Michigan Health Sciences Scholars Program. Informational content on the site includes a message from the HSSP director; profiles of administrative staff, resident advisers, and graduate student instructors; and information about courses and advising, to name just a few. The primary audiences for the site are prospective students and their families; the site also facilitates the sharing of program information across departments at the University of Michigan.
My Role: I created the design and architecture of the website, including the CSS presentation, HTML content formatting, and Flash-powered, dynamic behavior. I contributed content to the 'Enrichment,' 'Socials,' and 'Contact' pages. Specifically, I wrote the description of and recommendation for the Alternative Spring Break program on the 'Enrichment' page, and I designed the Flash slide shows on the 'Socials' and 'Contact' pages.
Tools Used: I used Adobe Flash, Illustrator, and Photoshop from the Adobe Creative Suite 5 package, CSS and HTML. I tested this website in multiple browsers to ensure widespread accessibility. With this project I acquired a detailed understanding of and experience with cross-browser compatibility considerations.
> Click to visit this site
This screen capture depicts the interface to our visualization, showing the trail map in the center, weather data at the top, and motion sensor and light intensity data on the right hand side.
Our final report can also be downloaded from the blog and from Scribd
Information Visualization
Project: Hiking Trail Information VisualizationDates: January - April, 2010
Class: SI 649, Information Visualization
Project Definition: We designed an information visualization interface for a system that tracks hikers in remote locations and on arduous hiking trails. We used Google Android's sensors for collecting environmental data about the user's surroundings. This data is then displayed in four compartments on the visualization interface. The four components displayed include a graph of the cell phone user's motion in a three-dimensional field; a map depicting the user's location; light intensity; and weather data. We determined that collecting this contextual data would be very useful for tracking and monitoring the status and safety of users hiking on dangerous terrain.
My Role: I helped design the interface to the visualization, and I took the lead in writing the final report. I generated maps using Google Earth, conducted extensive specialized research, and had a fantastic teamwork experience. I also contributed to the development of the use-case scenario, a substantial part of the justification for the creation of our interface.
> Visit the Trail Visualization Blog.
The screen capture above shows the interface we designed using Adobe Illustrator, which we later programmed into an interactive prototype.
Interface and Interaction Design
Client: TechSmithProject: TechSmith Meeting Software
Dates: September - December, 2009
Class: SI 682, Interface and Interaction Design
Project Definition: My team worked on the development of a new software system to support the meeting process. Our client, TechSmith, was interested in the development of new meeting software to support groups of 12 to 15 people. The procedure we followed is detailed on the website linked to below, and involved the processes of contextual inquiry, user research, usability testing, and prototyping.
My Role: I used Axure RP Pro to make the prototype interactive. I was also the website manager for the duration of the project, and we rotated the role of project manager. The Axure prototype had a number of active components, including the ability to check schedules and create a new meeting.
> Visit the project website for SI 682 TechSmith
The approach to the database interface was minimalist to emphasize functionality. This image of the interface displays the search field on the left, the login feature in the upper right, and the Michigan logo and photo of Arnheim on the left and right, respectively.
Database Design
Client: University of Michigan Fine Arts LibraryProject: Arnheim Database Design
Dates: September - December, 2009
Class: SI 572, Database Application Design
Project Definition: My team developed a database system to manage a collection of books belonging to the UM Fine Arts Library. The Fine Arts Library was in possession of a collection of books owned by Rudolph Arnheim, an perceptual psychologist and art and film theorist. This project was interesting because not only did I implement exciting technologies, I also learned about a brilliant theorist in psychology, which is the field I earned my undergraduate degree in. The database features included an interface to search through the collection, and an add/delete feature to modify the collection. We also created a log in system to ensure database security.
My Role: My principle role was to develop a search engine using PHP and MySQL. The search engine read through the entries in the database, i.e. the books in the collection, and matched the word(s) entered against the title, keywords, author, and subject associated with each database entry. It then returned all results containing the searched-for words in any of these fields. I also used XHTML and CSS to create the application, and I solely authored the installation guide for use by the client.
Information Architecture Strategy
Project: James Joyce Ulysses VariorumDates: September - December, 2009
Class: SI 658, Information Architecture
Project Definition: Develop an information architecture strategy report detailing the structure and content of a James Joyce Ulysses Variorum. I developed a strategy report and presentation independently for this project. I developed Personas, Scenarios, and an IA strategy report based on users, context, and content. I also constructed page mock-ups and a website flow map using Adobe Photoshop and Illustrator.
My Role: I worked on this project independently.
> View my Information Architecture Strategy Report here.
This interface shows the State of Michigan resources page. The main feature on the page is a JavaScript accordion and navigation menu.
Website Development
Client: Health Sciences Scholars ProgramProject: HSSP Clearinghouse Website
Dates: July - September, 2009
On the Web: School of Information Internship Portfolio
Project Definition: Design and create a brand new Clearinghouse website for the Health Sciences Scholars Program, with extensive resources for the target audiences: current and prospective HSSP students. I designed 100% of this website, and used a number of interesting Web 2.0 technologies to add force to the content and design. I also collected and formatted resources for the web, organized all site contents, wrote copy for the website, and implemented all of the website's features.
> Visit the HSSP Clearinghouse Details Page
Page 1 of 2 depicting the navigation layout that I proposed to improve the information architectural facets of the database Web interface.
Usability Evaluations
Client: UM Center for Chemical Genomics (CCG)Project: M-Screen Database Evaluation
Dates: May - August, 2009
Project Definition: As usability science interns we conducted a set of User-Experience evaluations to analyze the usability of the CCG M-Screen database. M-Screen is a tool used for High-Throughput Screening (HTS). HTS is used for testing large numbers of compounds for their chemical reactivity, and is a key component of the drug discovery process. I was hired to evaluate the usability of the database because it had been installed recently, and system users were encountering several difficulties using the new system.
My Role: I moderated several user testing sessions, conducted a heuristic and comparative evaluation, and ran card sorting sessions. I designed an interaction flow map, conducted a survey with system users, and analyzed survey results. The survey research report is available upon request by potential employers. My mentor at the Center for Chemical Genomics was very impressed with my research reports, and he has incorporated many of my recommendations into the system.
See this page to see my final report designed for this internship.
> See the SI Internship portfolio for this project
User-Centered Research
Interdepartmental Program in Classical Art and ArchaeologyProject: IPCAA Website Redesign Project
Dates: January - April, 2009
Class: SI 622, Evaluation of Systems and Services
Project Definition: IPCAA was interested in having their departmental website redesigned, and my team conducted a number of evaluations on the website to assess its usability problems. The user-experience research cycle incorporated a formal project plan, an Interaction Flow Map, Personas and Scenarios, Competitive and Heuristic Evaluations, Usability Testing, Surveys, and presentations along the way.
My Role: I participated in conducting user tests, and developed two Personas and Scenarios independently. I also built the Interaction Flow Map using Adobe Illustrator independently. I recruited and scheduled participants for usability testing, and I contributed text to each of our reports. I presented our final results to our client at the end of the semester.
> Visit the IPCAA project webpage.
Web Development
Project: Jessamyn Smallenburg Nature PhotographyProject Definition: This website is my official design for my nature photography business. It utilizes JavaScript and PHP to render the content dynamically. The two applications used to create this website are FlickrViewer and SimpleViewer. FlickrViewer retrieves photographic content from photo sets stored in my Flickr account. This website is now live on the Internet; it displays my photographs of landscapes and florals. The landscapes were shot in various locations throughout the course of my travels, including the California coast, Michigan's Upper Peninsula, Yosemite National Park, Grand Cayman Island, and Channel Islands National Marine Sanctuary.
I designed all of the CSS styling, XHTML content, and PHP code configuration.
> Click here to visit this site.
Contextual Inquiry
Client: Michigan Administrative Information Services (MAIS)Dates: September - December, 2008
Class: SI 501, Contextual Inquiry and Project Management
Project Definition: My team conducted an in-depth assessment of the 2006 implementation of an electronic recruitment and hiring system, eMploy. The system's users, comprised of administrative staff across the university, were encountering difficulties with using the system, and as a result, MAIS was planning to implement another replacement system. Our task was to make recommendations for the next implementation process, scheduled to take place during the next two years. We used a variety of Contextual Inquiry techniques, including interviews, interpretation sessions, affinity diagramming sessions, work modeling, and project management.
My Role: My role was to participate in contextual inquiry interviews, help guide the interpretation sessions, and create a work model of my choice to represent an aspect of the user population. I designed one of two cultural models, the first of which depicted the current culture, and second that portrayed the past culture, which we simply termed the "Past Cultural Model." I created this work model to display aspects of the interdepartmental culture as it existed before the planned redesign was announced.