Abby Wine

Branding, UX/UI, and Wordpress web design for
a family owned southern californian wine brand

My Role

  • Research

  • Branding

  • UX/UI

  • Copy writing

  • Product photography

  • Web Redesign

About project

Abby wine is a family owned southern Californian wine brand. I worked as an in house designer for Abby wine and a few of its sister start-up companies.

Collaborations

I collaborated with the web development team as well as project and product managers to spearhead this redesign.

Goal

We aimed to improve and increase online presence for this brand by a furniture market show where this product was to be released. 

Focus of redesign

Redesign was focused on a catalog and shop website for Abbywine products.

We chose woo commerce and wordpress for customizability, budget, and ease of use.

Target Audience

Target audience were those interested in boutique wine made in California, heavy emphasis on close network of business owner who happen to be upper class residents in California and China interested in artisanal wine.

Process

Research

Included Stakeholder Interview, Data Analysis, Competitive Analysis and Market Research, User Research.
Research helped us choose which sections of the existing website to migrate, which to eliminate and which to improve. We found the the tone of the website needed to change to more nurturing and mature in order to appeal to our target audience. Visuals were outdated, blog section was overfilled and marketing strategies seemed to be falling short. 

Explore

Included Sketches, Wire-framing, High Fidelity Prototypes, Rough drafts of Copy, Edits to existing content

In this step we put our findings in research to good use and created ideas and scaffolds of designs. Designs were created around the content rather than the other way around. We believe designing has to be done with the content already in mind, otherwise it's more decorations than design. 

Design

Included completing User Interface,  Visual Imagery, adding delightful interactions and pizzazz if you will. ​

We worked on creating an experience from the scaffolds and content already in place. In this step colors and pictures were added, mock-ups were generated and content was edited to be more than just a rough draft. 

Test

Putting all work so far to test with both users and stakeholders. 

We gathered a small sample reflecting our user group and asked for their feedback. We observed them navigating the product, noted their interactions and made adjustments to minimize pain points. Next we took their feedback to stakeholders to challenge assumptions and find suitable and profitable solutions.

Iterate

Rinse and repeat as needed! 

We went back to research, explore, design and test steps for a few sprints until the stakeholders and our small sample of end users were happy with the project.

Research

Interviews

At the discovery phase of my project, I conducted user and stakeholder interviews in order to get a better understanding of the their relationship to wine and their expectations.

I chose this method of research as their target audience were rather personal and they'd have a better idea of the taste of the market. 

Stakeholder questions:

  • Who is the target demographic?

  • What would need to happen in order for you to deem this project successful?

  • What are some websites and brands that you personally shop from? why is that?

  • How do you choose what type of wine to take home?

  • Imagine a friend recommends a wine to you, what makes you most likely to try that wine? 

User Interviews

  • I interviewed 4-5 people. 

  • I was curious about finding their shopping habits and how they choose a new wine so I'd be able to make sure our website was an adequate introduction for the wine. 

  • For different people different aspects were important, some cared about the type of tastes the wine would offer, some simply liked trying friends suggestions. I found that most people go towards familiar wines compared to wines they don't know, also knowing that a wine was made with love and in smaller amounts made the wine seem more unique and thus more people were likely to want to try it. 

  • Based on these insights I made the following changes:

    • I added more information about the types of wines and their taste profiles. 

    • I emphasized the role of sharing in wine for this brand 

    • I created more realistic bottle mockups to increase familiarity for the brand. 

Explore
Review sketch of past design

Review sketch of past design

Sketches

I started with handwritten and drawn sketches of the current design and reviewed the design quickly. I made note of links that didn't work, images that were misaligned, padding and margin inconsistencies and etc.

Next I sketched a few iterations of possible solutions to the problems I had noticed, I went through each iteration making sure it aligned with our end users and our branding guidelines.

Notes were made on a Rocketbook notebook to be
organized more easily and use less paper and be eco-friendly

Abbywine

UI Design

Knowing our primary users will be business owners, our brand is a more luxury brand, and we place heavy value on family and connection I chose gold and black for the label of the wine and along with more earthy tones for the web design.

Wordpress with Divi builder plugin was used to quickly design and develop the pages. I did the majority of the design and development through the builder but certain elements needed custom coding and were done by our development team.

I made sure the designs were all responsive and worked well in tablet and mobile format as well as various desktop sizes.

The designs ended up much more cohesive and aligned with our branding guidelines and created a familiar yet luxurious feel to the website.

Design
Test

User Testing

We tested the iterations of the designs by repeatedly seeking short bursts of feedback from people in our user group.

We aimed to see if the redesign did provide a better online presence for the brand, and if the values were more transparent and easily communicated through the current design.

Our testing methods included user interviews with a few sample questions, moderated run through of the interactive prototypes, some surveys and A/B testings.

We incorporated the feedback we received in each iteration of the design until the feedback was almost unanimously positive and reflected a tangible solution to the problem we set out to solve.

Iterate

Before Redesign

  • Mismatched spacing

  • Website copy is temporary

  • Broken layout and alignment

  • Overfilled blog posts

  • Bad quality product images

  • Typography inconsistent with brand aesthetic

After Redesign

  • Corrected issues found

  • Updated photography and mockups

  • Rewrote web and wine copy

  • Added SEO keywords to backend

  • Product management

  • Mailing list set up

Post Project Thoughts

Since this was a start-up and the design team consisted of mostly me and an administrative assistant, I learned a lot about the ins and outs of an end to end project. This project was unfortunately cut short due to the pandemic hitting in early 2020. Due to this I never had access to metrics or other measures to calculate the success of the designs. 

Thank you to the team at Abbywine for this experience! 

12
Iterations
42
Screens
77
cups of tea
Drop me a message
Let's share ideas & discuss ways to collaborate!