


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.

H+N MAGAZINE page
RESPONSIVE + MOBILE DESIGN
I designed custom menus for desktop/tablet/mobile.



Home

About

Exhibitions Drop-down

Past Exhibitions

Current Exhibitions

Current Exhibitions

H+N Magazine Home

Home Issues
