I used a mobile-first approach to the wireframes. I brought my mobile wireframes into the Figma prototyping tool for user testing, but left the tablet and desktop wireframes in a more simplified format. Users got a chance to look at all 3 versions during testing.
Helpful Links
*Red line indicates bottom of screen
Home Page
After completing my survey, I knew the menu and the hours were the most important pieces of information to include, so I made sure to have them on the home page. The hours and address can be seen immediately without scrolling on the mobile and tablet versions of the page. I have direct links to the menu pages immediately following. While the events didn’t score quite as high, I still decided to include them because advertising for upcoming events is a good business move.
User Testing Notes
- Include AM and PM in hour listing
- Include hours and location in footer
- One user questioned if a “Return to Top” here would be useful
Navigation
I thought and researched quite a bit before deciding on a navigation structure. I know hamburger menus have become a bit controversial in recent years, but I felt I had just too many pages to justify any sort of permanently visible navigation for mobile. I did find some pages that had the menu icon in the upper-right corner instead of the upper-left, and I thought that might make it just a little easier to reach with your thumb.
User Testing Notes
- Clicking “Menu” should then reveal the submenu Menu items (Beer, Mixed Drinks, Food)
Beer Menu
Kept it simple. I definitely made sure to include a place for the pricing, as that was very important to my users. Some places I researched included a logo for the beer instead of a photo, which I thought would make it easier to skim than just looking at 20 generic pictures of beer down the line.
The row of icons at the top are “jump to section” links. The arrow in the bottom-right is a “jump to top” button. These features are present in other pages as well.
User Testing Notes
- Differentiate between beers that are “On Tap” and beers that are bottled
- Include Happy Hour / Specials
- Include Calorie Count
Mixed Drinks Menu
There really isn’t a need for sections in a mixed-drinks menu, so I just have the list here. Pictures of the drinks will be located to the side of every entry, and clicking on an entry will bring up a larger scale picure in mobile and tablet.
User Testing Notes
- Again, include Happy Hour/ Special notes, as well as calorie count
- I don’t think users realized they could click on the image to make it bigger. I’ll need to make that more noticeable
Food Menu
I’m thinking food will be a bit of a secondary feature to the drinks here, so I tried to keep it simple. I plan to include photos and clicking on an entry will enlarge the photo.
I had an idea for the bar to sell “snacks”, or junk food such as potato chips, soda, etc. As these are things that people will generally enjoy eating when wanting to sit back and play a few games with friends. My plan is to user-test how popular of an idea this is.
User Testing Notes
- So, my first user pointed out that businesses have to buy licenses to sell various branded snacks (it’s why Subway has their own generic chips). Not a particularly savvy business decision, so I decided to scrap it. However, the user suggested expanding Apps by including “single serving” and “multiple serving” sizes might be a good idea, so I may try to implement that.
- Include a Beverage section for non-alcoholic beverages
- Include a “Specials” section
Game Menu
This is a feature that I’ve seen at 42 Lounge that I thought was pretty great. It’s a nice way to get people to do something together and have a good time. I definitely started with instructions at the top of the screen, right off the bat. Clicking on an entry will bring the user to an external page (likely Wikipedia) that gives a more in-depth description of what the game is about.
User Testing Notes
- Include number of players possible
- Include rating (While not necessary from a legality standpoint because there shouldn’t be anyone under 18 at the bar without parental consent, I think patrons would appreciate having an understanding of what kind of game they could be playing. Rating will help with that)
- Include difficulty
- Again, make link more obvious (clicking on a game entry will take you to an external page that explains the game in more detail)
Events
I organized events by “Weekly” events and “Special” events. Clicking on an entry will bring a pop-up page that has more details on the event.
User Testing Notes
- Make the link more noticeable (clicking on an event will bring a pop-up menu with details and a registration link)
- Include a section for updates/news/cancellations/etc.
- One user thought “Special” was too vague. I should reconsider the language of this section name
Photo Gallery
I organized the photos by events. A user can select a past event to see a gallery of images from that event.
User Testing Notes
- One user suggested a feature to allow users to submit their own photos from the event. I will have to evaluate my time to figure out if mocking up such a feature is feasible, but I do think it is a great feature for the purposes of this bar (contribution to your community)
- My users were a little split on the organization of the page. One liked it and one didn’t (the third user didn’t comment on it). Maybe if I make it more clear what I’m doing, it’ll make more sense (even the one who liked it had to take a moment to figure it out).
- Include photos of the interior of the bar
About Page
This page includes hours, address, Google Maps view of location, and a section to “Meet the Staff”. I thought something quick and simple will allow users to get a quick idea of who their bartenders are without going into a fatiguing amount of detail.
User Testing Notes
- Okay, fine, I’ll admit. All three users wanted actual text to read through in the About section. When asked how much text should be included, the unanimous consensus was “approximately a paragraph. 3-5 sentences”
Contact
A simple contact form with an address, phone number, and a form the user can fill out to email the bar owners.
User Testing Notes
- No additional notes. All three users saw this as a satisfactory standard contact page.
Additional Thoughts
First time user-testing! All things considered, I think I got some good information out of here. I had 3 users test my site – Male (27), Male (27), and Female (54). My third users is outside of my target age group, but she is someone who I know struggles to use sites at times. My thought was if she could figure out how to use my site, then anybody could.
Some additional thoughts on my testing:
- I was worried about my links not appearing obvious, but that’s hard to do on mobile. Now that I see my users not clicking my links, I see that I do need to go back and figure out how to make those more obvious.
- My users had some pretty good ideas for additional information and features to include, so I’m glad for that. They even reminded me of information I had intended to include, but had somehow forgotten!
- While we tested with the mobile version, they did get a chance to look over my tablet and desktop versions. The only comment of note was it was questioned whether having the “Skip to Section” icons were still necessary on the desktop version. I’ll have to evaluate how much content I actually have when I get through the mockups to determine that. Though, I also wonder if keeping them there to maintain consistency between devices is useful. I’ll have to test this again when I get to my Mockups.