Parenti Vineyard

- Case Study -

A responsive website for a small local vineyard to attract potential buyers.

Project Overview

✧ Project Dates: June 2022 - July 2022

✧ Client: Parenti Vineyard

✧ Project Background: Parenti Vineyard is a small, family-owned vineyard in Northern California looking to expand their business.

✧ Role: UX Researcher, UX/UI Designer, User Testing

✧ Deliverables: UI kit, brand identity, and a responsive website (desktop & mobile)

✧ Tools: Figma

✧ Project Problem ✧

Currently, there is no online space for potential buyers of Parenti Vineyard to learn about or contact the company.

Empathize

Competitive Analysis

During industry research, I found that it is common for smaller vineyards to have a long-scroll single page website with an emphasis on nice professional photography.

I also wanted to learn more about potential clients of the vineyard and what they are looking for when sourcing grapes. Recently, an increase in the number of small and big wineries that do not have space for vineyards are competing with each other to find quality grapes. Wineries are looking to create a lasting partnership with local vineyards.

1-on-1 Interviews

Interviews were both conducted with the company’s stakeholders and potential users to identify what each needs when selling or procuring grapes.

Goal

  • For business:

    • A place for buyers learn about the vineyard and contact the company.

  • For user:

    • Source grapes that meet their specific needs and build a lasting partnership with quality suppliers.

    • Produce high quality wines and establish a good reputation within the industry.

Frustrations

  • For business:

    • Finding a starting point of contact.

  • For user:

    • Struggles with lack of transparency in pricing and availability.

    • Encountering slow or ineffective communication with potential grape suppliers.

Define

User Persona

Meet Michael Bradley, an owner of a small winery looking to source grapes from local vineyards for his wine production and a potential customer of Parenti Vineyard.

Empathy Map

With a persona set, I created an EmpathyMap to dive further into Michael’s thoughts and circumstances.

Feature Roadmap

Understanding Michael determined the features we needed to include in the company’s website. The features that meet both user and business needs were given the highest priority. Other features that would also contribute to the quality of the website were given various levels of priority. For example, since small wineries are looking to partner with vineyards, a section highlighting partners on the website will show the brands commitment to building strong relationships.

Ideate

Sketches

I started sketching out layout ideas for a one-page website.

Low-Fidelity Wireframes

After choosing the flow of the website, I created a low-fidelity wireframe for both desktop and mobile. In order to ensure that the website remained concise and in-line with the one-page scroll format, each feature had to be both efficient and flow smoothly.

Screen 1: Landing Page

Screen 2: About Grapes & photo slider

Screen 3: About the Company

Screen 4: Partners and Contact

Screen 5: Gallery & Footer

Design

UI Kit

After discussing with the company, we agreed the brand identity should highlight the charms of the small vineyard. The color palette of dark green and burgundy consists of inviting, earthy tones while the typography emphasizes the vineyards historic roots.

The logo was created on Figma based on what the owner had envisioned. He stated he wants the logo to be a wine glass on its side with a moon behind it and a wine spilling out of the glass. From there, the UI kit was completed to create consistent elements throughout the page.

High-Fidelity Wireframes

The UI Kit was added to the wireframes to create designs ready for prototype and testing.

Testing

Usability Testing

The next step was to turn the high-fidelity wireframes into prototypes to test user flow. The goal of the testing was to identify areas that need improvement regarding the visual design and usability of the website.

← Prototype on Figma

Task #1:
Learn about Parenti Vineyard by scrolling the one-page website. Do the sections of the website flow cohesively? Is the visual design consistent throughout the page? 
Tests: Visual Design, Information Architecture

Task #2:
You want to connect with the owners to learn more about the vineyard. Send them a message on their contact form. 
Tests: Anchor-Point Navigation, Efficiency, Usability

Testing Results

The results of the usability testing were compiled into an infinity map to find pain-points and any user suggestions.

Iterations

To streamline communication, I added a F.A.Q section to provide more information to potential clients.

Reflection

If given more time the next steps taken in the project would be:

✧ Add Lower Priority Features

  • Create a Gallery Page with high quality photographs

✧ More Testing

  • Test readability with different typography for body text

  • Test design on mobile

✧ Polish Visual Design

  • Have professional photos taken

  • Possibly rework logo design as there were limitations using Figma

✧ What I Learned ✧

This project provided me with an opportunity to understand the limitations of working with a small business. As it was my first time collaborating with company stakeholders, I had to strike a balance between accommodating their requests while applying insights gained from competitive research. Additionally, I had to be aware of the fact that I will eventually build the website using a platform like Squarespace and to keep my designs within the constraints of a website builder.