Invasive Species Brewing
Responsive Website Redesign (Mobile and Desktop)
My Role
UX/UI Designer
Timeline
2 Weeks
Tools
Figma
Industry
Alcohol & Spirits, Restaurant, Food, Merchandise
Overview
Invasive Species Brewing is a South Florida-based brewery. All brewed in-house, I wanted to redesign Invasive Species’s website to reflect their unique style, and craft beers, and help to improve the user experience.
Background
Competitor small breweries in South Florida have updated websites allowing users to purchase beer and their merchandise.
Problem
Invasive Species Brewery does not have a website that keeps up with competitors and the user experience could be improved.
Solution
Design a website that helps Invasive Species Brewing keep up with competitors and helps users to properly flow through the website.
First… I conducted user interviews.
Primary Research
I conducted User Interviews via zoom with 5 participants ranging in age from 21-64 years old.
This gave me an in-depth look into users' thoughts and experiences about what they look for in a brewery’s website.
Interview Goals
Determine what beer drinkers look for in a brewery’s website experience.
Seek what kind of experience they look for in a brewery (including their website experience)
Understand what is most important to people on a brewery’s website (beer list, hours, etc).
Find out if they like to buy merchandise, attend events, and order beer online
Results
A few major categories came out of my interviews.
Younger adults like to buy brewery merchandise and attend social events
Older beer drinkers like to go to breweries more for the beer itself, and understanding the brewery’s hours and details about the beers are more important
2 users out of 5 said they have ordered in-store pickup for beer before
4 out of 5 users said they like to look a brewery’s website before going to see what kind of beer and atmosphere they should expect seeing in person
POV and HMW
In order to narrow my problem after my interviews, I made point of view (POV) statements and how might we (HMW) questions. This helped me to understand my users’ and their needs.
POV
I’d like to explore improving Invasive Species Brewing’s website because it currently does not have many of the features that users want and other local brewery’s websites have.
HMW
How might we both appeal to a younger and older beer drinker user, while updating the Invasive’s website and keep their current customers loyal.
Second… I conducted a competitive analysis.
Opportunities Based on Analysis
Ability to place to-go orders for their beers
Ease of UI design
Third… I defined my user personas.
User Personas
Next, in order to build my design based on my users’ needs, it was important for me to create a few user personas of young professionals that would be using my website.
Fourth… I planned out the Information Architecture.
Site Map
Next, I wanted to rework the navigation of the Invasive Species Brewing website, as the layout was previously unclear and some links were broken. I needed to update the flow in order to improve the user experience.
Design Decisions
Previously, Invasive Species had ‘About Us’, ‘Menu’, ‘Photos’, ‘Press’, and ‘Contact’ as their main navigation. Based on competitor research and user interviews, I saw the opportunity to add a to-go menu, merchandise shop, and upcoming events calendar. I also removed the ‘Photos’ and ‘Press’ tabs and instead put those photos and awards/achievements all under the ‘About Us’ section, to condense and save room for new pages I was adding.
Task Flows
I also wanted to create tasks flows for each of the main pages I was planning on having on my website. I separated each flow into ‘View Full Menu’, ‘Order Pickup’, ‘Shop Merchandise’, ‘Events’, and ‘Contact’. This helped to organize my pages before going on to sketch/wireframe. I wanted each flow (especially ordering beer and ordering merch) to be as simple and easy as possible, simply adding to cart, checking out, and giving users specifics on when and where their orders would be ready for pickup. I wanted to prioritize the to-go menu/order pickup because the majority of users mostly came to Invasive Species to drink beer.
Fifth… I began the design process and created low-fidelity wireframes.
Low- Fidelity Wireframes
I started the design process by creating low-fidelity wireframes by sketching on my iPad. These low-fi sketches map out 6 different areas of the website (mobile) with different design styles and iterations to choose from and 3 designs for the desktop version.
Design Decisions
Overall, I wanted to keep the pages they had on their website previously that were important (homepage/hours, menu, contact). However, I wanted to rework these pages, as some of these layouts were confusing and links were broken. Based on competitor websites and user interviews, I wanted to add a few important pages. I saw an opportunity to add an order beer pickup section, a calendar for upcoming events, as well as merchandise for sale page. During my user interviews, a few people expressed that they would like the option to order beer and merch in advance to be able to pick them up (Invasive has this capability already but you have to go into the brewery or call).
Sixth… I defined my UI components and brand re-design.ign.
Brand Design
My next step was working on re-doing their logo and branding of the Invasive Species Brewing website. I used a similar color palette to their previous colors because it fits well with their ‘Invasive Species’ look down in South Florida. Iguanas are one of the most invasive species down there and they have a green scaley look to them. However, I have changed the neutral/background color to black instead of the white/tan colors that they previously had. I also changed the typeface to be a little more playful.
UI Component Set
Similarly, I wanted to stick with similar buttons (in green) to what they already have. I just wanted to update their look with more modernized and playful rounded-edged buttons, cards, and dropdown fields. Since people go to Invasive Species to have fun and drink beer, I wanted a welcoming and friendly look and feel to the icons and cards, with the updated typeface.
Seventh… I created Hi-Fidelity Wireframes for both mobile and desktop.
High- Fidelity Wireframes
As I previously stated, with creating my design, I both thought it was necessary to rework some of Invasive’s previous website pages, combine/remove a few, as well as add new pages. My goal with the before/after wireframes were to update their existing pages to have a more cohesive, updated, and modern look. I also wanted to ensure the user flow/experience was improved, as ‘adding to can cooler,’ for example, was not clear that it was a checkout process (and that link was broken). Based on user research and competitive analysis, I also added the checkout pages, to-go menu, merch shop, and calendar as well. I combined my lo-fi wireframes and brand design/UI component set to create these new high-fidelity wireframes.
Before- Homepage
After- Homepage
Before- Menu
After- Menu
Before- About Us
After- About Us
Before- Contact
After- Contact
Added Screens
Eighth… I created prototypes and tested them with users.
Prototyping and Testing
I translated my high-fidelity wireframes into a prototype and tested it with users. To view the prototype, click the links.
What I was looking to test
Understand the ease of use of my website and the completion rate of my user flows
Find pain points within the task flows
Assess users’ feelings toward the UI elements
How I tested
I conducted 2 in-person trials and 3 via zoom. I ran through 3 major task flows.
Navigate to menu to see in person full bar menu
Navigate to Pickup Order menu, add to cart, and checkout
View and filter events. Find Sour Tuesday event
What worked
Everyone was eventually able to get through all flows and complete them successfully
They all liked the overall UI elements/brand design, logo, font, style, and look of the website
Feedback and iterations
Two people were confused why there was a different ‘Full Bar Menu’ and ‘To Go Menu’ and why you can’t click on the beers in the Full Menu. I have to keep it this way because Invasive Species offers only a select amount of beers. I will add the feature to be able to click into each beer on the Main Bar Menu, but have a pop up element that states that this beer is only available in person/on tap.
One person thought a few of the text elements were too small to read. I will be changing some spacing around and making text bigger in the checkout section.
Ninth… I iterated my prototypes based on user feedback.
Iteration #1
I added 2 screens after clicking into a product that was not on the to-go menu. Users were confused why they could only click into items that were in the To- Go menu. Now users will have feedback that the item they selected is only available in store on tap. I also hope that this will resolve issues that users had about why there was a separate meny and to go menu.
Iteration #2
One user expressed that some UI elements were too small or that the spacing was too close to be able to see in the checkout section. In this iteration, made some text bigger, made spacing bigger, and emphasized some titles.
Before
After
Overview of Iterations and Design Decisions
Overall, I made these iterations based on user feedback. My priority throughout the responsive website was to update and modernize Invasive Species Brewing’s existing website in order to improve the users’ overall experience. I wanted to fix broken and confusing links, such as ‘Can Cooler’, which was supposed to be a ‘Cart’, but did not work properly and had a confusing title.
By looking at competitors and user interviews, I saw the opportunity to add important pages that users would want and use, like a calendar of upcoming events (something Invasive Species only has on their Instagram currently), merchandise for sale (which they only have for purchase in store now), as well as a to-go/order pickup page (which you can do only if you call or go into the brewery currently).
I wanted the overall design to feel modern, yet keep with Invasive Species Brewery's look and feel. This way they can both satisfy their customers, keep up with their competitors in the area and differentiate themselves with their unique look.
Next Steps…
Show final prototype to client
Test iterations with users
Prep/organize design file and send off to developers
Key takeaways and learnings…
I learned how to design a responsive website for both mobile and desktop
I also learned how to improve a design, while keeping the branding and style the same
I learned that not all user feedback will be able to be incorporated based on the constraints of the client, however, you can figure out other solutions to help the user experience
I learned the importance of keeping the organization of files in the front of my mind while working
Keep accessibility in mind, I learned, is extremely important when designing text-heavy pages