Locally owned and operated since 2011, Triangle Wine Company is a fine wine and craft beer retailer with three locations (four at the time of project) throughout the “Research Triangle” area of North Carolina. Each location is equipped with a full wine & beer bar, making Triangle Wine not just an alcohol retailer, but a neighborhood happy hour hang out. Their robust inventory, knowledgeable staff, inviting atmosphere, community engagement, and exciting events set Triangle Wine apart.
I kicked off the project by speaking with one of Triangle Wine Company's three partners - Chris Roche. It was integral that I understood and addressed Triangle Wine's needs and expected results. After discussing customer trends, business goals, branding objectives, and future endeavors, I walked away with the following insights, ready to conduct my research.
In order to better understand the overall nature of the wine & beer eCommerce market, I compared Triangle Wine's online presence with those of its competitors (both direct and indirect). I pinpointed strengths, weaknesses, trends, as well as considered opportunities for Triangle Wine to disrupt the space.
With the goal of better understanding user trends, motivations, preferences, and painpoints when purchasing alcohol online, I interviewed 5 participants (3 female, 2 male) aged 34 - 60, who live in the Triangle area, regularly drink alcohol, and have recently purchased alcohol online for either pick-up or local delivery.
I conducted a brief usability test of Triangle Wine’s current website, as well as asked participants to view the following product pages (without pricing) and decide from where to purchase the product - based strictly on the page. 3 users selected Total Wine and 2 selected Wine.com, but no one would give their business to Triangle Wine. The two primary reasons given were a) inability to see the entire product at first glance, b) lack of any information about the wine itself.
With the intention of identifying patterns in the insights gathered from my research, I created an affinity map. As a result, I was able to clearly define the following user motivators, needs, expectations, and pain points experienced when online shopping for wine and beer.
I wanted to create a reliable, archetypical user for whom this website would be designed, so based on the patterns identified through research, I developed the persona of Triangle Wine Company shopper - Dave. Dave is highly motivated by price and convenience, as well as his taste preferences. He loves learning about the wines he likes and is always open to trying new things - with enough information, at the right price point. As pandemic concerns ease, Dave has returned to going out for happy hour with his friends - always supporting local businesses.
.png)
I next wanted to determine the structure of the website, and through research learned that users are more likely to abandon an eCommerce experience if the page feels “unfamiliar.” The familiarity of a standard eCommerce navigation provides the user comfort and adds credibility to the site. I also pulled from the current Triangle Wine site as well as my discussion with Chris to determine what secondary pages were also required. With a solid understanding of the structure, I was ready to begin designing the site itself.
With the primary goal of our site being to make an informed, confident, & secure purchase, I wanted to explore the various paths a user could take in order to accomplish the task. I identified the pages the user would land on, what action the user would need to take on the page, and what decisions the user would be required to make in order to progress. This process helped me determine which screens were needed for my minimum viable product as well as identify potential user drop off points and areas of confusion.
I started with low-fidelity sketches to ideate potential layouts for the screens within my User Flow. Given that users like their online shopping experiences to feel familiar, I stuck with very traditional eCommerce design patterns in these sketches.
I next I built the following mid-fidelity wireframes of the landing page and product page to clearly establish design patterns and create a base for my high-fidelity prototypes. Everything was coming together, or so I thought...
Desiring feedback, I shared my wireframes in a group critique setting, with my mentor, and even ran a brief usability test.
The consensus was that, although the navigation was clear and easy to use, the site I was designing didn’t match the story I was telling. My wireframes told the tale of a large, corporate retailer (similar to Total Wine or wine.com), rather than Triangle Wine - a local, neighborhood specialty shop and hangout, known and appreciated for its boutique selection, cozy-yet-fun atmosphere, and friendly, knowledgeable staff.
In trying to create a familiar shopping process, I missed the mark on making the site specific to Triangle Wine. To gather inspiration, I shifted my attention to sites for wineries, breweries, distilleries, and small businesses, taking note of interesting design patterns with regards to hierarchy, navigation, content, forms, and more.
Given the time constraints for this project and the impact that I knew imagery would have on the design, I decided to sketch out my new ideas and forgo new mid-fidelity wireframes.
Introductory card containing real images of Triangle Wine locations, employees, patrons, and events. Includes a quick description of the business and its online & in-person offerings. The CTA takes the user to location details.
Featured product carousels highlight products that fall under specific specials, events, or categories (e.g. $25 & under wines, beers brewed in Carolina, style of the month, and more)
Brightly colored product cards emphasize a color on the product packaging and allow the product to shine. Upon hover, details of the product are shown and the user is given the ability to add it to their cart immediately.
Extremely informed style and product descriptions educate users on the various products carried by Triangle Wine and encourages users to try new things. Sections throughout the site provide information from simple points like common varietals, serving temperatures, and typical sweetness/flavor profiles to historical timelines and methods/regions of creation.
Targeted products are featured throughout the site, increasing the likelihood of quickly adding products to the cart.
Triangle Wine’s current logo is overly detailed, fails to reflect the personality of the brand, doesn’t accommodate for responsive design, and cannot be replicated easily. Interestingly enough, this is precisely why the logo is only displayed in one of the four store locations’ signage. I wanted to create a new, clean, easily-replicated, universal logo: one that matched the brand’s personality, paid tribute to the Triangle region of North Carolina, and evoked the high level of quality Triangle Wine customers have come to expect.
To get inspiration for the branding and UI design of the site, I pulled brand attributes shared by customers during the research phase of the project; fun, cozy, friendly, local, knowledgeable. Rounded body copy (Work Sans) contrasts nicely with the heading font (Fonseca), simple line icons prevent the page from being weighted down, real images allow the products to shine, and the calming sand and navy color palette is easy on the eyes, while the bold "red wine" accent/button color draws the users' eyes to what is important.
I next needed to test whether the redesign was easy to navigate, met user needs and expectations, and aligned with the Triangle Wine re-branding. Four participants (2 male, 2 female) ages 35-56 completed a Usability Test via a Figma prototype. Tasks included finding a specific wine, learning about it, and completing the full checkout flow. Tests were conducted in-person and users were asked to vocalize their experience.
successfully completed the primary task and sub-tasks, without abandon.
felt that the rebrand was more in line with their perception of the Triangle Wine brand.
noted that they wanted (and would primarily use) a search function on the landing page.
would (pricing aside) purchase from this Triangle Wine site versus Total Wine or Wine.com.
It was interesting to see that there were not many large-scale revisions required - which I believe can be attributed to using Apple's tested-and-proved Human Interface Guidelines. That being said, I created a priority matrix and made adjustments based on impact and time required to fix.
Insight: Users wanted a secondary navigation, to use when they know what they're looking for. "If I know what I want, I don't want to have to find it within a category - I want to search directly."
Solution: Search bar added - to be located on every page (either visible or hidden within a button). Predictive text will provide users with options as they are typing.
Insight: Seeing non-branded product images was distracting and felt like a placeholder. "Why not use products you sell?"
Solution: Images were replaced with actual branded products sold by Triangle Wine in their stores and online - providing more visibility into Triangle Wine's inventory.
Insight: Users unfamiliar with the traditional 100-point wine scoring system were confused when seeing numbers associated with the various products. "Is this number supposed to mean something to me?"
Solution: Hover state for the wine score provides the reviewer's full review of the wine & insights behind the given score. A link guides users to a page where the wine scoring system is more thoroughly explained.
Insight: Users wanted other non-social media methods in which to directly contact Triangle Wine, specifically requesting an email address.
Solution: This was a super simple fix! Email added to the footer - clicking the link opens a new email in their designated email system.
Execute the site's redesign, actively monitoring KPIs including sales figures, unique site visits, and overall interaction to measure the success of the design.
Design the pages and flows associated with starting and managing a Triangle Wine subscription box. Connect with Triangle Wine owners to determine what information needs to be obtained in the process of signing up for a subscription box and ultimately design the flow for said sign up.
Explore the addition of a live-chat feature. User research indicated that guidance from professionals (including store employees) goes a long way in their purchasing decisions and given the opportunity, they would utilize a chat support feature when exploring new products.
Drink wine.
