Responsive Website

Client: Black Rabbit This is a speculative project I did without Black Rabbit involved
Timeline: 2 weeks
Team: Self-directed with feedback from mentor and peers
Deliverables: Responsive website and branding
Role: UX Design / UI Design / Web Design
Problem: Black Rabbit lacks a modern website and social media presence and though located in the heart of Greenpoint, one of Brooklyn hippest neighborhoods, it fails to give the information customers have come to expect before visiting a new business. In order to keep up with their competitors and attract customers unfamiliar with the neighborhood, they need a responsive website that reflects their brand.

Objective: Redesign a responsive website for Black Rabbit and develop their branding.

 Empathize

Market Research

My research showed that Black Rabbit is in a really great position to be successful. Brooklyn has experienced the largest growth in the nightlife sector and median incomes have been on the rise in Brooklyn compared to all other NYC boroughs. Williamsburg and Greenpoint (Black Rabbits territory) are constantly listed as the best neighborhoods for night life and these neighborhoods continue to grow in population every year.

With some understanding of the market, I began to analyze the competition.

competitive analysis

After some evaluation of Black Rabbits direct and Indirect competition, it was clear to me that Black Rabbit has a great opportunity to develop an aesthetic, user friendly on brand website. All of Black Rabbits direct competitors fail at providing a pleasurable web experience and Black Rabbit has a great opportunity here to provide one.

PROVISIONAL PERSONAS

For my provisional personas, I stepped out of my work space and took a stroll around town having a beer or two (or three) with a friend at the various competition around town. I gandered at the motley crew I would find myself surrounded by and took note. This was probably my favorite bit of research, hah!

This rowdy bunch were on my radar and I felt I knew just how to find them. Next I prepared for my interviews.

1 ON 1 USER INTERVIEWS

I decided to head out during the evening hoping to find my personas in their element. I walked the area around Black Rabbit and other popular bars, interviewed patrons inside Black Rabbit as well as patrons of a bar directly across the street from Black Rabbit. Going off a pre-written script of open ended questions, I interviewed five participants. Here are my transcripts of those interviews. This was an interesting experience to say the least. The participants were predominantly “loose” and due to our shared environment responded to me with an almost blunt honestly. One participants even believing I was playing out some game just to hit on her… Oddly, this character study, if you will, did come into play during my design; offering insights to the temperament users might have when approaching a site for a bar.

empathy map

From here, I read through my transcripts and jotted down observations onto an empathy map. I broke my map down into, Thinking + Feeling, Saying + Doing, Seeing, Hearing.

And from here drew patterns which lead me to insights for our users needs

These are needs of my users: Need to know where Black Rabbit is, need to know whats on the menu, need to know their is positive atmosphere and need to see some reviews from trusted sources. Seems pretty basic at a glance, but simplicity is often a greater challenge.

persona

OK so im getting the picture here, now I will apply my insights, needs and secondary research into a user persona. Tom is an amalgam of my research thus far and I think represents the user to focus on. He searches for bars online and makes his decisions based on imagery and atmosphere. He is also averse to taking risks and is always looking for trusted sources or friend recommendations. If Black Rabbit’s site can draw in Tom, I will have succeeded.

Define

POV STATEMENTS & HMW QUESTIONS

Taking the needs of my persona, Tom, and looking at the insights of the empathy map, I generated point of view statements which lead to the projects, “How Might We?” questions. Once again, things don’t get too deep. I want to ensure a fast and fun experience for a client who sells “good times” so lets get the big questions right.

BRAINSTORMING

This session lead to some wacky ideas. An animated talking rabbit? I think not. But, this is a great way to get those idea out on the table so I can see clearly how they do or in this case, do not work. Simple is better. Less is more. Website trends within this sector are successful for a reason and my brainstorming sessions is confirming why.

BUSINESS & USER GOALS

It was here that I took a moment to think about how I would be affecting Black Rabbits bottom line. This is when booking events became a priority. Before this point, I hadn’t considered anyone but the user, but Black Rabbit’s site should do more than provide information to users, it should also grow Black Rabbit private party business.

FEATURE ROADMAP

