Jessica Bevan PWR 675. Client Proposal for Website Redesign. Voodoo Brewing

Transcription

1 Jessica Bevan PWR 675 Client Proposal for Website Redesign Voodoo Brewing Executive Summary Voodoo Brewing is a craft brewery with production and a taproom in Meadville, PA, as well as a taproom in Homestead, PA. Craft beer is a growing segment of the food and beverage industry, with two business arms mass production and distribution. The website needs to serve both segments. While the current Voodoo website serves the basic needs of providing information to customers, there are a few points where improvement would raise conversion rates in sales and visits to the two taprooms: Design the color scheme and fonts are harsh and may not comply with some accessibility standards Homepage a welcome message, information about locations, and space for current beers would advance the user experience Reorganization of content much of the content is relevant and current, however better placement would drive use Business Needs Voodoo Brewing has four key stakeholders: Customers: Individuals who patronize the brewery and taprooms, plus customers who are buying the beer in stores throughout Pennsylvania, Ohio, and New York. They will be looking for information about locations, current beers, and events. Employees: This includes owners, brewers at the Meadville facility, servers at both the Meadville and Homestead pubs, and caterers on the food truck. This is especially true after the recent announcement in the Pittsburgh Business Times that employees are now eligible for a new employee ownership program: The award-winning brewer

2 expects the move will make it one of the smallest employee-owned businesses in the country ("Voodoo Brewing to Become Employee Owned"). Food truck partners: The food truck movement is extremely community-based. The Homestead pub is not only home to the Voodoo Foodoo truck but they regularly host other food trucks at that location. Information about locations and events are most important to these stakeholders. Distributors: There are currently ten distributors in Pennsylvania, Ohio, and New York carrying Voodoo products. Their customers may want more information about current or seasonal beers, plus location information for planning visits. While the current website addresses many of informational needs of the stakeholders, the organization and design may not be serving them as well as they should. As a business website, the purpose is to generate sales, convey information, and act as a starting point for customer service interactions. To address these needs, organization and information, the primary recommendation is to overhaul the navigation menu and subsequent pages within the site. Some of this information already exists but may need expanded or reviewed; adding content will only further the return on investment for the stakeholders. The following is the suggested navigation menu and hierarchy for the redesign: Home o Logo o Welcome message o Taproom hours o Current beers on tap About o Company history o Leadership team, including brewers o Accolades o Employment Beer o Current availability by location o Seasonal and special brews Brewing o Process Locations

3 o Meadville taproom Food menu o Meadville brewery Tours o Homestead taproom Food menu Foodoo food truck o Distribution Store location map Events o Calendars for each taproom o Event space rental information Store o Link to BigCartel Connect o General contact form o Social media links o Event space rental information o newsletter o Foodoo food truck catering information Audience Needs Persona 1: Name Tyler Age 25 Occupation Bank teller and grad student Personal information New to craft beers Saw event details for a food truck rally on Facebook Wants to support local business Comfortable using a computer, searching the internet, utilizing social media Persona 2: Name Laura

4 Age 49 Occupation Volunteer coordinator at a Youngstown nonprofit Personal information Foodie and beer enthusiast Found beer at local store in Youngstown, willing to drive to Meadville to try taproom offerings Uses a computer for work, mostly comfortable searching the internet for information, does not like using her phone to look things up Persona 3: Name Kristen Age 33 Occupation Teacher and board member for local college alumni council Personal information Looking for unique space to hold an alumni event Familiar with Voodoo beer from friends but has never visited Homestead taproom Comfortable using the internet,, searching the internet, utilizing social media User scenario 1: Card sort: Ask participants to organize topics into categories that make sense to them. This will assist in understanding how the website s organization and hierarchy appears to users. See Appendix A for cards and example sort. User scenario 2: User survey: With the new employee ownership program, staff will have a larger stake in the business s performance. Conduct a survey of customers to understand what brought them to the site and what improvements they would like to see. Sample survey can be found here. A sample response, based on persona 3, is available in in Appendix B.

