Zachary Bucek - HAIR+NAILS Art Gallery

Synopsis:

CLIENT

HAIR+NAILS Art Gallery

DATE

2017 - 2021

TEAM

Ryan Fontaine & Kristin Van Loon - Gallery Owners and Art Directors

Zachary Bucek - Product Designer and Developer

MY ROLE

As Product Designer, I led the team through the design thinking process steps of empathizing, defining, ideating, prototyping and testing.

I created a Custom WordPress Theme for updating dynamic content + Cohesive layout and typography templating + Use of Google Analytics to measure awareness and impact of gallery's website

PROJECT OVERVIEW

A complete website build with new identity development. Collaborative concept was created in partnership with the owners Ryan & Kristin.

WEBSITE FRAMEWORK

Custom WordPress theme with jQuery

DEFINING THE PROBLEM

Because Ryan and Kristin manage all of their print and digital content, they needed a website that would allow for dynamic content creation and easy archiving.

It was important for them to have a brand consistent online presence that allowed them to measure the success of their promotional efforts and gauge the gallery's visibility and impact when applying for grants and art fairs.

IDEATING THE SOLUTION

I maintained elements of their offbeat brand while also creating a polished identity to complement a more clear and accessible website.

By customizing the WordPress Content-Management-System, I created an easy and maintainable process for keeping their website and messaging current.

NOTABLE OUTCOMES

We built on their loyal local audience in the community and expanded their market reach. Starting in September of 2019, they represent their artists at the Chicago Invitational Presented by NADA each year.

Throughout the COVID-19 pandemic lockdowns and mass protests for social justice of 2020, the website served as an anchor tying the gallery to the community through live events and performances.

Process:

CARD SORT TO DEFINE TEMPLATE NEEDS

We started with an open sort of twenty labels, pulling out potential main pages and cutting redundancies. From there, we ranked the labels and main pages separately so that we could ensure online gallery visitors would be able to get to their destination most efficiently.

With a closed sort, we were able to roughly map out the site's structure. Working in this way, we rapidly arrived at templating needs and how those related back to the overall information architecture of the website.

Open sort labels + define categories

Ranking open sort labels & categories

Closed sort

Define template types as nav/page/post

SITEMAP + WIREFRAME SKETCHES

By quickly roughing out the website's structural and templating needs, I was able to take advantage of WordPress' template hierarchy that would ultimately create the utility of a Content Management System the gallery owners needed.

I used an iterative approach, testing out layouts with hand-drawn wireframes and what level of customization we would need for each page or post.

Wireframing for H+N Magazine page template with responsive layout

IDENTITY

The H+N Gallery aesthetic and identity is very much about the hand-made art form. After creating dozens of mockups using scraps of paper, glue, and photos, I began to develop a cut-and-paste identity.

Early homepage concept

Early H+N Magazine concept

Pattern concept #1

Pattern concept #2

HIGH-FIDELITY WIREFRAMES

About page

Current Exhibition

Past Exhibitions

Exhibition Post-page

News (Press)

H+N Magazine

Finished Product:

HOMEPAGE

Sometimes a teal door and custom painted sign (by local sign-painting legend Forrest Wozniak) can really make a storefront. Inspired by a film-strip, I created landing page that captures this offbeat South Minneapolis cultural institution.

EXHIBITIONS PAGES TEMPLATES

I designed three distinct layouts for the Exhibitions pages.

Current Exhibitions page

Upcoming Exhibitions page

Past Exhibitions page

PAGE + POST TEMPLATES

Each type of custom-post has a unique template. Below, are full-screen grabs of the Current Exhibition, Events, and Press pages.

H+N MAGAZINE

The website features a section displaying full scans of the handmade zines for each exhibition. This section features a unique logo and navigation, similar to the experience of popping out the magazine supplement from the main newspaper.