Synopsis:
CLIENT
Minneapolis Community & Technical College
DATE
2017 - 2019
TEAM
Elissah Becknell - Zine Collection Librarian and Project Supervisor
John Daniels - Library Website Administrator and Technical Consultant
Zachary Bucek - Product Designer and Developer
MY ROLE
Led the team through the design thinking process steps of empathizing, defining, ideating, prototyping and testing.
Designed and developed a custom WordPress theme with custom fields for updating featured zine content through a CMS.
Created original illustrations and how-to diagrams.
Coded front-end search functionality for the existing zine database.
PROJECT OVERVIEW
The MCTC Library hired me to create a website for their mostly unknown Zine Collection of 15,000+ titles with the goal of reaching a larger audience.
I created a unique and immersive interactive experience with the physical collection online. The website was both a viewport into the collection and a waypoint to the handmade artifacts.
The deliverables for the website included a custom WordPress theme with an optimized CMS, original identity, and instructional templates for making a variety of zine formats.
WEBSITE FRAMEWORK
Custom WordPress theme with PHP + jQuery
DEFINING THE PROBLEM
I interviewed library patrons and sent out a survey through the Library’s Facebook page. We found that the discoverability of the collection online was almost non-existent. If someone found the link to the searchable database, they most likely were referred there directly by a librarian on site.
Because zines are handmade with limited print runs, their discovery is typically at zine fairs or distributors of small press publications.
The website needed to serve the following purposes:
Archiving aid for the librarians using the existing Zine Collection database + Research tool for students, zine enthusiasts and creators + Promotional platform for expanding awareness of the collection and zine creative culture
Archiving aid for the librarians using the existing Zine Collection database + Research tool for students, zine enthusiasts and creators + Promotional platform for expanding awareness of the collection and zine creative culture
IDEATING THE SOLUTION
I created three distinct personas and mapped their journeys. With the tactility of zine making as our focus, the new website would augment the existing experience of the physical collection rather than replacing it.
The website would serve both virtual browsing of newly scanned zines and maintain the ability to search the entire collection.
Accordion menus would permit in-depth didactic content about the Zine Collection’s history and zine making culture more broadly.
How-to diagrams for making different types of zine formats would create an interactive and participatory dimension to the collection.
NOTABLE OUTCOMES
The Library saw an increase in online interest in their zine collection by 113%
After measuring high bounce rates soon after the initial launch, we modified image-file sizes and introduced lazy loading to reduce loading times and sustain interest as content and user volume increased.
The customized WordPress theme and CMS package allowed student workers to easily upload new zines to the growing browsable catalogue featured on the homepage.
The website was used as a learning aid and promotional tool during a week-long symposium about the history and importance of the Library's Alternative Media Collection.
Process:
INFORMATION ARCHITECTURE
I worked to balance casual browsing and directed searching. Through the sidebar widget, users could browse other content through sub-pages organized by post date and categories.
New featured zines would be added to the website as custom posts with custom fields, allowing for the easy and consistent input of metadata by website editors.
As the website would grow with new image content, so would new categories. The homepage slider would feature dynamic images with hyperlinks so that these updates could be easily found.
Early wireframe sketches for page/post templates building on initial site map
Flow diagram integrating sitemap hierarchy with WordPress templating paradigm for custom site theme
LOW-FIDELITY WIREFRAMES + MOODBOARD
I conceived template layouts as the initial sitemaps evolved, making the later integration of the website's identity easier. Every UI component would support the unifying structure of the website.
EARLY MOCKUPS + PROTOTYPES FOR RESPONSIVE DESIGN
I mocked up mobile-tablet-desktop layouts to help begin outlining the front-end frameworks needed to create the website’s functionality. Some components, such as “blog” were removed or replaced when we began testing prototypes.
IDENTITY + ILLUSTRATIONS
I created illustrations for the about, search, and how-to pages of the site, for each of the responsive mobile-tablet-desktop layouts.
The about page graphic is an abstraction based on a photo I took of the physical collection's display.
The structure and interactivity of the landing page of the site re-creates the look and feel of the display at the on-site location. It emphasizes the typographic and graphic invention of zine covers.
Finished Product:
NAVIGATION
On the homepage, users of the website can stumble on new discoveries by moving left or right and clicking on zine covers in the hero slider.
Homepage
Zines page
ORGANIZATIONAL STRUCTURE
On the zines page, a visitor to the site can find zines through a hybrid navigation scheme that includes: by chronology within the main content or by subject category or most recent posts within the page sidebar.
On the about, how-to, and search pages, accordion menus permit a greater volume of text and infographics without sacrificing the concision and clarity of each page template's hierarchy.
About page
QUERYING THE DATABASE
A search interface was built for the existing database of the Library Zine Collection. Patrons could search for titles not featured on the website so that they could discover them in person on-site.
Search page
How-to page
INFOGRAPHICS
An important element of zine-making culture is the accessibility of the medium's modest material requirements. The how-to page invites everyone to give zine-making a try.
This page features infographics that diagram a step-by-step process for creating different zine formats.
RESPONSIVE DESIGN + INSPIRATION
As a visual designer, the Swiss school approach of emphasizing typography within a grid-system is a source of constant inspiration
Desktop view
Mobile view
SCREEN RECORDING OF THE LIVE SITE
VISUAL DESIGN FOR SOCIAL MEDIA + PRINT
Events promoting the Zine Collection were important to creating awareness and excitement around the new website. I created additional graphic material for print and digital publication that expanded upon the new online identity.
Poster for a presentation at the library promoting the collection & new website
