UX Projects at BeeZr
Background
Gobeezr.com (see the image below) is the original website for BeeZr, a “Social Exchange and Gastropub'' in downtown Huntsville, Alabama. BeeZr is a small business collective comprised of four small, local companies: Chandler’s Ford Brewing Company, Champagne Taco Kitchen, Hippea Camper (a plant-based food truck), and Northside Coffee (coffee roasters with a café inside BeeZr). Adults over 21 years old located in the greater Huntsville area are BeeZr’s target customers. Interestingly, Huntsville seems to be a word-of-mouth dominated market, meaning that a positive public reputation is crucial for success. In 2021, Huntsville surpassed Birmingham as the most populated city in the state. This increase in growth suggests that businesses like BeeZr can anticipate an influx of new customers as the city grows. If BeeZr wishes to maintain consistent success, it is vital to address any areas of frustration present in the customer experience.
Although the concept behind BeeZr was meticulously planned, a lack of user experience (UX) research and design is expressed in a few areas, including the mobile website. Since opening in January 2021, BeeZr has been requiring each guest to use their own smart mobile devices to access the menus on gobeezr.com via scanning a barcode coaster. They did not provide a printed alternative or have any plans to do so. Digital menus provide a more sustainable alternative to traditional printed menus, and since BeeZr’s menus frequently change, having the digital menus allows for more flexibility while reducing overhead costs. Guests can access the menu via scanning the QR code on the back of BeeZr coasters, or simply type “gobeezr.com” into a web browser. Research into BeeZr's operations, policy structure, and customer experience identified several issues and areas with room for improvement. There were several usability issues with the mobile gobeezr.com site, which was a major source of frustration among customers that can set a negative tone for the rest of their experience. This finding, in particular, indicated an urgent need to address and revise the pain points in the customer experience in order to improve customer satisfaction and boost profits.
The Customer Experience Research Process Begins!
Customer Experience Questionnaire
To observe how customers move about in BeeZr, I conducted several data-gathering sessions on site. I observed the flow of the customer’s journey at BeeZr from 2:30-4:00pm on Thursday March 11th, Friday March 12th, Saturday March 13th, Tuesday March 16th, and Friday March 19th, taking detailed notes during each session. I randomly selected several different customers to take a short ethnographic survey after my observations of their experience. Additionally, I conducted open-ended, semi-structured interviews of a few participants to gather rich, qualitative data about the BeeZr experience. Lastly, I conducted informal, unstructured interviews with staff to understand certain feedback I gathered from customers. My aim was to gather a varied amount of data from different types of customers, with different experiences.
For a quantitative element, I administered a short questionnaire to 15 different customers (see the image on the left for a copy of the questionnaire used in this study). To add to this data, I conducted four in-depth, open-ended interviews of customers – two of returning and two of first-time customers.
The image above is a birds-eye view of the whole BeeZr floorplan. On the far right is the outdoor patio area, the light green area with several cylinder shapes in the bottom right corner is the Chandlers Ford Brewing brewery area, the taproom is in the center of the building, there is an upstairs mezzanine seating area with the patterned black and white floor toward the left, and the private dining room area all the way in the bottom left. The unique thing about BeeZr is that all of the businesses located within it share the same space. I collected observational data on the customer experience from each of the different sections.
Customer Journey Maps
Above is the BeeZr customer stage timeline I created using miro.com. This timeline shows the average amount of time customers spent in each stage of their visit to BeeZr. A more detailed map of the customer's visit is depicted in the Customer Journey Map below, designed using uxpressia.com. Breaking the customer journey in to stages like this allowed me to uncover pain points and more fully understand what someone goes through when visiting BeeZr, in order to design a customer-oriented experience leveraging an outside-in perspective.
Data Analysis
The graph on the right summarizes the findings from the data collection process. I noticed patterns in responses from first-time customers versus returning customers, so the graph displays the differences in their responses. Of note is that menus had the lowest rating across all three response categories (first-time, returning, all). This finding indicates that accessing the menus caused the most frustration among users.
Word Clouds of Customer Feedback
Below are two word clouds I created using wordart.com to visually represent the feedback I collected from a sample of BeeZr's customers. The first image, in blue and yellow, represents the positive feedback or what customers liked about BeeZr (the biggest/most repeated words showing the most consensus among customers). The second image, in red and pink, represents the negative feedback, or what customers disliked about BeeZr.
Design Solution - BeeZr Rewards App
Since one of the major findings from my research into BeeZr customers was that there was a lack of customer retention. The data indicates that customers notice more issues as they keep coming back and there were no rewards programs available to incentive customers coming back regularly. Since accessing the menus already requires a mobile device, customers can easily pull up the rewards app instead (which also has all of the menus on it - effectively replacing the need for barcode coasters in many cases). This rewards app also gives users an incentive to utilize their mobile devices rather than simply requiring customers to use their mobile devices just to look at the menu - at least this way, customers can directly benefit. Below are three pages of the rewards app prototype I designed, all in wireframe format. I used Balsamiq software to build this prototype and conducted usability tests to evaluate its efficacy.
The homepage of the BeeZr Rewards App wireframe prototype.
The rewards status page of the BeeZr Rewards App wireframe prototype.
The purchase history page of the BeeZr Rewards App wireframe prototype.
Other Recommendations
My first idea for this project was to simply redesign the menus page so that users could access it more easily. For this idea, the plan was to link the QR code on the coasters given to each customer directly to the menus page, rather than the homepage, effectively cutting out one step in the menu access process. Additionally, this report suggests moving all menus onto one page that scrolls, instead of having different pages for different sections, effectively eliminating another step of the menu access process, and keeping consistent with the natural user expectation to be able to scroll through the whole menu. It is recommended that the hyperlink buttons remain to allow for quicker access to each section of the menu. These quick and easy changes result in a 5-part task turning into a 3-part task, which is much more reasonable to the customer. To further assist customers with the technological requirements of BeeZr, perhaps BeeZr could consider implementing a charging station for customers whose phones are not charged, to ensure each customer has full access to all of BeeZr’s unique offerings.
My second idea for a solution to customer engagement and retention was to implement a quarterly “zine” (magazine) of any current or upcoming events at BeeZr, some basic facts about what BeeZr offers, and some coloring pages with the option to enter a coloring-page contest, in an effort to increase customer engagement and highlight the community-based atmosphere BeeZr seeks to achieve. I designed the concept cover for the first issue of the BeeZr zine, affectionately named “BeeZine” for now. The first issue would contain a section briefly discussing basic beer knowledge, a section going over the history of BeeZr, exclusive interviews with staff members, information about any upcoming events, and coloring pages of some of the artwork designed for various Chandlers Ford beers.
More Deliverables
Style Guide
When I first started at BeeZr, I noticed that the branding and marketing of the company were all over the place. There wasn't a lot of consistency in BeeZr's image, which played a role in the inconsistent business that BeeZr experienced.
One of the changes I suggested after collecting research on internal processes was redistributing work tasks in a way that created more room for employees to focus on their strengths. In some cases, employees were moved to different positions. After reviewing the existing staff structure and evaluating the risks and benefits associated with branding/ marketing, the CEO and I agreed that it was necessary to establish a Marketing/Social Media Management role within the company.
BeeZr started off with outsourcing social media management for a few months, which produced better results than before, until ultimately deciding to move that role internally. BeeZr experimented with having several workers contribute to social media efforts, for which the Style Guide was imperative in order to keep users engaged. I created it using Adobe Illustrator.
Ultimately, the Style Guide became a go-to document used by many team members to save time while keeping BeeZr's branding consistent. Overall, the result was increased user engagement and a steadily growing following on social media channels.
Customer Personas
After gathering data on some of BeeZr's customers, I was able to construct three target personas (depicted in the images below). The contextual inquiry for this project found that customers range in age from early 20s to late 80s and about 60% male and 40% female. Customers are evenly split between first-time and returning customers. Below are three personas created from the participant data to illustrate different target customers. Having these personas allowed the team to generate more user-centered designs by creating a sense of understanding and empathy for the customers. Whenever crafting a social media post, event, drink, etc., the creative team would run through the personas to evaluate whether the product would be well-received by our target customers.
BeeZr target customer persona #1: Marko, a fast-paced lawyer who works nearby and visits BeeZr semi-regularly and looks for quick service.
BeeZr target customer persona #2: Allison, an engineer in her early 20s who wants to meet with friends at the cool new places downtown, a first time visitor always looking for fun activities.
BeeZr target customer persona #3: Cameron, a retiree and BeeZr regular who wants printed menus, to pay his ticket in cash, and prefers to not use his phone any more than he has to already.
Sitemap
One project that I was tasked with was evaluating the usability of BeeZr's website. To get started, I created a sitemap of BeeZ'r existing website to assess the website structure and determine which pages are necessary.
Utilizing the sitemap, I was able to get a bird's eye view of the website navigation and uncover some serious issues such as broken links, unclear labeling, and too many clicks required to achieve certain tasks.
Usability Testing: Website Redesign
Paperwork
For the usability testing, I had participants fill out several forms before getting started. First, participants were asked to read through and sign a consent form (see the image below on the left). Next, participants filled out a background questionnaire, in order to establish a baseline prior to testing. After participants filled out those forms, they were given a task list form, which guided them through each task and asked them to reflect on their experience afterward. After completing all tasks, participants filled out a Likert scale survey for more in-depth information in addition to a more open-ended questionnaire for qualitative feedback.
Data Analysis
After collecting all of the data from my observations, surveys, and interviews, I loaded it in to Excel to conduct a few statistical analyses. The objective of this projects was to compare the time it took users to achieve specified tasks on the original website versus the prototyped redesign.
Questionnaire Data
Below are the results of the post usability test Likert scale questionnaire data. The table below on the left in orange shows the feedback for the existing website, to establish a baseline and since half of the participants tested the original website. The blue table below on the right shows the feedback for the prototype.
Time on Task Results from Usability Testing
The graph on the right compares the amount of time (in seconds) that it took for participants to complete each task on the task list. Most notably, the website took participants longer in every category, particularly on task five, which asked participants to locate BeeZr's phone number. Overall, the prototype reduced time on task in every category and every participant was able to complete each task. When coupled with the qualitative data, the results suggest that the prototype succeeded in offering users a more delightful experience.
Graph Organizing Recommendations by Value to Customer/ Value to Business
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla blandit commodo dui, et volutpat nulla iaculis eu. Cras cursus arcu sit amet elit tempor laoreet. Maecenas eleifend rhoncus nibh, sit amet pellentesque magna mattis. Vivamus non est pharetra, volutpat velit id, rhoncus velit. Nam sed hendrerit lorem.
Nunc nec sapien et magna malesuada pellentesque.
The Original Design
The pictures below show the original website design, displayed in mobile XS breakpoint size since most BeeZr customers interact with the website on their mobile devices. BeeZr opted to offer online menus only, so if a customer wanted to look at the menu to see BeeZr's offerings, they were forced to use their devices. My first recommendation was to implement printed menus, although that would have significant cost and manpower associated with it. Alongside having printed menus in some way (since online-only excluded any customers who either did not have a fully functioning smart phone or have difficulty using them.
There were several flaws with the original design. The header is taking up too much page real estate, the homepage photo makes it seem as though this establishment only offers beer, the phone number to call BeeZr is illegible, the aesthetics are lacking overall, and there is no indication that this establishment has other companies operating within it. The hours and location page is confusing to the user and does not adequately convey the operating times of the different businesses within BeeZr. The menus page had too many options and a confusing architectural hierarchy. After uncovering all of the issues within the original design, it was time to revise!
The homepage of BeeZr's original website in mobile XS breakpoint size.
The hours and location page of the original website in mobile XS breakpoint size.
The menus options of the original website in mobile XS breakpoint size.
The Revised Design
The design recommendations that came from this project are represented by the images below. As you can see, BeeZr's branding is much more prominent and the design has an inviting feel overall, to draw in the user. The idea that there are several different businesses within this establishment is much more clear, given the prominent placement of their logos with BeeZr's logo centered near the top, further reinforcing the relationship. The phone number is clear, the header is appropriately proportioned, and the button sizes are big enough to accommodate users with larger thumbs. Keeping with the objective of clearly communicating to users that BeeZr is a collective of small businesses, the hours and location page reflects that each business has its own hours. This layout is less cluttered and easier on the eye. The menu is also broken in to four different sections rather than seven and it, once again, helps reinforce the notion that BeeZr is a small business collective.
The homepage of the BeeZr website redesign in mobile XS breakpoint size. Designed in collaboration with Leilani Pitts and Sydney Young using Adobe Illustrator.
The hours page redesigned to more easily represent the confusing hours of operation for the different businesses within BeeZr.
The menus page with a more simplified navigation structure to reinforce the idea that BeeZr is a small business collective.
HarborTouch Point of Sale System Redesign
POS Questionnaire
The image on the left is the questionnaire I designed in collaboration with my small team and distributed to all of the employees at BeeZr in order to learn more about the specific usability issues present within the HarborTouch POS interface. In addition to this questionnaire, we also collected observational data of employees interacting with the POS interface and followed up with semi-structured interviews. The combination of research methods we chose resulted in rich qualitative and quantitative data that we were able to use to fully understand the issues present within the UI.
From this research, we were able to develop three personas in order to keep our redesign user-centered and ensure that it meets all of the different types of employees' needs.
Staff Personas
Below are the three personas we developed to represent the different types of employees who interact with the POS system. In a company with four different businesses sharing the same space, the employee structure is complex. It is imperative to BeeZr's overall success that the POS system performs efficiently for all of the different types of users because they all operate off of the same POS. The personas we created to represent BeeZr staff are Marko who is a Northside Coffee barista, Zach a server/ bartender, and Lilith, a host. Each persona uses the POS slightly differently in order to successfully complete their work tasks.
BeeZr employee #1: Jess, who has simple tasks to achieve with the POS but still isn't impressed by the system and wishes it was easier to correct mistakes.
BeeZr employee #2: Zach, who is a bartender/ server and relies heavily on the POS to input orders correctly. He is not satisfied with the way that receipts print.
BeeZr employee #3: Lilith, who is a host and relies on the POS to convey the status of all seating throughout the building. Even after using this system for months, she still has trouble navigating.
Wireframe Prototype of HarborTouch POS Redesign
Below are some sample snapshots of the wireframe prototype created for the Point of Sale system redesign project at BeeZr, built in Balsamiq software. After identifying wait times as a major pain point among customers (therefore impacting overall sales) and observing and interviewing staff to discover that the POS system was at the root of the wait time problem, my team and I took on the task of redesigning the layout of the POS system to optimize it for speed and ease of use.
The changes we recommended to the home screen (depicted above) were simple. We just cleaned up the interface with organizing designated sections for different content and clear labeling. Although the differences are subtle, the changes we made drastically increased efficiency and overall usability of the system.
*Prior to my research into the usability of this POS system, the background from the "Host View" (depicted above), was completely black with rearrangeable tables simply floating in blank space. It was my idea to add backgrounds to these views so that the user could orient themselves utilizing landmarks, in order to learn table numbers, therefore increasing efficiency.
More Solutions
Many of the design solutions I came up with to resolve UX issues at BeeZr were structural. I recommended changes to staff structure, policy, task distribution, hiring and training processes, and more all to ensure that both staff and customers were satisfied. I continued to iterate on all of my design suggestions throughout my time at BeeZr.
"BeeZr owes a great deal of what it has become to Abby's influence, including its form, function, and feel. Her efforts to mold the experience - from entrance to introduction to enjoyment to exit - play huge into our success. Her ideas to train, evaluate, and empower our employees to communicate our message ensures that time spent at BeeZr by our guests (and colleagues!) is enjoyable and rewarding. Thanks to her, I now know why there is a new field in academic study: User Xperience."
Ron Jewell, CEO, BeeZr
Some of the BeeZr crew toasting to kick of the first annual OktobeeZrfest (BeeZr's version of Oktoberfest) in August 2021. I was in charge of planning and coordinating this event and it was a huge success - BeeZr's highest sales day for the whole year of 2021.
