Buoy Beer
Project Overview
From Hops to Homepage
Buoy Beer Co. is a renowned brewery that prides itself on crafting high-quality beers in a unique setting. Located in Astoria, Oregon, Buoy Beer Co. boasts stunning views of the Columbia River, making it a popular destination for beer lovers and tourists alike.
Challenge
Buoy Beer had earned a loyal following of craft beer enthusiasts over its ten-plus years in business but struggled to attract new customers to its outdated website despite its popularity. Realizing the website failed to reflect the quality and uniqueness of their beer offerings, Buoy Beer turned to Revere, a digital design agency, to overhaul the site.
The goal was to create a modern, engaging, and user-friendly website that aligned with Buoy Beer's brand identity and effectively showcase Buoy's products and appeal to new audiences.
My Role
As the web designer for this project, I worked closely with Revere's creative director Matt Cole as part of the digital design team tasked with revamping Buoy Beer's website. My time was spent transforming the initial homepage design into additional visually appealing, user-friendly site pages that accurately represented Buoy Beer and showcased their products.
My primary responsibilities included:
- Conducting user research to identify website pain points
- Creating wireframes to outline site architecture
- Designing visual elements and layouts for key pages like the beer catalog, beer profile, about, contact, press/distributors, and careers pages
- Maintaining brand consistency across the new site by expanding the visual language established on the homepage
- Collaborating with developers to ensure proper implementation
- Presenting design iterations to stakeholders
- Designing and building a WordPress theme to tie the pages together into a cohesive online presence
- Adapting the designs into responsive layouts suited for multiple device sizes
Solution
By analyzing Buoy Beer's brand identity and online presence, we revamped their website with a modern design, intuitive navigation, and engaging content. The result is a visually appealing platform that showcases their brewery experience, strengthens their online presence, and provides an immersive digital experience for beer enthusiasts and tourists.
01
Discovery
Visual Direction
Setting Sail for Insights
At the heart of our mission was to craft a website that truly celebrates the essence of Buoy Beer Company. Inspired by the rugged landscapes of Astoria and the captivating stories of loggers and fishermen, we sought to infuse every corner of the site with these distinctive cues, ensuring no detail goes unbranded.
We started by researching other brewery websites and analyzing the strengths and weaknesses of Buoy Beer's current site. Immersed in the world of brewery and craft beer websites, we gained invaluable insights into prevalent structures, layouts, and functionalities, ensuring we could design an exceptional user experience that surpasses expectations.
We focused on Buoy Beer's brand architecture, what that told us – and what truly mattered – the customer, the product, and the experience. Knowing this, we decided to create a design infused with branding cues and details that authentically reflected Buoy's unique character.
02
Design
Directing the UI
Crafting Brewtiful Webscapes
With client assets, we embarked on a journey that seamlessly blended a user-centric approach with a content-driven strategy.
We charted a course through information architecture development, wireframing, ideation, and prototyping. We designed high-fidelity mockups that brought Buoy's vision to life, ensuring accessibility through readability, color contrast, and intuitive navigation. We refined based on client feedback, resulting in a captivating website that captures the essence of Buoy Beer and invites users to engage in a seamless online journey.
03
Delivery
Web Development
Waves of Collaboration
Embarking on the final leg of our journey, we seamlessly bring Buoy Beer's meticulously crafted website designs to life. As we hand off the plans to our skilled developer team, we bridge the gap between vision and reality, ensuring a captivating and fully functional online experience.
Collaborating closely with our skilled developer team, I ensured a captivating and fully functional online experience for users across all devices. We facilitated the efficient implementation of visual elements and interactive features by providing comprehensive design documentation, style guides, and assets. Together, we addressed technical considerations and offered ongoing support to ensure the faithful translation of the design vision into a stunning, user-friendly website. The result surpassed expectations, featuring breathtaking photography and an intuitive navigation menu that delights users. Additionally, we empowered the client with a content management system for easy website updates.