5 Competitive Analysis Usability reviews were conducted on the websites for five comparable breweries: East End Brewing, Pittsburgh Brew Gentlemen Beer Company, Pittsburgh Great Lakes Brewing Co., Cleveland 42 North Brewing Company, Buffalo Revolution Brewing, Chicago. Adapted from the usability review developed by UX for the Masses, this test is designed to determine how websites score against guidelines for functionality, navigation, content, and performance. Elements are graded on a scale of one to five, with a score of one representing poor performance and five representing excellent performance. If a guideline is not applicable, a score of zero is applied. Up to 100 points can be earned and that score is graded using the same scale as the UX for the Masses review: * Very poor (less than 29) - Users are likely to experience very significant difficulties using this site or system and might not be able to complete a significant number of important tasks. * Poor (between 29 and 49) - Users are likely to experience some difficulties using this site or system and might not be able to complete some important tasks. * Moderate (between 49 and 69) - Users should be able to use this site or system and complete most important tasks, however the user experience could be significantly improved. * Good (between 69 and 89) - Users should be able to use this site or system with relative ease and should be able to complete the vast majority of important tasks. * Excellent (more than 89) - This site or system provides an excellent user experience for users. Users should be able to complete all important tasks on the site or system. A Guide to Carrying Out Usability Reviews All five websites performed well, earning scores solidly in the Good category. Of the five, Great Lakes Brewing Co. performed the best with a score of 82. It is well designed, easy to navigate, and scored especially well in the content category. Voodoo s website could do well to emulate the features and content presentation found on these websites. See Appendix C to view full usability reviews for each business. Wireframes Wireframes for the updated website design can be found the following links:

6 Home About Decision Models The following storyboard details the steps a user would currently have to take in order to contact Voodoo Brewery about event space rental. Under the updated design, users would be able to find that information on both the Events page and the Connect page.

