Edge of The World Brewery

Responsive UX/UI Design

Poject details

• My Role: User Researcher, UX Designer and UI Designer

• Tools: Sketch & InVision

• Project Timeline: 4 weeks/ 20 hours per week

• People Involved: DesignLab Mentor

Problem:

Edge of The World Brewery needs a responsive site in order to maintain a competitive edge among other breweries in the surrounding area. 

Solution:

To design a responsive website  while extending coherent branding that aligns with the clients current customer experience.

Phase 1: Research

The research phase included gaining a clear understanding of the current brewery market and its customer base. This was accomplished by identifying challenges and trends in the current market and gaining direct feedback from customers one-on-one. 

Goal:

To understand the current brewery market and its users.

Deliverables:

Market Research,  Competitive Analysis, Provisional Persona’s, & User Interviews.

Market Research

Using online resources, research was conducted on existing breweries, statistics,  and its current consumers.

Types of Breweries:

• Microbrewery: A brewery that produces less than 15,000 barrels of beer per year and sells 75 percent or more of its beer off-site. 

• Brewpubs: A restaurant-brewery that sells 25 percent or more of its beer on-site and operates significant food services. 

• Regional Brewery: A brewery with an annual beer production of between 15,000 and 6,000,000 barrels.

Industry Statistics:

• Microbreweries and Breweries are gaining popularity around larger breweries

• Larger breweries in the US are beginning to see a decrease in production

• Microbreweries provide economic benefits to locals 

• Microbreweries and brewpubs show the most growth, accounting for 96% of all breweries operating today

Consumers:

• The weekly craft drinker is predominantly male, ages 21-34

• Women, ages 21-39 are beginning to drink more beer— specifically those with fruity, crisp profiles. 

• A majority of craft drinkers believe locally made beer is very important.

• A majority of craft drinkers said that distance from the brewery was the top reason for buying. 

Competitive Analysis

A Competitive Analysis was conducted to identify strengths and weaknesses with existing breweries. Direct competitors were established popular microbreweries within the same area as the client. Indirect competitors were popular restaurants in the area that also sold beer. 

Provisional Persona’s

Based on market research, provisional personas were created by gathering generalized information on brewery consumers to represent the target market. 

User Interviews

Primary research was conducted in the form of 1-1 interviews. This provided insight from users directly— their experiences and frustrations— allowing us to build empathy with the user. A script of open-ended questions was created allowing users to share information about their interaction with the client and other breweries. To view full interview guide click here.

• 5 interview participants

• 3 Female, 2 Male

• Ages 24-41

• All participants were current customers

Phase 2: Define

This phase included synthesizing the research in order to define the user problem. This was accomplished by identifying user needs, goals, motivations and frustrations as well as questions that we could answer during the ideation phase. 

Goal:

To identify target users and define user problems.

Deliverables:

Empathy map, User Persona, POV Statements and HMW Questions

Empathy Map

Individual behaviors, experiences, and comments from participants during interviews were grouped together by major patterns. These patterns were later used to develop insights, which allowed us to establish user needs. 

Insights:

• Customers like to preview what the bar offers before going.

• Customers select breweries to go to based on the variety of new beers they offer.

• Customers prioritize breweries hosting events over those that do not.

Needs:

• To have relevant information displayed.

• To have access to the new selections being offered.

• To be informed of upcoming events.

User Persona

Our research was further synthesized by creating a user persona that illustrated the observations and patterns gained during our 1-1 interviews.

POV Statements & HMW Questions

With a clear understanding of the user, we then had to frame the problem. POV statements were developed based on user needs and insights, and HMW questions were created to begin considering ideas of how we might solve those problems during the next phase. 

Phase 3: Ideate

During this phase we began considering ways that we might address and solve our user’s problems. 

Goal:

Create ideas for solutions, features, information architecture and flows. 

Deliverables:

Brainstorming, Business & User Goals, Product Roadmap, Site Map, User Flow. 

Brainstorming

We began brainstorming by listing out as many ideas possible while addressing the HMW questions.

Business & User Goals

To better understand the goals of our users and client we used a Venn Diagram to illustrate these goals and how they might overlap. Technological considerations were also considered to maximize our products value. 

Product Roadmap

Using our HMW questions and Venn Diagram we then created a list of features that could be included in the product and organized them into levels of priority. 

Sitemap

After reviewing research findings and competitor sites we then began laying out the structure of the site. 

Task Flow

To further understand how users might navigate the site we developed a task flow demonstrating sequences of the user performing basic tasks. 

User Flow

Taking it a step further, we then developed a variety of user flows demonstrating how users would accomplish specific tasks. 

Phase 4: Design

With solutions generated during the ideation phase we began developing the visual layout of the product. 

Goal:

To develop the visual layout of the site that could later be translated into a prototype. 

Deliverables:

Low-Fidelity Wireframe Sketches and Mid-Fidelity Wireframes. 

Low-Fidelity Wireframe Sketches

Sketches of low-fidelity wireframes were created to begin laying out the foundation of the site while considering UI elements that would assist us in providing solutions to our users. 

Mid-Fidelity Wireframes

Using our previous sketches, we then created a responsive mid-fidelity set of wireframes using Sketch. These mid-fidelity wireframes were used to provide a clearer view of the products layout, and later used for prototyping. To view complete set of wireframes click here.

Phase 5: Prototype

During this phase we were able to test the usability of our designs using InVision. This allowed us to identify recommendations for updates early on to improve our users experience with the product. 

Goal:

Creating a prototype of the site to conduct usability testing. 

Deliverables:

Mid-Fidelity Prototype, Usability Testing 

Mid-Fidelity Prototype:

Using our mid-fidelity wireframes we created an interactive prototype to test on users via InVision. 

Usability Testing

During this stage we created a testing plan to outline testing methodologies, objectives, and opening script. We then gathered participants to conduct testing on— participants were chosen at random for the purpose of gaining honest feedback. 

Testing Objectives:

• To identify any pain points as users navigate the site.

• To identify any issues as users search for specific features.

• To see how long it takes for users to complete a task.

• To identify any errors in the design of the site.

Testing Results:

Testing was conducted on 5 participants. With permission we recorded each participants interaction and feedback as they interacted with the site. This provided insight that would later allow us to make iterations to the site based on user experiences. To see full usability test findings click here.

Phase 6: Iterate

Using the data gained from usability testing we synthesized the information to identify updates that would be made in the hi-fidelity version of the site. 

Goal:

To identify priority updates for the high-fidelity version of the site. 

Deliverables:

Affinity Map, Style Tile, UI Kit, High-Fidelity Wireframes

Affinity Map

Using information from usability testing we organized observations into major patterns. From our observations we developed insights, which allowed us to identify recommendations for revisions based on their priority.

Style Tile

To begin laying out the visual elements of the site we put together a style tile, including the color scheme, typography, logo, and graphics that best represented the brand. 

UI Kit

To maintain consistency in the design and ensure an easy hand-off process later down the road, we created a UI took kit with UI elements to be included in the high-fidelity wireframes. 

High-Fidelity Wireframes

High-fidelity wireframes were then created using the visual elements from branding and layout from the mid-fidelity wireframes. 

During the creation of these wireframes we made sure to include recommended updates from our affinity map. To view full set of wireframes click here.

Reflection

Working with a local business, we were able to create a product that addressed user needs and expectations while providing an online platform for the client. Edge of the World Brewery now has the ability to connect with customers using resources beyond social media while maintaining a competitive edge against existing breweries. 

Next Steps:

• Prototype High-Fidelity Wireframes

• Conduct further usability testing

• Make updates to wireframes from usability testing

• Hand-off designs to developers