Zachary Bucek - MCTC Library Zine Collection

Synopsis:

CLIENT

Minneapolis Community & Technical College Library

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.

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:

Although we started with a focus on awareness and the discoverability of the physical collection, I wanted to use this idea of a browsing shelf to bring users into the online repository of featured zines housed on the website.

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

The WordPress template hierarchy - image courtesy developer.wordpress.org

This early sitemap builds on the sketched sitemap and WordPress template hierarchy above. It includes the user flow from in-page browsing slider and sidebar to sub-content. Optimizing this flow was important to the Librarians who wanted users to be able to easily navigate to individual zine posts while also making it easy to manage dynamically uploaded content by student workers. The "Pages" hold static content, but the sidebar menu helps the user easily pivot back to browsing the featured zines.

LOW-FIDELITY WIREFRAMES + IDENTITY

I conceived template layouts as the initial sitemaps and user flows evolved, making the later integration of the website's identity easier. Every UI component supports the unifying structure and identity of the website.

Homepage wireframe showing responsive designs

Graphics pulled from the web for inspiration

Moodboard showing color and typography next to zne covers from the zine collection. The Reanimation Library provided a good working model for how to balance blog-form content and evergreen information.

MOCKUPS 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.

Skeuomorphic design ideas like incorporating the stitching of physical zines with either staples or thread evolved through iterations of mockups to serve as a layout divider for the main navigation and sidebar menu.

Mobile version 1

Desktop version 1a

Desktop version 1b

Mobile version 2

Desktop version 2a

Desktop version 2b

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 recreates the look and feel of the display at the onsite 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.

MCTC Library Zine Collection