Approachment Wines
Winery webpage design & marketing materials.
I redesigned the Wine Club and Artist Pages.
2X increase in page views
Goal & Result
My goal was to help build Approachment Wines’ online presence by building the Artists page and the Wine Club page.
Role: User Experience Designer
& Developer
Result: Custom designed Squarespace website pages that replaced the old website and achieved a 100% increase in page views.
Site Layout Planning & Gathering Inspiration
Thinking about user & business goals
I created an information architecture (or site layout) to plan the website’s functionality and user experience. It was strategically created to achieve business goals such as
increasing wine club subscriptions
increasing traffic to the Shop page and boosting online wine sales
building a relationship with customers through online branding
Gathering Inspiration Through Competitive Analysis
A critical step of the design process was to review existing websites with similar business goals, and the company Pinterest board, so that I could create something that aligned with their vision.
Next Step: Designs!
How I designed the pages based on the site layout plans
The next step was to dive and and create v1 designs for the client.
I designed the Wine Club Page and the Artists Page. In my designs, I prioritized business goals by
adding movement to artists page to build Approachment’s branding as fun and approachable
presenting wine club options in one frame with calls to action to join the club
Adding a How it Works section to show the simplicity of the wine club process
Client Review and Iteration
Iteration of bottle movement elements & animations
My first iteration of the wine bottle graphic included a spinning circle behind the bottle. The clients loved the movement, wanted something a little less busy.
To incorporate the movement they wanted without going overboard, I added a hover animation on the bottles, so they tipped as if pouring a glass. This was much subtler and not distracting for users.
Development
& Dashboard Summary Designs
In my designs, I included a bottle animation that tipped upon hover, which means I needed to develop the animation with custom code in Squarespace.
To develop the custom CSS and HTML features, I utilized a iterative process helped me realize my initial design vision.
I also made sure the website was responsive on mobile devices and tablets.
Marketing Materials Refresh
for wine club launch party
Version 1
Version 2
The goal of this handout is to facilitate wine club sign ups, which was one of Approachment Wines’ business goals going into this project. In this design, I prioritized utilizing the existing branding to create a fun, bold design. My iterations of the design are below, improve on by design critique.
As a Designer and Developer
My Growth
Approachment Wines Launch Party featuring my designs!
Through this project, I learned how to
balance multiple business goals in my design solutions.
use brand guidelines and to convey brand personality through design.
iterate on designs based on client feedback
consider the feasibility of my designs (Since I had to build them)