Pittsburgh Night Owl

A responsive Website Dedicated to the bars of Pittsburgh


Timeline: 2 weeks
My Roles:  UX Researcher, UX Design, Developer
Team: Michael Anderson, Tiffany Wang
Methods: Paper Sketches, Wireframes
Tools: HTML, CSS, JavaScript, Sketch


Problem: Pittsburgh has many bars and active nightlife surrounding it. However, much of the information people would want to see such as the type of bar, or the type of client it attracts is relatively hard to find. Many of the current websites that gather Pittsburgh's nightlife feel outdated and are unintuitive.

Solution: We designed and coded the Pittsburgh Night Owl, a responsive website that would allow users to easily find bars through several sorting options. We created a "drink of the week" section would feature a tavern's signature drink that would be updated weekly, giving the site value to not only visitors to Pittsburgh, but to locals, giving users incentive to return.


Research:

We examined numerous websites and informational sources people often visit when looking for restaurant or bar information. We examined and compared the information presentation of several sites including larger ones, like Google and Yelp, as well more local websites like BarSmart. We found several key areas to focus on when presenting information in a clear way. We studied best web design practices to make sure our content felt modern, and to ensure that the website transitioned well between different types of displays and resolutions. 

 

Design:

Interface ideation:

Dotw Sketch.JPG
Bars Page Sketch.JPG

When first drawing sketches we created several different iterations of the multiple pages. We played with several types of layouts and site designs.  We based our decisions on making the site simple, while looking sleek, and clean. To do this, we designed the site using a card layout to present the information in an effective manner. Using a card system minimized the amount of actions users would have to take to access the information they wanted to find. 
 

Sketch Wireframes:

When creating medium-fi sketch wireframes, we tested out various iterations of how to present the card system. We experimented with and chose to use darker colors representing the aesthetic of nighttime and picked colors that complemented the images presented on the site. We also examined how tested out how interactions would look on the website.


Final Website and Interactions:

While coding the website, we focused on creating natural transitions that occurred smoothly and slightly slowly so that users could follow what every action did. We edited images to create an attractive collage when presenting them side by side. We also wanted to try to make the interactions work between different display types and keep them consistent