Mobile & Website Interaction Design

Zuni Street Brewery

This case study was completed as a UX design student at DigitalCrafts. The purpose of the project was to do human-centered design and create a responsive website. I created a mobile and website prototype.

View Prototype
a prototype image of the homepage within a phone

Timeline and Tools: 11 days, Figma, Miro, Maze for testing, and Zoom for interviewing

Application Research before Interviews
I started off my research with an analysis of Zuni Street Brewery's competitors - Joyride Brewery, Ratio Beer Works, and Epic Brewery. I compared these features below.

a picture of four brewery logos
an excel screenshot showing the findings from the critical feature analysis

Click Here to view the full Critical Feature Analysis

Findings:
Zuni Street has issues with inconsistencies with critical information between various pages of the site. I found poor use of images on site that created wasted space. Lastly, I found broken links on the homepage.

a picture showing problems found on current site
second picture showing problems found on current site with hours of operations
a screenshot showing problems found on current site, on where to apply
a screenshot of a broken link on the current site, this issue has been fixed by owner now

Problem Statement:
The Zuni Street Brewery website is cluttered and unorganized. The discrepancies of information across several pages are confusing to the customer.
How might we simplify the Zuni Street Brewery for a better user experience?

Interviews
I conducted six interviews. Here I was able to find out what users were coming to brewery sites and looking for. I had a mix of broad questions and specific questions.

Findings
The top two main reasons I found to visit a brewery website after interviews were;
1) See what's on tap.
2) To see what food truck a brewery had that day.

The top three items looked for on a brewery site in the hierarchy;
1) Food trucks at a brewery.
2) See what's on tap.
3) Hours.

I used this information to create a hierarchy for the main homepage of the Zuni Street Website.

User Testing of Original Site
I had four users walk through four tasks. I took videos of each user test as they performed the tasks. I wanted to see and hear their thoughts. I asked them to please voice the process they are doing as they go through each task. I also asked them to voice if they were pleased with their paths, and if they ran into problems.

Tasks:
1: How would you find out if the Zuni IPA is currently on tap?
2: Where would you find the location and hours?
3: If you wanted to see live music where would you go to get that information?
4: If you are looking for a job. Where would you go to apply?

Findings:
Task 1: All four users found this task fast and easy. They used the same route. 100%
Task 2: All four users found this task fast and easy. They used the same route. 100%
Task 3: All users found this task difficult. Some clicked in the recurring music to see what music would be playing and the social media pages were not updated. Some looked for a calendar. When they got to the bottom of the events page they all stated, "that the text all blends and you could not see the separation of food from music.
Task 4: All four users had trouble with this task. Each user took numerous different paths to try and find the answer. One user found it but wondered why it's under Food Trucks & Events. One user said they'd just send an email to the general email. Lastly, two users abandoned the task altogether because they checked everywhere they thought it should be.

Proposed Mobile User Flows
After user testing on the original site. I took the issues I saw and decided to change the flow. Below are the proposed changes.

this is a picture of user flows for the site

User Testing Results of Mobile Prototype

Here I had users do the same four tasks as on the original site.
Tasks:
1: How would you find out if the Zuni IPA is currently on tap?
2: Where would you find the location and hours?
3: If you wanted to see live music where would you go to get that information?
4: If you are looking for a job. Where would you go to apply?

Findings:
Task 1: I had 16 out of 17 chose the correct happy path. The task overall was found very quickly. The other user chose to look at the menu first. I also had a 50% misclick rate that showed up in the Maze program I used for the testing. The changes to fix that will be making the clickable area larger.
Task 2: I had 3 different areas that the users agreed on. The majority of the users agreed and looked at the bottom of the homepage. The second largest group looked under the About Us Page. Lastly, the others looked under the Contact Us Page.
Task 3: For this task again having 17 users, 12 testers chose the happy path from the homepage and found the calendar that was created. The other 5 chose to use the hamburger menu first, then click the Food Trucks & Events, to finally find the calendar of events.
Task 4: This task was less difficult than on the original site. Users looked under Meet the Team versus going all over the site. Under the Meet the Team Page there was a Join the Team link that redirects users to the Contact Page.

I still was unhappy with these results. I also had a high misclick rate due to the size of the clickable area. Shown below.

this is a picture showing heat maps and where users touched the screens during testing
this is a picture showing heat maps and where users touched the screens during testing
this is a picture showing heat maps and where users touched the screens during testing
this is a picture showing heat maps and where users touched the screens during testing
this is a picture showing heat maps and where users touched the screens during testing
this is a picture showing heat maps and where users touched the screens during testing

From the results, I decided to add a brand new page called Employment. This was never on the original site nor in my first iterations but it made perfect sense to add this with all the confusion from multiple testings and testers having problems finding this. Below I'm showing a User Flow for this addition.

this is a picture of user flows for the employment page that was created

Prototyping
While I focused on a mobile-first approach in designing the prototype. I did need to have it be responsive for the website. All changes made in my ideations were made on both the mobile and the website versions. Below you can view both ideations.

Mobile Prototype

a picture of all mobile application pages created for prototype

Website Prototype

this is a image of the desktop pages

Outcomes & Lessoned Learned
- I need to make sure that I screenshot all items, pages, and errors found are found while doing research for the case study.
- This goes back to documenting the current state of a website before the site has any changes made.
- During testing; if you have a "link over photo" style button. Make sure you open the clickable area to accommodate user patterns. This happened twice during my testing.
- The client has also updated its website after I shared some of the findings with them.
- I learned how to use a program called Maze(for testing).
- I learned how to use User Feedback to drive iterative design.

Iteration V3 Next Steps
- Link shopping cart to See What's on Tap for Online Shopping.
- Add images of merchandise on the Shop Page.
- Add information for the second location when available.