Hanny’s Restaurant & Bar
UX/UI Case Study for a Responsive Website Re-Design
Project Background
Hanny’s is a high-end restaurant and bar located in heart of downtown, Phoenix, within the historic Hanny’s Department Store that was built in 1947. It is an iconic attraction in the downtown area and has established a popular reputation for high-volume dining service, cocktails, and its collection of curiosities in the form of interior installations.
Within recent years, Hanny’s has received more competition in the area. Under speculation, the restaurant and bar have never needed an up-to-date website due to its popularity by reputation in the area, until now. Due to a booming downtown industry, Hanny’s has received some criticism for its lack of an up-to-date website compared to some of its competitors in the area. Whether or not this may cause harm to the success of Hanny’s business, I have volunteered my time as a UX/UI designer to help re-design Hanny’s current site to stay competitive in the area as well as create a cohesive brand identity.
Research & Analysis
Goals
Identify current flaws in the present website
Understand consumers want and needs while browsing a restaurant website
Understand the stakeholder’s goals for the new website
Methodologies
1:1 Interviews with stakeholders and consumers
Competitive Analysis of top three competitors in the area (including Hanny’s)
A brief analysis of Hanny’s current website
1:1 Interviews with Patrons and Stakeholders
Brief interviews were held with three patrons and two current managers on site.
Key Insights
-Patrons want to know what to expect before they arrive at a restaurant(photos, reviews, sociability, and menus)
-Managers want the website to have information that can reduce the number of people calling in for information( reservations, directions, updated hours )
Competitive Analysis
Key Insights:
-Menus should be located on Homepage
-High-quality photos of the interior, food, and drinks are abundant
-Reviews should be located on the Homepage
-Link to COVID Guidelines should be highlighted and noticeable
-Almost all restaurant websites consider a “Careers” page for hiring
-Phone number, email, and address of the restaurant is either in the footer or available on a “Contact” page
Research Findings
Patrons and newcomers need to know what to expect before they arrive at a restaurant. It is important to read reviews, be able to view quality photos, and get a sense of the restaurant atmosphere prior to making a decision of going or not.
Hanny’s managers need to reduce the number of phone calls and give customers general information without having to call the restaurant.
Hanny’s current website lacks a lot of general features compared to competitor’s websites in the area. This includes(but is not limited to):
-Careers page
-Public or Press Reviews
-Quality Photos of interior dining space and sociability
-COVID Guidelines(more than a single sentence)
Defining and Exploring
Persona Development
For the remainder of the project, I would have to keep in mind the core goals and pains of Hanny’s potential user’s. Based on my 1:1 interviews, I would keep in mind two different personas: The Patron and The Manager. Each have equally important needs for the new website, so during the remainder of my exploration of the potential website, I would have to keep in mind both of these personas.
Feature Prioritization Matrix
To begin thinking about how the website should function, I used the insights from competitive analysis to create a simple feature prioritization matrix. This matrix would help me define what content should be available on the website, as well as how important that content is for Hanny’s personas. Features as online ordering and making reservations are low and/or not even considered because Hanny’s doesn’t take reservations nor do they have online ordering. Features such as high-quality photos and reviews are important due to Hanny’s unique interior design, installations, and established reputation in the area, making those essential features for Hanny’s new website.
Site Map
A site map was created in order for me to beginning thinking about the layout of content on the website. Due to the lack of complexity, a card sort was not necessary for this process, I merely used my competitive analysis and the feature priority matrix to map out the most effective map for the new website. Some of the variations from the current website would include menus and reviews and the homepage, and a new career page.
Wireframes
Figma was used to create wireframes of some of the main pages for desktop and mobile. Considering the amount of foot traffic in a downtown area, it would be beneficial to include the “Getting Here” Page available for mobile as well.
Style Tile
During my recent work with Hanny’s menu design, I was able to utilize the style tile to create a cohesive brand identity for the website. Now, the website’s typography, color palette, and logo iterations would all reflect the overall Hanny’s aesthetic. This would help potential patrons receive a better understanding of Hanny’s atmosphere and tone.
Prototypes and User Testing
I moved forward with high-fidelity screens for Hanny’s website, ensuring that the main pages included all the information the user would need was easily accessible such as hours, COVID guidelines, menus, quality photos of the atmosphere, and the food and drinks, as well as clear navigation for “Getting Here” and “About” pages
The “Getting Here” page featured more clear CTAs and titles. Also, because Hanny’s is in a central location to the downtown area, I included a section that list the top 6 attractions with links to directions to or from all of them. It is frequent that patrons will either call in for directions or ask employees for directions to these places.
Because Hanny’s is a Historic Landmark in the downtown area, patrons frequently ask about the history and curios. The redesigned “About” page helps section the information with a clear text hierarchy and blocked sections. It also includes its own section for COVID safety since the old page failed to imply any guidelines at all. Doing a competitor analysis would show that this has become very important to all restaurants recently due to the COVID pandemic.
A/B Testing
To evaluate the overall success of Hanny’s new web design, I had four participants test each website: the old one and the new one.
Results:
Participants noted that the new design is easier to digest the information and navigate
Participants rated the overall usability of the new design 8 on a scale of 10
All participants felt that the new design was aesthetically more pleasing and accurately depicted Hanny’s branding identity
All participants found the menus easier to access than on the old design
Moving Forward
Hanny’s was my first responsive website redesign. Doing a strong competitive analysis was key to the success of this project. Moving forward, I would practice branching out to competitor’s patrons and include their insights and opinions on Hanny’s old website. Reflecting on the project, I feel the research was limited by not including patrons of different restaurants. Overall, the new responsive redesign was successful to current patrons of Hanny’s.