HAIR+NAILS Art Gallery

Website with exhibition and event platform for art gallery in South Minneapolis

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 community and expanded their market reach. In September 2019, they represented their artists at the Chicago Invitational Presented by NADA.  ​​​​​​​
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
Open sort labels + define categories
Ranking open sort labels & categories
Ranking open sort labels & categories
Closed sort
Closed sort
Define template types as nav/page/post
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
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 homepage concept
Early H+N Magazine concept
Early H+N Magazine concept
Pattern concept #1
Pattern concept #1
Pattern concept #2
Pattern concept #2
HIGH-FIDELITY WIREFRAMES
About page
About page
Current Exhibition
Current Exhibition
Past Exhibitions
Past Exhibitions
Exhibition Post-page
Exhibition Post-page
News (Press)
News (Press)
H+N Magazine
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
Home
About
About
Exhibitions Drop-down
Exhibitions Drop-down
Past Exhibitions
Past Exhibitions
Current Exhibitions
Current Exhibitions
Current Exhibitions
Current Exhibitions
H+N Magazine Home
H+N Magazine Home
Home Issues
Home Issues
Issue #21
Issue #21

MORE PROJECTS:

Back to Top