Shale Oak Website & Webstore
Summary
For this project, I conducted a complete website and web store overhaul for Shale Oak Winery in Paso Robles, California. The client felt that their website was not adequately modernized and did not reflect their brand identity. My mobile-friendly redesign modernized their website, reduced visual clutter, and helped convey their story more effectively.
In the 30 days immediately following my redesign’s rollout, the conversion rate for tasting room reservations was increased by 32.5%.
Stack:
Wix Website Builder
Wix’s Velo API (Javascript)
HTML/Responsive CSS
The Client
Shale Oak is an upscale and sustainable winery with a beautiful and striking LEED Gold certified tasting room. Originally, I had worked with Shale Oak as their Digital Content and Marketing Lead, a role that dealt primarily email marketing and graphic design work. I was excited to be given the chance to flex my UX design and development skills to redesign their website and webstore.
Competitive Analysis
Before beginning, I performed a competitive analysis to see what worked and what didn’t work in other similar winery’s websites. I did a formal deep-dive on five similar business and had a few main takeaways: Easy access to reservations is a priority, Shale Oak reservation system should be switched, and effective storytelling makes the design more personable.
Design Philosophy
Going into this project, the priorities that I had were matching the site to Shale Oak’s brand image, consistency and simplicity in page design, mobile optimization, and of course intuitiveness.
Deliverables
Main Site - Desktop
I wanted to make it as easy as possible for the user to perform the most common actions. As such, there are three different easily accessible ways to navigate from the homepage to the Visit, About, and Shop pages. I removed a vast matrix of pictures that previously cluttered the site in favor of more intentional use of pictures.
Using Javascript and Wix’s Velo APIs, I created custom functionality for opening up wine technical information sheets that was needed by the client that Wix did not support out of the box.
Main Site - Mobile
Mobile Optimization was a priority for this design, as the site analytics showed that roughly 60% of visits were from mobile devices. Optimization for mobile included changing text size, hiding unnecessary elements, and giving easy access to the most common actions a user takes.
Web Store
Designing the web store was a unique challenge, having to work within pretty firm constraints. The webstore is hosted by Orderport, Shale Oak’s point of sale and inventory tracking software. Orderport provides the underlying structure/HTML of the site’s body. As I had no control over the hierarchy of these elements, I had to get creative when styling the elements in CSS to make the site work well on both Desktop and Mobile.
I produced a matching header and footer with HTML/Responsive CSS and added a floating cart that updates with changes to your cart that makes mobile checkout substantially more intuitive and seamless.
In addition, I cleaned up their product inventory entries, which allowed for the proper display of bottle shots, tasting notes, wine technical information sheets, awards, and production notes.
Outcomes
My Redesign led to Shale Oak’s website better matching their brand identity, a much improved user experience for guests looking to make a reservation, an improved online shopping experience, and easier access to important information for distributors and wholesalers.
As mentioned in the summary, in the 30 days immediately following my redesign’s rollout, the conversion rate for tasting room reservations increased by 32.5%. As getting customers into the tasting room is the primary way to drive up revenue for small wineries, this was a fantastic outcome.
Wine Shipment Insert
This was my first real foray into pure print graphic design work. I was tasked with designing two items, a dual-sided bifold brochure and a dual-sided half-letter size wine information sheet for Shale Oak, a winery in Paso Robles, CA. This project necessitated coordinating with a printing service local to Paso Robles to figure out the printing medium, quantity, and file export specifications.
Tech Used:
Adobe InDesign - Composition and Typesetting
Adobe Photoshop - Image Retouching and Manipulation
Dual-Sided Bifold Brochure
This bifold brochure provides a beautiful greeting to wine club members when they open up their shipments. With stunning views of the winery, barrels, and vines, the brochure houses a note from the winemaker and an overview of the wines included in the shipment.
Dual-Sided Information Sheet
This half-letter size insert for the bifold brochure provides more detailed information on the wines in the shipment including harvest date, cases produced, fermentation and cooperage details, and acidity levels.
