Rockaway Brewing Co
A DesignLab Concept Project
BRIEF
Redesign the website for a local small business using the design thinking process.
I chose to redesign the website for a local independent nanobrewery because I liked the challenge of creating a website that could both help the brewery get through the pandemic and thrive beyond it.
SOLUTION OVERVIEW
I centered the online shopping, made shipping information accessible from any page, and set up a robust information architecture with room for all existing content, and flexibility to grow with the business in the future.
LESSONS LEARNED
- Good information architecture is key for a site’s longe term usefulness.
- Put essential information in multiple places so everyone will find it.
- Use terms that make sense to the user, not just the business.
- Handoff is as iterative a process as design.
USER INTERVIEWS
5
users
USER SURVEY
205
responses
COMPETITION
8
sites analyzed
HI-FIDELITY PROTOTYPE
41
screens
USABILITY TESTING
4
tests
HANDOFF
2
iterations
01. INTRODUCTION
About the Business
Rockaway Brewing Co is a small local brewery with two locations in Queens, NY. Like most breweries of its size, it relied heavily on in-person patronage, which was not an option during the pandemic. While the city was reopening as of mid-June, the chances of another spike and subsequent closures were still high, and a lot of people did not feel comfortable with in-person dining and drinking. Therefore, the company needed a robust off-site sales channel to support the business through the ups and downs of pandemic response and beyond.
About the Project
The company already had a shopping section on their existing website. However, it was not well integrated into the site, and the overall user experience could be easier and friendlier. This project was focused on the core product purchasing process as that was the critical function of the site at the time.
Project Limitations
This project was completed “from the outside”, without any involvement from the business itself. This meant I did not have access to any information from the business and therefore had to make a number of assumptions. The resulting project was not constrained by the realities of the business, but it was also not informed by the vital information only they would know.
I emailed them inviting them to participate in the process, but later found out that my message was lost in a sea of spam. After I finished the project, I sent them the completed case study, like a UX Santa, to do with as they pleased. I will tell you what happened in the Conclusion section of the study.
02. RESEARCH
I wanted to find out how the pandemic was affecting the brewery business and all of their customers, both wholesale and retail.
How was everyone managing?
What kinds of adjustments were companies and customers making?
What solutions were working for similarly positioned businesses?
How much of these pandemic-related adjustments were going to become long term norms?
Industry Research
I read surveys conducted by or on behalf of industry associations to get a sense of how the industry as a whole was coping with the pandemic.
Sources:
1. A June 5-7 2020 survey of 1,600 people by Nielsen CGA
2. A May 2020 nationwide self-selected survey of 850 breweries conducted in May 2020 by the Brewers Association
Wholesale Sales Down
Just 35% of bars and restaurants planned to keep their usual assortment of brands they stocked pre-Covid. That left 65% of the market that suppliers could be fighting for in order to maintain their placements.
Off Premise Up…Sorta
Overall off-premise sales from early March to early June were up 21% compared to the same period in 2019, but that has not been enough to offset loss of on-premise sales.
Additionally, the increases went largely to well known brands with nationwide distribution: people were more likely to grab a 12-pack of a brand they know from the grocery store than to go out of their way to buy from a small local brewery.
Small Breweries Struggling
Median brewery overall sales down 50%, with bigger breweries (volume above 100,000) doing much better than the little guys due to a difference in business models.
“…while there likely is a bump for the overall category in off-premise, this wasn’t helping the smallest micros, taprooms, and brewpubs that much, since much of the bump was concentrated in bigger retailers and larger package sizes.”
Delivery Required
Delivery by breweries was up 30.5% compared to pre-Covid, and successful execution of this business model change was essential for weathering the pandemic.
Competitive Research
There are many other breweries in the LIC area, some within walking distance of Rockaway Brewing Co. Their online sales processes vary greatly. Some offer many products and a range of features such as a subscription service. A few have no online shopping presence at all. Most fall somewhere in the middle. Overall, there is a lot of room for growth in online sales for the Queens nanobrewery community.
Common Usability Issues
- Unclear delivery costs
- Unclear order minimums
- Unclear delivery areas
- Convoluted purchasing processes
- Mostly sold out product offerings with no restocking information
User Survey
The user research consisted of an online survey with 205 responses, and five phone user interviews.
The survey was posted in several Facebook groups, including an Astoria residents group, a cooking group, and a cocktails group. The respondents were self-selected and not necessarily exactly representative of the target population, but it still resulted in some interesting insights.
Survey respondents could choose more than one option, so the results don’t add up to 100%.
The survey was the starting point for my user research, and the interviews were an opportunity to discover the whys behind people’s choices.
People Drink at Home
People’s habits have shifted dramatically, as expected. Pre-pandemic social drinking was replaced overwhelmingly by drinking at home, although over the summer of 2020 there was some social outdoor drinking as well.
People feel conflicted about their pandemic drinking habits, because drinking socially is more acceptable than drinking at home alone, regardless of the amount.
Word of Mouth
70% of respondents rely on word of mouth for discovering new products. In user interviews, this often means social media posts from their friends, or recommendations from the bartender.
Less than 1% rely on services such as Untappd and BeerAdvocate.
Future Habits Uncertain
When asked about their habits after the pandemic, 30% said they’re planning to go back to their pre-pandemic habits, 15% said they will continue some form of limiting socializing and avoiding bars, and close to 50% said they have no idea.
Supporting Local Is Important
The vast majority of respondents said supporting local businesses was “very” or “somewhat” important to them (74% and 23%).
User Interview Insights
People are creatures of habit and rarely go out of their way to find new things to try now that their normal routines are disrupted. If they can’t go drink at their local bars, they’ll fill up a growler to go before they go searching for new options to try. The business has to actively reach out to their potential customers, instead of expecting them to do the work of finding the business.
People often don’t know that breweries deliver, and knowing that would change the likelihood of them looking into it. This is more of a marketing problem, but highlights the importance of making delivery information clear and consistently available throughout the website. People are still trying to avoid an extra trip to the grocery store if possible.
People feel conflicted about their pandemic drinking habits, because drinking socially is more acceptable than drinking at home alone, even if the amount doesn’t change.
Supporting local businesses is important to people because they like feeling connected to their neighborhood, and the socialization that provided. They miss the experience of sitting at a local bar and having a bartender walk them through picking a beer to try. Even as they crave the feeling of connection, they don’t know how to get it back until the pandemic is over.
Persona
Jake doesn’t just want to pick up a 6 pack of Bud from a local bodega. He cares about variety and “personality” of his libations.
He worries that the pandemic will wipe out all the cool little places that attracted him to his neighborhood in the first place, to be replaced by the bland, faceless corporate giants that have the cash to survive the tough times.
Most of all, he desperately misses the human connection and seeks it out in any form he can find it, even in the transactional and the digital spaces.
Empathy Map
Jake wants to feel connected to his neighborhood without risking his health and spending $10 on a pint of beer at the bars. He does not have the emotional bandwidth to deal with anything confusing or complicated.
03. DEFINE
The Plan
Based on the research, the site needs to do the following:
- Prioritize online shopping over physical locations
- Make delivery information clear and accessible from any page of the site
- Make product information easily accessible, instead of hiding all of it on individual product pages
- Convey a friendly, laid back tone
- Have a flexible structure that can handle site content, including any future expansion
Existing Site Review
The site feels like a starter home that has been clearly outgrown. It does a good job conveying the laid back vibe of the business, but lacks the structure to give the content room to breathe and the user a clear way to find information. With some decluttering, reorganizing, and a plan for future growth, it can become a much more useful tool for the business.
Current Home Page
The existing home page served as the main content page of the site. It felt like it has been the default destination for any new content. As a result, over time it became unwieldy and cluttered.
I like to sketch out whatever it is I am analyzing because it helps me separate the functionality from the visuals.
1. Main Navigation
The navigation could be more clear. Several navigation labels are confusing:
- Delivery should be Shop, or Store, or Buy Beer
- Updates is information about the two locations, so it should be Locations
- Rockaway Location should be renamed to Giving Back or equivalent
Several other options don’t need to be in the main nav at all:
- Merch is already included under Delivery (which should be Shop)
- BeerFinder allows users to follow a specific beer. That functionality should be located next to the individual beer to be followed
2. Delivery Information
This information is extremely important for delivery, but is not easily accessible from the shopping section. It needs to be present on both the home page and in the shop section, but could be collapsed to save space. This would enable the addition of key missing information, such as the Manhattan delivery map.
3. Locations
The homepage locations information should serve as an entry point to the expanded information about each location, which should live on its own page – that would enable the addition of a lot more information for each location that users want, such as a calendar of events, current beers on tap, bartenders’ info, etc.
4. Rockaway Location
This section describes the company’s food donation initiative, which would really appeal to our persona, but he would have no idea that’s what “Rockaway Location” means.
- This section should be renamed to Giving Back or equivalent so the users know what this section does at a glance.
- Options to follow the Instagram feed and especially to donate need to be made more prominent, not buried as links in the text.
- The content and layout can be cleaner so the information is clearer.
5. About
The About should also be its own page, with the home page section serving as an overview and an entry point. That page can contain a lot more information about the founders, the history and function of each location, the nanobrewery status, which is currently in the footer, etc.
6. Footer
The email list subscription CTA is hard to read – also users need a reason to subscribe, which is currently unclear.
The wholesale order text should be on the Contact page instead of buried in the footer.
Current Shop Page
The shop page uses a secondary navigation to organize its contents. Users must click on each item to learn about it and then add it to cart. Sold out items are mixed in with items currently in stock. Delivery information is only on the home page, not visible from here.
1. Navigation
The current 8 item sub-navigation is too cluttered and confusing. Should be replaced with filters, such as filter by size (4pack, 6pack, Crowler) and filter by type (Lagers, IPAs, Stouts). Merch can be in its own section.
2. No Delivery Information
Delivery information really should be accessible from this page and should be clearly visible directly above the products.
3. Limited Product Information
Current landing page shows only name, type, alcohol %, and price of each item. To see more and order, user must click on each item individually. Each item page contains only a 1 sentence description, package volume, and ability to add to cart. A different shop landing page layout can easily show this information, saving users clicks and making it easier to order multiple types of product in one purchase.
4. Sold Out Mixed With Available
The sold out products should be on their own page, and there should be options for the people who want them, such as “shop similar” and “notify me when available.”.
If there’s a page for Past Hits, perhaps there should also be a page for “Upcoming” – a way for users to find out if a type of beer they want is in the works, and a way to sign up to be notified when it’s available for purchase.
Sitemap
Original Sitemap
The site started out as a single page informational site. As the business grew and its needs grew with it, the original simple structure did not allow the site to comfortably evolve along with the business. This is why the homepage became so unwieldy, and the store feels like it was tacked on later as an afterthought.
Proposed Sitemap
I think a 2 level, multipage structure would work better for the business as it exists today, and would evolve comfortably as the business grows in the future.
- Prioritize the Shop section to get the business through the pandemic. The subpages are suggestions – maybe there are business reasons why a brewery wouldn’t want to publish its release calendar that I simply don’t know
- Create separate pages for each location, so there is room for all the location-specific content
- Create and expand the About section because the kind of people who would shop from a local brewery would want to know the story of the business and the founders
- Create a Contact page because users expect to find this information in its own spot, even if it also exists elsewhere throughout the site
User Flow
A user could end up on a site in a variety of ways; it is important to provide a seamless path to shopping for all of them.
That includes the people who googled a beer they wanted, landed on that beer’s individual page, and found out they can’t buy it right now. That is a bummer! We have to give them options.
04. VISUAL DESIGN
I took care to preserve the feel of the current site, while still accomplishing the tasks outlined in the Define section above.
Visually, that meant a few broad changes.
Typography
Headings Font
The existing heading font looks handwritten, like a chalk sign. Problem is, it’s a bit tough to read. I wanted to preserve that feeling, while making all the headings easier to read.
Body Font
The current body font (Raleway) is elegant and stylish, and feels out of place next to a hand written font of the headings. I chose a more subdued font (Open Sans), so that the heading font could take the center stage.
Typographic Hierarchy
A hierarchy of headings gave me enough options to call out important information on the page without relying on caps lock for everything.
The smaller headings use body font in bigger sizes and weights. This way the bigger headings stand out even more.
Color
The existing color palette is beautiful, but unnecessarily complicated. I kept the slightly tweaked versions of the main accent colors, ditched the third accent color, and expanded the neutrals .
I made the brand orange darker to increase contrast and legibility. The blue is lighter and brighter for the same reason, and mainly used in header, footer, and topnav dropdowns.
I am ONLY using the brand orange for clickable elements. The current site uses it for links, but also to make headings stand out, which is confusing and frustrating for users. “This is orange, it should be clickable. It’s not! Is it broken? Aaargh!”
Any time a user has to complete an action before clicking a button, the button is grayed out until they complete the action.
Images
Logo
I reworked the logo a bit. The main difference: size! I brought the logo size down so that it is more in line with the other local breweries’ logo sizes because that’s what a user would expect to see.
Bringing the logo size down allowed using that space for photos of the cool taproom murals and all the gorgeous can art. The users already know they are on the RBCo site, but have they seen the Chill Tiger?
Product Photography
Speaking of can art, I removed the backgrounds from all the product photos. This made them more consistent, and helped the products themselves stand out more. In testing, I discovered that users rely on the photo to quickly tell the difference between the smaller and bigger cans of the same beer, so keeping the photos consistent is really important.
Currently, some products have products on a neutral background, some have the product on a barrel, some have just the can art, one even has the back of the bottle instead of the front. It’s inconsistent, messy-looking on a landing page, and confusing for the users.
The landing page image should always be an image of the product as it is sold – a six pack, a four pack, or a single can or bottle, with no background.
UI Kit
I’ve assembled all the main interface elements for ease of handoff and future reference.
05. KEY PAGES
The Home Page
I added a Shopping section to the top of the home page. This way a user will immediately see some beers they could buy as soon as they arrive on the site.
I explored a few options for layout and placement of delivery information. Since this information should be easily accessible from many of the site pages – the home page, the shop landing page, and any of the individual product pages – I settled on an expandable bar above the top nav bar as the most promising solution.
Below that, I kept most of the main sections of the existing home page, but abbreviated and rearrange the content. Each section works as an introduction to the topic, and is linked to the page where the rest of the content has all the room to spread out comfortably.
1. Delivery Information
The Delivery information lives in the expandable bar about the main nav. This bar is accessible from every main page of the site.
2. The Shopping Section
This section introduces a few of the beers (New + bestseller), and provides a filter field above a Call to Action button, so people can shop for exactly what they want with the fewest clicks.
3. The Product Card
The product card pulls a bit of the description from the product page, acting as a friendly bartender describing the beer. We want the user to say “oooh that sounds good” without having to click through to each product’s page to read about it, and buy it with minimal friction.
4. The Locations Section
The Locations section (changed from Updates – people don’t know what that means) gives the most important information about each location. A brief, friendly description, address, hours, contact.
Each location should have its own page, and the rest of the information should live there.
5. The Giving Back Section
The Giving Back section (renamed from Rockaway Location – again, people don’t know what that means) follows the same pattern as Locations. In further work, I would add a prominent Donate button here and a description of exactly what the donations help fund, i.e. “every $10 donations allows us to provide X meals”.
6. The About Us Section
The About Us section definitely needs its own page, or several! There is so much cool information about the history, the founders, the philosophy of the beermaking, the future plans…put it all there! People really do want to know. This section serves as an introduction to all that.
7. The Footer
The footer is a place for all the secondary navigation so people can quickly get where they want to go.
The Mobile Screens
It’s important to figure out how the content would behave on mobile screens, since people do so much shopping on their phones.
The Shop Page
The Shop page allows users to buy the products without having to click on each product’s page to add it to their cart. This makes it easier for people to buy more than one beer at a time.
1. Hero Image
I am using can art on the Shopping page as the hero image. Users responded well to the can art in testing.
“Oooh what’s that one? That looks fun!”
2. Filter
Filtering is not strictly necessary as of now, since there are relatively few products for sale at any given time. Still, this feature allows room for expansion, and some people appreciate shopping by specific feature (i.e. only IPAs or only six packs).
3. Product Descriptions
The product descriptions on the Shopping page must be fairly short, but this allows enough room for the most important information.
The Product Page
Some people will arrive to the site by searching for their favorite beer. Each product having its own page would facilitate this, and allows room for extra information.
1. Third Party Services
I moved the BeerMenus beer finder option to this page, because people will be more likely to look for a particular beer when they are on that product’s page.
I’m also pulling out the ratings from Untappd for social validation.
2. Room for Information
This page allows room for a lot more copy in the description section than the product card on the Shop landing page and elsewhere, and breaks out the important information under the main description.
Users can buy the product from this page in all the sizes it comes in.
3. More Shopping
Adding Similar Favorites underneath encourages people to explore other products they might like and easily add them to their order.
Having sold out products mixed in with the available ones on the Shop page is frustrating for users, but I think each product should have its own product page whether it’s currently available or not. This would have several benefits:
- Bring the users who googled their favorite beer to the site
- Give the users a way to let the business know they’re interested in this beer
- Give the business a way to gauge current customer interest in its past offerings, and use that to inform their future brewing plans
Regardless of how a user gets on the sold out product page, there is going to be a bit of a letdown that they can’t have it right now. What can we do for this user to make up for that?
The worst option would be to give them nothing to do about it.
Ideally, if this beer is coming back, the business should tell them so, and when they can expect to see it. This would be the purpose of the Calendar section of the site (if added).
If that’s not an option, giving people a mechanism to be notified when it’s available, or to reach out to the business to let you know they want this beer would be much better than just “you can’t have this.”
In addition, showing them currently available Similar Favorites encourages them to explore other products they might also like.
The Checkout Pages
I’ve redesigned the checkout flow to give the user more control over the process, while still including all the steps the business had in the original flow because I did not have enough information about why they were there in the first place to decide if they were necessary.
The Delivery Tip
The original site has the tip as a separate product a user would add to their order, like a gift card.
I included the tip in the checkout flow instead. This way adding a tip is still optional, but making a conscious decision about it is not.
06. TEST
This project was coming together nicely in my Figma sandbox, but would it work for actual humans who haven’t stared at it for hours on end?
Testing Goals
I wanted to find out the answers to the following questions:
- Is delivery information easy to find?
- Do people use filters to shop?
- Do people buy from the shop landing page, or do they click on individual product page instead?
- How do people choose to deal with the tip?
Testers
- Two men, two women
- All NYC residents
- One an existing Rockaway customer
Tasks
- Find out delivery information
- Add one six pack of Rockaway IPA to shopping cart
- Add two units of Soul Bear IPA to shopping cart
- Complete check out
Results
- 3/4 of the testers found the delivery information; the one that did not received the wrong testing link where the Figma navbar obscured the information.
- Each user chose a different path to get to the shopping page: from topnav, from dropdown filter on home page, from heading on home page, one looked for a search box.
- 3/4 shopped from the landing page; one clicked on the product page.
- 3/4 of the testers did not use the filters feature at all.
- The tip was tricky. 2 users wanted to click on the 15% tip button right away because it’s easy; the other two felt strongly they wanted to choose their own amount.
07. ITERATE
I tested with a work-in-progress prototype – high fidelity, but with a few known problems I did not have time to fix before testing. After the test, I fixed a number of those, as well as implemented some of the changes discovered during the testing.
- Shopping cart updates when a product is added.
- Added Deal and New options to the shopping filters.
- Changed Filter to Shop By on product landing page.
- Changed Products to Shop in topnav.
- Added None as a tip option. I could have made the tip selection optional during checkout, but I thought making people deliberately select None would make them less likely to do it.
- Added a description of what will happen to the tip amount.
- Added tax information.
- Changed Continue to Next Step in the checkout process.
- Added the main business Instagram feed to the About section on homepage.
08. NEXT VERSION
Next Version Improvements
There were a number of other improvements discovered in testing that I did not implement in this round of revisions.
- Duplicate delivery information in the footer
- Change crowler to growler (people were confused by the unfamiliar term)
- Change Can to Growler for the 32 oz size
- Change product photos so they are all consistent. People rely on the image to tell them product size more than the description, and some of the photos (Quittin’ Time) are confusing because they show both
- Add Calendar information to products that are not available. People want to know when they can get their favorites again, without having to jump through hoops. As one tester said,
I stan companies that let me in on their process, it makes me feel more connected to them.
Handoff
At this point I have completed all the work I could do from the outside, and reached the limit of the project’s scope, so I sent this case study with a quick note to the only email address I could find for the business, the same one that did not get me a response when I reached out originally. I figured, the work is done already, they might as well get some use out of it.
This time I did get a response. Turned out, my original email was lost in a sea of spam, but a detailed case study convinced them I was not a scammer.
We set up a Zoom call and went over the project. The person in charge of the website also managed one of the two locations, and inherited the website after several people have worked on it, also in their spare time, before him. By the time he got this case study, he knew the site needed to be reworked, but had no idea where to even begin.
The case study was helpful, but also overwhelming. Where to even begin? He was not about to just code my design from scratch, and neither was I.
I went through the work and the existing site and thought, if someone only had a couple of hours and no technical knowledge of any kind, what can they do to the site as it is right now to make it immediately better?
I decided to focus on
- Saving the business potential massive headaches by setting up backups and analytics.
- Adjusting the colors, the typography, and the section naming to improve legibility and usability of the site.
Once he had a starting point, he dove right in and redesigned the website completely. A little while later I got another email asking me for feedback, and this time I got more specific with my suggestions.
The end result did not look exactly like my mockups, of course. I never expected it would – the real website would have to adjust to the limitations and the requirements of the platform and the business itself.
Are there things I would tweak if I could get my hands on it? Sure. But if there was ever a year to learn to let go of trying to control everything, 2020 was definitely it.
The finished website looks and works MUCH better than the original one did. It is clean, it has clear navigation, there are no big blocks of text set in all caps, and the excellent Rockaway Brewing Co beer is front and center, as it should be.
Cheers!