FULTON WEBSITE REDESIGN
Redesigning the Fulton Beer website to emphasize their unique features and line of products.
CHALLENGE
METHODOLOGY
SOLUTION
Redesign a local brewery’s website to better reflect the current needs of the company and make it easier for employees to update and engage with customers.
Evaluate the current Fulton site to identify opportunities for improvement. Test potential website features to advance the overall customer connection to brewery products and taproom information.
Prototype potential solutions that highlight essential taproom, product, and brand information. I highlighted key task flows for taproom visitors and Fulton beverage purchasers.
I also prioritized the features that potential customers had evaluated as the most important to them.
Role: UX Researcher & Designer
Deliverables: Interactive Prototype, Presentation, and Findings & Recommendations Report Including Annotated Wireframes, Style Guide, and Research Artifacts.
METHODS
1 Comparator Audit
2 Stakeholder Interview
3 Heuristic Analysis
4 Affinity Diagramming
5 Journey Map
6 Observational Research
7 Empathy map
8 Site Maps
9 Interactive Prototype
10 Annotated Wireframes
ATTRIBUTIONS
• Website, Photos, Logos: Fulton Beer
• Typeface: Futura, Klavika
• Heuristic Template: Nigel
• Usability Testing Outline: Steve Krug
• Icons: IconScout, Material Design
• Mock-ups: Mockuuups Studio
• Word Cloud: Jason Davies
ABOUT THE PROJECT
Fulton Beer is a group of ordinary people making extraordinary beers. Their love of brewing craft beverages led them to start the first taproom in Minneapolis. They’ve since grown to run the taproom near Target Field in downtown Minneapolis as well as a 50,000 square foot production brewery. In the past few years, they’ve redesigned their packaging and their taproom and ready to update their other touchpoints.
CHALLENGE
Fulton is ready for a website redesign. The current Fulton website has become outdated for its current needs and brand identity. The site is also very difficult for staff to edit or modify. Before Fulton moves ahead with a new site build, they’d like to know what about the site is working well for users and what could use improvement.
WEBSITE GOALS
Design a website update with the needs and key task flows of the primary users in mind.
Design with the technical specifications of the secondary users in mind.
Provide clarity on taproom & product info for both types of Fulton customers.
Get people who are visiting the site for taproom info to find out more about Fulton products and vice versa.
Add more information about the brand story and updates to the landing page.
AUDIENCE: CUSTOMERS
PRIMARY: < These customers were the focus of the redesign
• Taproom Customers/Event Attendees: Customers who visit the taproom &/or events
• Product Buyers: Customers who purchase Fulton products from stores or venues
SECONDARY: < Technical specifications were considered for these users
• Fulton Staff
• Distributors
RESEARCH PROCESS PHOTOS
THE METHODOLOGY
RESEARCH BREAKDOWN
Stakeholder Interview: I met with stakeholders from several Fulton departments to identify website goals and pain points.
Observational Research & Empathy Map: I visited the taproom to observe customers and created empathy maps to identify potential customer experiences.
Site Analysis — Heuristic Analysis & Comparator Audit: I evaluated the current website for usability compliance and evaluated features against local comparators.
Benchmark Usability Testing: I conducted 4 usability tests to evaluate the current Fulton website and identify user likes/dislikes, pain points, and task completion.
Customer Surveys & Card Sorting Exercise: I surveyed 78 taproom visitors about their favorite features. I had 4 participants sort which of Fulton’s features were most important to them.
User Stories & Journey Maps: I created two simple user stories for the primary users to base the prototype on as well as a user journey map to identify touchpoints and opportunities.
Architectural Diagram — Site Map: I outlined the site architecture to create a map of high-level website pages and identify key screens for prototyping.
Prototyping: I created low-fidelity wireframes to establish a technical scope. I worked with senior UXers and a developer to review that the proposed features fit within the company’s technical goals. I then created a high-fidelity prototype for just the key screens based on the primary user flows from the first round of usability testing.
Prototype Usability Testing: I tested the high-fidelity wireframes with 3 participants in remote moderated usability tests and used these findings to identify potential wireframe adjustments.
KEY FINDINGS
I found that, overall, the site was working well for users but identified a few key pain points and opportunities to advance Fulton’s content and design before moving forward with a site redesign using a simple website builder. The current website is 450+ pages including separate pages for their full list of products and blog. A simplified website design would benefit customers looking for at-a-glance content for either products or taproom information.
7/7 of the tested users were interested in a high-level overview of offerings, so these key task flows could be easily prioritized in a simplified design. Customers wanted to see updates and information on the landing page, taproom info & updates, taproom menus, and product menu.
I heard from user surveys, card sorting, and a survey of 78 local taproom visitors that amenities were secondary or unimportant to them. People prioritized establishing basic expectations of the space and what the business had to offer. I also learned that 48% of participants marked that they do generally look up bar and taproom information on the web before visiting.
Prioritizing essential information for features and streamlining a few processes would greatly improve the usability for users. I met with UX mentors and consulted with a developer to make sure that my recommendations were achievable within Fulton’s technical specifications. I used these findings to develop and test an interactive prototype with a new set of users. I also created a findings and recommendations report of essential findings and research artifacts. Read on for more detailed information on the research and findings.
Survey Results also reflected what I heard in card sorting and usability testing:
Least Important
1) Televisions for movies
2) Table service
3) Jukebox
4) Televisions for games/sports
5) Reservation options
Most Important
1). Great drink selection
2) Friendly staff
3). A variety of comfortable seating options
4) Patio Seating
5). Sense of Community/Social Aspect
AHA MOMENT
Which features do customers want the most?
It seemed that everyone has different ideas of what they want out of a taproom or product experience, but that everyone cares about atmosphere and offerings.
The best website experience for customers would come down to a quick yet informative overview of what exactly Fulton had to offer.
FINDINGS & RECOMMENDATIONS REPORT
REPORT INCLUDES
Interactive Website Prototype
For key tasks flows:
• Landing page
• Taproom Info
• Taproom Menus
• Product Page
Annotated Wireframes
• Landing Page
• Taproom Info
• Taproom Menus
• Product Page
• About
• Merchandise
Research Artifacts
• Stakeholder Interview
• Observational Research: Empathy Map
• Site Analysis: Heuristic Analysis & Comparator Audit
• Customer Surveys & Card Sorting Exercise findings
• User Stories & Journey Maps
• Architectural Diagram: Site Map
• Data Synthesis from Usability Testing
• Style Guide
NEXT STEPS
• I heard from stakeholders that 50% of Fulton’s website traffic is coming from mobile users. I recommend that Fulton further prototype and test specifically for mobile users.
• The rest of Fulton’s main navigation is ready for prototyping: events, about, contact, etc.
• The tested features of the key flow are ready for Fulton to pursue development.