Good spirits only for this Manhattan hangout, off and on the web.

UX/UI Responsive Web Design for The Woodstock NYC. 2018.

UX/UI Responsive Web Design for The Woodstock NYC. 2018.

Black Rose Hospitality was a frequent collaborator with my agency, Mango Concept, and they turned to us again for a new website with the opening of their new bar and pizza joint, The Woodstock NYC. Known for its mix of classy cocktails and chill vibes, The Woodstock oozed style. From the moment you walk in, you get a sense of their unique flavor of laid-back, and so I made it my mission to translate that well-designed atmosphere to their digital presence.

Woodstock-051

Interior seating area of The Woodstock, oozing vibes for relaxation and libations.

Discover

Research and insight into the problem

Starting this project came with less baggage than others, as there was no preexisting site to worry about. The lot was clear, and we could build our house how we pleased. Before starting the foundation though, I wanted to nail down who we were building for, and why they needed it.

Meetings with the owner, director of marketing, and social media lead painted the picture clearly. They had a brand new restaurant garnering loads of glowing press mentions; their visual brand was striking a chord with all of their new visitors; and they wanted a home to broadcast all of that and more to future and former customers.

Define

Synthesis of research and identifying focus areas

I jumped into research, compiling a list of competitors, both direct and indirect, and looking into their web practices. A moodboard was compiled, and I walked The Woodstock team through current web trends and practices. They wanted their site minimal, slick, and succinctly informative, and looking at my research I agreed that it was the route for them.

woodstock-wires

Grayscale wireframes in desktop, tablet, and mobile formats. For desktop, I really aimed to emphasize the imagery, and easing the eye of the user down the page with a funneling hierarchy. 

Design

Ideation and brainstorming solutions

I pooled all of the content I could from them, and subsequently trimmed it down as much as I could. I envisioned clear, succinct copy for the site, using their predesigned assets and imagery to really tell the heart of their story.

I churned out sketches to give them the overview of my thoughts, and we talked through each page of the agreed-upon site map. Heavy emphasis was placed on the home page, and ensuring that the average user’s goal and the business’ goal alike could be accomplished right there. For the user, they needed clarity on location, operating hours, and a sense of what to expect. For the business, it was communicating those while demonstrating quality to seal the deal.

I boiled that down to a visual hierarchy that built itself out as you went down the page. Special attention was given to the mobile layout, as it was expected that most of our prospective users would be visiting on a phone while making imminent plans to go out. Sketches, then wires, and finally visual specs were reviewed, edited, and approved, and it was time to move into development.

woodstock-visual-design

Visual designs in desktop, tablet, and mobile formats, showcasing the branding through the subtle pink background, distinct imagery, and unique assets. 

Deliver

Finalizing the solution and overseeing development

Being a hybrid designer and manager, I shifted gears to oversee development. Though I shared my ideas with them in the sketching phase, I once again met with my two web developers and ensured that we had no potential technical hiccups to worry about. They gave me the thumbs-up, and we pushed ahead. Visual designs were transferred from Sketch into our newly-utilized Zeplin, and we worked together over the course of a week to finalize the site, utilizing WordPress to ensure that our client could make quick and easy fixes anytime on their sporadic schedules. After final QA and review with Black Rose Hospitality, we pushed the site live.

woodstock-menu

The menu for The Woodstock was a large focus of this project, creating a digital version that resembles that of the in-store offering. 

Retrospective

Looking back and looking ahead

Having a blank canvas to draw on was freeing in many respects, but daunting in others. Often the work of UX can feel like acting as an editor, taking what previously exists and trimming the fat while better emphasizing the meat. Instead, for this project, I was starting mostly from scratch. Looking back, I can say that this challenge helped grow my process, for reaching out to users, and drawing upon everything at your disposal, even when it isn’t readily apparent. I’m happy with how the process culminated, and I’m excited to see how their brand grows into the future.

The Woodstock NYC

Team credits

Designer — Zach Dorsett
Developer — Vic Lam
Developer — Paris Mastorakos

See the website at www.thewoodstocknyc.com

Copyright © 2019 Zach Dorsett