7 Style Guide Font: Hind Vadodara, a sans-serif font available via Google Fonts. It is designed explicitly for use in User Interface design, making it easy to read and scan. ("Hind Vadodara. ).

8 Color Scheme: Fresh Hues

9 The light gray is recommended as the main background color, with the near-black as the font. The slate, brown, and orange tones would serve as complimentary colors throughout the navigation bar, links, and action buttons. High-quality photos should be sourced from the brewery s Facebook account to keep images fresh and relevant. The homepage should have a slideshow to showcase current beers, the locations pages should have larger photos to show off the unique spaces, and the events page should also contain a slideshow of photos from past events. Contact form: The contact form found on the East End Brewing Company page is simple yet effective and be appropriate to emulate.

10 Resources 42 North Brewing Company. Web. 15 April Brew Gentlemen Beer Company. Web. 15 April East End Brewing. Web. 15 Apr "Fresh Hues." Design Seeds. 11 Apr Web. "A Guide to Carrying Out Usability Reviews." UX for the Masses. 11 Feb Web. Great Lakes Brewing Co. Web. 15 April "Hind Vadodara." Google Fonts. Web. Vadodara. Revolution Brewing. Web. 15 April Voodoo Brewery. Web. 15 April "Voodoo Brewing to Become Employee Owned." Pittsburgh Business Times. 13 Apr Web.

11 Appendix A Directions: Print and cut out cards. Have participants organize them into the following categories: About Beer Brewing Locations Events Store Connect Calendar Meadville taproom Purchase t- shirts Current beer list Space rental information Employment Homestead taproom Facebook Ingredients Where to buy Food menu Food truck beer Space rental Awards Employees Company request history Seasonal beers Cellared beers Brewing Brewery tour system Sample card sort response The cards are color-coded to their category to show how a participant might sort them. About Beer Brewing Locations Events Store Connect Calendar Meadville taproom Purchase t- shirts Current beer list Space rental information Employment Homestead taproom Facebook Ingredients Where to buy Food menu Food truck beer Space rental Awards Employees Company request history Seasonal beers Cellared beers Brewing Brewery tour system

12 Appendix B

13

14

15 Appendix C Website: 42 North Brewing Features/Functionality Score Comments Features and functionality meet common user goals and objectives 4 The average user, looking for beer or location information will be satisfied. Frequently-used tasks are readily available 4 As a food service site, it designed to be informational and succeeds. High-use pages are clearly labeled. Information about beers and locations are easy to Call to actions are clear, well labeled, and appear clickable Homepage/Starting Page The homepage provides a clear snapshot and overview of the site The homepage is effective in orientating and directing users to their desired information. The homepage layout is clear and uncluttered with sufficient white space. access 4 No online shop. Newsletter sign-up available at bottom of homepage, near hours/location information 4 The start page gives a clear picture of the brewery's style. Easy to see what will be found on the page. Includes welcome statement about brewery philosophy 4 The menu is clear to navigate. Current taproom offerings are featured in slider. Hours/location information in footer. 4 The layout is clear, but is a little graphically heavy. The design, especially at the top of the page, is busy. A bit more balance in design with provide some relief. Navigation Users can easily access the site 4 URL is 42northbrewing.com. Top Google result, even with variations on brewing/brewery The menu is easy to find and understand The current location is clearly indicated Users can easily get back to the homepage 4 Main menu is easily found at the top of each page. The language chosen for each is clear and expected. Location is consistent. 3 No breadcrumb trail. The navigation menu does not indicate where a user is, but the pages all have large headings 5 Home is part of the navigation menu. It is also accessible by clicking on the logo in the header. A clear and well-structured site map or index is provided 0 n/a (Navigation menu is repeated in footer) Feedback/Forms Users can easily give feedback 4 Contact page includes standard form, phone number, and social media links. Simple contact form is also used for event space inquiries.

16 Clear instructions exist for forms 4 Form is clearly labeled. Draws your eye first on the page, so some users may miss the note about using it for event inquiries. Appropriate input fields are used and required fields are indicated Content All content is appropriate and relevant Links to external content are functional and appropriate Language, terminology, and tone are appropriate and readily understood by the target audience Text and content is scannable, with good typography and visual contrast Performance Site or application performance doesn t inhibit the user experience Possible user configurations are supported 4 Required fields are marked with an asterisk. Would recommend adding a drop down menu so that users can select a subject for their message (help with filtering on management end) 4 Photography and other art are relevant. Content is all related to business. Taproom page links to food menu. Would suggest duplicating beer list from homepage here. 4 Social media links to Facebook, Instagram, and Twitter are current. No other external links. 4 Beer descriptions are appropriate and should be understood by the target audience. Strong connection to brewery location/community. 3 Would recommend another font color/type for improved scanning. Needs stronger visual contrast. 4 Slight lag in homepage load time, but doesn t inhibit overall experience. 4 No difference in usability between Chrome and IE. Site is configured for mobile use Overall usability score (out 100) 75 Website: Brew Gentlemen Features/Functionality Score Comments Features and functionality meet 4 The average user, looking for beer or common user goals and objectives location information will be satisfied. Clear Frequently-used tasks are readily available Call to actions are clear, well labeled, and appear clickable Homepage/Starting Page navigation menu. 5 Simple touches like a notice at the top of the homepage when the taproom is open, list of hours has current day of week highlighted. Very thoughtful design. 4 No shop option available. However, current beer menu and full beer list are interactive users click on name for pop up with description and pairing ideas.

17 The homepage provides a clear snapshot and overview of the site The homepage is effective in orientating and directing users to their desired information. The homepage layout is clear and uncluttered with sufficient white space. 4 The start page gives a clear picture of the brewery's style. Easy to see what will be found on the page. There is no welcome message/mission, but those wouldn't be necessary here. 4 Only one location but hours are easy to determine on homepage. Menu is clear; users must click over to other pages for information beyond taproom hours. 5 Very well-designed. Simple, uncluttered, and easy to read. Navigation Users can easily access the site 4 URL is brewgentlemen.com; easy recall for users. Top Google results. The menu is easy to find and understand The current location is clearly indicated 4 Located across width of header. Some users may find Menu vs Beer confusing Menu details beers currently on tap, Beer is full list. 4 No breadcrumb trail. The corresponding page name in the navigation bar is clearly indicated. Users can easily get back to the homepage 5 Users can return to homepage by clicking on Home or logo image. A clear and well-structured site map 0 n/a or index is provided Feedback/Forms Users can easily give feedback 3 Connect page includes links for social media, newsletter, blog, and /phone information. link does not currently function. Clear instructions exist for forms 0 n/a Appropriate input fields are used and required fields are indicated Content All content is appropriate and relevant Links to external content are functional and appropriate Language, terminology, and tone are appropriate and readily understood by the target audience 0 n/a 5 Blog is updated monthly, with brewing information. Calendar is current. Document with event space rental information is thorough. 4 All social media links work and newsletter signup is functional. link does not work. 5 Beer descriptions are appropriate and should be understood by the target audience. Descriptions also include possible food pairings.

18 Text and content is scannable, with good typography and visual contrast Performance Site or application performance doesn t inhibit the user experience Possible user configurations are supported 4 Very easy to scan through site for information. Black and white color scheme offers strong visual contrast. 4 Runs smoothly with almost all elements functioning. 5 No difference in usability between Chrome and IE. Site is configured for mobile use Overall usability score (out 100) 73 Website: East End Brewing Features/Functionality Score Comments Features and functionality meet 4 The average user will find the information common user goals and objectives they need to either purchase beer or book Frequently-used tasks are readily available Call to actions are clear, well labeled, and appear clickable Homepage/Starting Page The homepage provides a clear snapshot and overview of the site The homepage is effective in orientating and directing users to their desired information. The homepage layout is clear and uncluttered with sufficient white a brewery tour. Pages are all current. 4 Functions well as an informational site. High-use pages are clearly labeled. Information about beers and locations are easy to access 4 Links to events page and employment are easy to access. Products (beer and store items) are featured. 4 Start page includes brief welcome message and motto. Emphasis on product being fresh and locally made. 4 Information about locations is available right on homepage. The menu is clear to navigate. 4 Layout is clear. While the feature photo is large, it doesn t overwhelm the page and is balanced by the header. space. Navigation Users can easily access the site 4 URL is eastendbrewing.com. Top Google result, even with variations on brewing/brewery The menu is easy to find and understand The current location is clearly indicated Users can easily get back to the homepage A clear and well-structured site map or index is provided 4 Top right of each page. Language clearly indicates what will be found on each page. 4 No breadcrumb trail, but current page is indicated in the navigation menu. 5 Home is a clear option in the navigation menu. Clicking on the logo also returns users to the homepage. 0 n/a

19 Feedback/Forms Users can easily give feedback 5 Standard contact form. Contact page also lists specific s for keg orders and event planning. Link to donation request page Clear instructions exist for forms 5 Donation request page has clear guidelines and instructions for asking about a beer donation. Form is well marked and easy to navigate. Appropriate input fields are used and required fields are indicated Content All content is appropriate and relevant Links to external content are functional and appropriate Language, terminology, and tone are appropriate and readily understood by the target audience Text and content is scannable, with good typography and visual contrast Performance Site or application performance doesn t inhibit the user experience Possible user configurations are supported Overall usability score (out 100) 80 4 Required fields are marked with an asterisk. Drop down menu utilized to indicate how donation will be used during an event. 4 Photography and other art are relevant. Content is all related to business. News page is set up as a blog, with information about forthcoming second location, brewing processes, and events. 5 Online store is managed by a local printing company; link is functional. Social media links to Facebook, Instagram, and Twitter are current. 4 Beer descriptions are appropriate and should be understood by the target audience. Definitions for some terminology are available (see What is a growler? page) 3 Typography is acceptable, but would suggest adapting a more high-contrast color palette for reading text (light gray on dark gray may be hard for some users to read) 4 Runs smoothly with all elements functioning. Only potential snag is that the online store is managed by another local company reliant on their functionality. 5 No difference in usability between Chrome and IE. Site is configured for mobile use Website: Great Lakes Brewing Features/Functionality Score Comments

20 Features and functionality meet common user goals and objectives Frequently-used tasks are readily available Call to actions are clear, well labeled, and appear clickable Homepage/Starting Page The homepage provides a clear snapshot and overview of the site The homepage is effective in orientating and directing users to their desired information. The homepage layout is clear and uncluttered with sufficient white space. 4 The average user, looking for beer or location information will be satisfied. 4 As a food service site, it designed to be informational and succeeds. High-use pages are clearly labeled. Information about beers and locations are easy to access 4 Store link opens to a new browser tab. Beer finder map is intuitive and easy to use. 4 The start page gives a clear picture of the brewery's style. Easy to see what will be found on the page. There is no welcome message/mission, but those wouldn't be necessary here. 4 Information about locations is available right on homepage. The menu is clear to navigate. Featured information about new beers is relevant. 4 The layout is clear but a bit crowded. May want to consider relegating some of the less important information deeper in the site hierarchy. Navigation Users can easily access the site 4 URL is greatlakesbrewing.com; Variations on brewing/brewery garner good results for a Google search. The menu is easy to find and understand The current location is clearly indicated Users can easily get back to the homepage A clear and well-structured site map or index is provided Feedback/Forms 5 Located in header of each page. Expands to secondary navigation menu to allow users to see what is available under each topic. 3 No breadcrumb trail. The main navigation menu does not indicate what page a user is on, but the expanded menu does. May be confusing for some users. 3 There is no "home" tab in menu bar. Users must figure out that clicking on logo on top-left of page is the link back to the homepage. Including a clear "home" button may be helpful for less savvy users. 5 Located at bottom of each page. Links are organized by category and direct users to specific information. Site also has a search option

21 Users can easily give feedback 3 Contact form is buried at the bottom of the homepage, instead of having a dedicated page. May be hard for some users to find. Clear instructions exist for forms 4 Form to inquire about space rental is easy to navigate and only requires minimal information from users. Appropriate input fields are used and required fields are indicated Content All content is appropriate and relevant Links to external content are functional and appropriate Language, terminology, and tone are appropriate and readily understood by the target audience Text and content is scannable, with good typography and visual contrast Performance Site or application performance doesn t inhibit the user experience Possible user configurations are supported 4 Required fields are clearly marked. No drop-down menus are included, users must in-put all of their information. 5 Site has a Beerginner s Guide to the three beer styles offered by the brewery. Clear explanations about taste profiles, example brews, and food pairings. Beer list is easy to navigate and understand. 4 Social media links are all functional. Goodwill Great Lakes page has links to charitable partners; all are current. 5 Minimal jargon, and guide goes a long way to introduce new beer drinkers to product. Language is clear and concise throughout. 4 Clear and easy to read. Good visual contrast, even with text over images. Site also offers a language selection option. 4 Runs smoothly with all elements functioning. 5 No difference in usability between Chrome and IE. Site is configured for mobile use Overall usability score (out 100) 82 Website: Revolution Brewing Features/Functionality Score Comments Features and functionality meet common user goals and objectives 4 The average user, looking for beer or location information will be satisfied. The page is a bit graphically busy but the main navigation menu is clear. The site map is well-organized. Frequently-used tasks are readily available 4 As a food service site, it designed to be informational and succeeds. High-use pages are clearly labeled. Information about beers and locations are easy to access

22 Call to actions are clear, well labeled, and appear clickable Homepage/Starting Page The homepage provides a clear snapshot and overview of the site The homepage is effective in orientating and directing users to their desired information. The homepage layout is clear and uncluttered with sufficient white space. 4 The online shop is easy to use for checkout. Would recommend re-organizing items by type (shirts, posters, etc.). Would also include disclaimer about not being able to order beer online. 4 The start page gives a clear picture of the brewery's style. Easy to see what will be found on the page. There is no welcome message/mission, but those wouldn't be necessary here. 4 Information about locations is available right on homepage. The menu is clear to navigate. Featured information about new beers is relevant. 3 The layout is clear, but is a little graphically heavy. The design, especially at the top of the page, is busy. A bit more balance in design with provide some relief. Navigation Users can easily access the site 3 URL is revbrew.com; revolutionbrewing.com is a for-sale domain. This could be confusing to some first-time visitors. Variations on Revolution Brewing/Brewery garner good results for a Google search. The menu is easy to find and understand The current location is clearly indicated Users can easily get back to the homepage A clear and well-structured site map or index is provided 4 Main menu is easily found at the top of each page. The language chosen for each is clear and expected. Location is consistent. 4 No breadcrumb trail. The corresponding page name in the navigation bar is clearly indicated. Secondary navigation bar also indicates page. 3 There is no "home" tab in menu bar. Users must figure out that clicking on logo on top-left of page is the link back to the homepage. Including a clear "home" button may be helpful for less savvy users. 5 Site map is located in the footer. Well organized and includes more specific links to information (employment, staff, and tours). Works well in lieu of search option. Feedback/Forms Users can easily give feedback 4 Contact page allows users to questions/concerns and supplies phone numbers for brewpub and brewery.

23 option will automatically send the user to a 'compose' screen in their own provider. Only works if user has an address/is logged into their account. Clear instructions exist for forms 3 When selecting party packages, users need to navigate away to find descriptions. Link to that information is part of secondary navigation menu. May be better to have it duplicated lower on the page, near the form. Appropriate input fields are used and required fields are indicated Content All content is appropriate and relevant Links to external content are functional and appropriate Language, terminology, and tone are appropriate and readily understood by the target audience Text and content is scannable, with good typography and visual contrast Performance Site or application performance doesn t inhibit the user experience Possible user configurations are supported Overall usability score (out 100) 75 3 Would recommend switching to a calendar for date selection, rather than typing it in. Time and package information is part of a drop-down selection. Again, would recommend a note indicating that all fields are required. 4 Photos and other art are all relevant and appropriate. Fits "revolution" theme. No effect on download times. 4 Awards page does not include links to external sites (may be of interest to users to have context for the awards). Only external links are to social sites. Easy to find on top and bottom of pages. 4 Minimal jargon, but a glossary may be of interest for new beer drinkers. Bulk of site is in plain language. "Revolutionary" themed language is noticeable on About page and in beer descriptions. Grammar and formatting are consistent throughout. 3 Secondary menus are not always immediately noticeable on the page, due to the dark background color. May be worth seeing if the inverse is more affective. Fonts and larger blocks of text are easy to read. 4 No noticeable delays, especially with the amount of images. Store FAQ link needs to be fixed. 4 No difference in usability between Chrome and IE. Site is configured for mobile use