The features are getting more defined by the moment, this is a perfect time to set some priorities. After strong consideration, I decided the Menu and Events pages were the highest priority. Tom, my persona would think “Should we meet here? Whats on the menu? Oh cool events!”

Ideate

SITEMAP

Time to start building my foundation, nice and simple with a focus on global navigation.

TASK FLOW & USER FLOW

Super simple design with heavy emphases of task flow. This isn’t a five star Michelin restaurant, its a fun local bar, let’s keep that vibe going with the online presence.

LOW FIDELITY WIREFRAME SKETCHES

Ive got a solid understanding of how the site will function so let me lay the visual ground work. I like to work in the box as much as I can, so my initial sketches were done from the whiteboard directly into Sketch. I based my idea off the design of their physical menu, top to bottom with a global header displaying hours of operation and location.

MID FIDELITY WIREFRAMES

From my quick sketches, I refined here and there and put together some greyscale wireframes that would serve as screens used in my prototype. Lots of tightening things up, getting my math even and keeping continuity with size and placement.

I began work on the mid fidelity responsive wireframes as well, stacking elements naturally as they hit breakpoints.

Adding in a few defining elements like a placeholder logo and basic imagery, I built my mid fidelity prototype for testing. Visually, I am not even close, but my goal here is to see how users flow through the sites features so I can make adjustments where hesitation or failures occur.

The prototype can be found here

Test

Usability test plan

My usability test plan consisted of two scenarios and a total of four tasks.

Scenario 1: One of your friends has mentioned they had a great time at Black Rabbit last week. You head to their site to check it out.

Task 1: Navigate the site and browse the menu
Task 2: Navigate the site and find Black Rabbits location

Scenario 2: You are looking for a venue to book a private event and someone has told you Black Rabbit can accommodate.

Task 1: Navigate the site and browse the menu
Task 2: Navigate the site and find Black Rabbits location

Usability findings

With my laptop, I walked around areas of Brooklyn asking people to take part in my usability test. I was fortunate enough to be walking around on one of the nicest days of the summer; people were largely feeling well and enjoying the day and I was able to find 6 people at various places. My findings are below!

affinity map

Once again, carefully reading through my transcripts I plotted my observation on an affinity map. This time focusing on “Successes” and “Failures”. This was particularly helpful regarding my integration of Instagram, revealing my natural bias and assumptions. These in person, moderated think out loud tests never fail to provide me with a perspective I would never have seen otherwise.

Once I had my observation down and organized, I set out to find patterns

mood board

I now had solid data for where I should prioritize my work, from here I can begin thinking about high fidelity wireframes, but I need to define the brand before I do that, to help myself focus on the overall visual statement. I’ll first start with a quick mood board.

A good amount of focus here on the 60’s and 70’s. Something about that retro visual language and color palette really vibes with Black Rabbit. I didn’t want to lose the classic 1920’s NYC Irish pub vibe though, so I made sure to incorporate Art Deco line work and typography. The mood board can be found here

logo design

I leaned in on the Art Deco aesthetic and began working on a logo design

style tile

and from here I kept the vibe going and made a style tile.

high fidelity wireframes

Bringing it all together I did my best to craft a site Black Rabbit would be proud of and focused on keeping the vibe warm and friendly without losing that classy New York history. For me, this is a great start to distilling (no pun intended) the atmosphere Black Rabbit has in droves along with the modern trends and patterns that drive the service industry in the online arena.

high fidelity prototype

The next steps will include more testing so I put together a high fidelity prototype from my screen here. Though I never had the opportunity to test this prototype, I feel it would be effective in revealing my next priorities and iterations.

ui kit

The current UI Kit for Black Rabbit… Always a work in progress

Reflection

Working on a website for a bar is more challenging than you might think! Focusing on the warm atmosphere that Black Rabbit possesses was the driving factor in both the navigation and visual design of the site and keeping an eye on Tom was paramount.

WHATS NEXT

Moving forward, more testing would provide further data for iterations. From there, I would focus on facilitating the review section, create more robust and elegant elements for booking an event and finally I would write up some real copy to bring it all home!