Gravel Bar Winery
Gravel Bar Winery is one of many wine brands from Washington's Columbia Valley appellation and one of Bronco Wine Company's best Washington wines. Gravel Bar didn't have a web presence and was under consideration for DTC treatment.
The Challenge
My goals for the project were simple. I wished to create a unique look for the brand website that matched the simple elegance of the label and provide great detail and prospective consumers when learning about the wines. Also, it had to be a functioning e-commerce website. Gravel Bar has a pretty generic but elegant label, which means I didn't have too much to work off when starting this project. One challenge was elaborating on the simplicity and creating a website that matched that, but with some extra pizzaz. Another problem was that I was stuck using an unfamiliar e-commerce platform called "WineDirect," which specialized in wine e-commerce.
The Design Process.
Before I had even got this project, I had started mocking it up in Figma. I was testing out the browser software and found it to be advantageous and useful when it came to producing mockups for websites and apps. So when I landed the job, I already had a rough baseline to start from (my Figma design). I had decided to use Webflow as a way to build the website more effectively before importing it into WineDirect. I created the layout I had designed in Figma and realized it looked a little bland. After that mental check, I created a background video version of the vineyard in After Effects, where the clouds in the background to subtlety move. Realizing that it didn't solve my problem, I introduced some paper tear png images to separate sections. The tears ended up looking like mountains overlooking the content while adding a little bit extra. Once I got the layout and basic design down, it was time to import my design into WineDirect.
The WineDirect import was by far the most challenging part of this project. It took much back and forth with the CSS to make sure the styles matched what I designed while not breaking the basic WineDirect template. Once I fixed the CSS, I incorporated the WineDirect CMS into the design and familiarized myself with their CMS tools. After some experimenting, I was able to get a good layout. One problem I was running into was my inability to customize CMS content too much. I worked with the WineDirect developers on how to incorporate a custom product slider onto the home page. And once that was finished, the website was starting to come together. The site was mostly finished when I found out that the cart wasn't going to be enabled on the website (to reduce costs). I had to implement a solution, and that was hiding the buy buttons and the cart/account features. I made sure to only hide them just in case we decided to bring them back later.
I had one final hurdle before the website could officially launch. The site would load a replacement font when the custom Webfont wouldn't load. This font rendered hugely and kept breaking the site. My solution was to make a simple javascript solution that checked to see if the Webfont loaded. If it didn't load, the script would parse some custom parameters to the affected text. This last change fixed the problem and allowed the website to launch within a month.
Outcome.
In the end, Gravel Bar got a website that matched the brand's look while enhancing it a slight bit. The site was well received by the company and helped flesh out the brand more. This site was my first large scale åwebsite project, and I learned a lot for future projects.