February 10, 2017

The Rosemont NYC Bar

by Bruno G. Tavares

WordPress, Bar, Website, PHP, and CMS

5 minutes read

A closer look in the process of developing the bar's website

Introduction:

The client wanted to rebrand their existing jazz bar to become a gay bar with jazz nights and so needed a new website that would convey the new direction. The rebranding, general look and functionality of the new website, would need to continue to appeal to the older jazz crowd while drawing new and younger gay patrons. They also wanted the new website to feature their new events schedule: Jazz performances on Tuesdays, drag shows on Wednesdays and Saturdays, Queer/Rock’n’Roll music on Fridays, and art shows on Sundays. In general, the idea was to create a “classy but edgy” new persona and website for the bar that would appeal to art loving patrons of both jazz and gay culture.

Important Client Statements:

1. Initially, “Owners were switching from a jazz bar to a mix jazz bar/queer friendly bar - keep it classy”
2. During development, “Owners wanted to gradually end the jazz bar and become a gay bar”
3. “They wanted a website to display the bar schedule, environment, people and backyard”
4. “The current website had too much scrolling”
5. “They wanted the drink menu displayed prominently on the front page”

Problems:

• • The website had too much scrolling on the front page.
• • The client wanted to make sure people would come to the website and immediately see the - drink menu.
• • Information wasn’t being displayed clearly and correctly.

old website (each block is what is displayed on the screen as you scroll down)

Possible Solutions:

• • Transfer the music listings to a separate events page.
• • Put a detailed drink menu on the front page.
• • Distribute information in the proper locations.
• • Add a header containing the logo and hours.
• • Display content on a jumbotron, with drink menu on homepage, and a navigation bar to about and events.
• • Add a footer containing access to social-media, with bar phone number and email address.

Design Evolution:

While waiting for new photographs of the bar to be supplied by the client, it was difficult to create a new design as the color palette of the old photographs were so distinct. Also, the burgundy, grey and brown colors of areas around the photographs, hindered the development of the new look. Once new photographs were taken, which I was eventually hired to do, going to the bar on a performance night with the laser lights and gay culture in full swing, the design for the new website finally started to take shape. The new photographs changed everything.

trying to distance from the old color palette

Also during the design process, the manager changed his mind on the general concept, he no longer wanted to retain jazz nights but instead simply become a gay/queer friendly bar every night of the week. No more “classy”, instead he wanted the website to convey a “vibrant and fun” atmosphere.

Final Result:

the new website

When opening the website home page, using a regular desktop computer, users see a gif of laser lights behind a photographic slideshow on the right and a drink menu on the left. The home page gives one the sense of actually standing at the bar preparing to order a drink and watch a performance. The laser light gif in the background, photos of the bar and patrons on one side, and the drink menu on the other. The website’s menu bar is located under the slideshow, with links to Events, About and Contact pages. The footer contains links to social media outlets, contact information as well as the address with a link to the map. Both the header and footer have black backgrounds so they blend nicely into the blackness of the background laser light gif, tying everything together.

The events’ page has a full screen background photograph showing a drag queen during a performance, setting the mood of the page. An events api lays on top of the photograph, displaying all the events for the month.

The about’s page has another full screen photograph in the background showing a drag queen performing. Overlaying the background photo, is a brief description of the newly rebranded bar, on the right side, with a photograph slideshow on the right side, showing patrons happily mingling and ordering drinks and attending events. The about page clearly conveys the newly rebranded lively atmosphere.

The Contact’s page has the same background as the about’s page. It contains a contact form so users can put their info and send a message. There is also a map showing the location of the bar.

instructions to customize the content

Lastly, I created a user friendly content management interface, for each page. The interface allows the client to change photos and written information as wanted, able to update events and keep the website as lively as the bar itself. This also minimized any ongoing website maintenance costs.

---