Social Wine

Problem

With lockdown orders and public space restrictions, wine tasting/socialization has made headway into the digital space over the past year. I worked with the client to revitalize their defunct wine shipping service into an online platform for sharing wine-related content.

Result

A cross-platform social network that ties wine enjoyment, conversation, and discovery together for enthusiasts. Over 90% of our 30 user testers were able to figure out how to make a post, purchase a wine, and start a conversation.

Industry

Social Media, Wine

Duration

Jan 2021 — March 2021

Product

React Native mobile application to be deployed on both iOS and Android, and a desktop website.

My Roles

User/market research

UX design

UI & Interaction design

Interactive prototyping

Design system production

Developer support

Usability testing

(5-person team)

Objectives

Define the range of expected user types in terms relevant to the design of the platform.

Substantiate  interaction design patterns with necessary state screens.

Refine components and interactions in a systematic design document for developer handoff.

User Research

The research process was conducted over 1.5 weeks, with objectives of defining use cases and target audiences in terms of wine purchase/enjoyment, social/informative wine-based activities, social media usage, and online reviewing. 

Competitive research involved in-depth platform and review analysis of 4 major competitors in adjacent product spaces.

Market research was conducted through a range of papers and articles in wine and social media spaces. 

Our findings helped to:

• Prioritize wine attributes that mattered most for enjoyment and purchase.
• Estimate average length of wine-related posts and follow-up conversation.
• Gauge potential interest in a livestreaming feature, and hypothesize whether it may become more popular as the platform grew.
• Compare user activity at computers and on mobile devices.
• Pinpoint microfeature shortcuts and functions to help our primary target audience get the most out of the platform.

Defining Audiences

Moving into the definition phase, insights from research factored into 5 target audience personas, 3 of which were to be focused for the design of the MVP as users we most wanted to draw to the platform. These groups of users were based on attributes like general wine knowledge, involvement in the wine space, and engagement intent.

Information Architecture Overview

Mobile

Desktop

UI Design

The platform was to be implemented both as a React Native mobile app on both major platforms (iOS/Android), and as a website. 

Onboarding

Onboarding was kept to essential profile information, finding starting content, and establishing a user's taste profile. This taste profile would be used to recommend wines as well as content.

Unified Tag System

A unified tag system tied the entire platform together, by allowing the user to describe wines, reference specific wines, search wines, filter content, and follow content. This was intended to help provide a semi-structured form of communication for users to employ in reference to wines and activity.

Community Engagement

Wine discussion forums and apps were examined to help estimate length of posts and replies on various wine-related topics. We settled on 3-4 lines of displayed text before a "Read More" button, and a 2-tier reply system to facilitate conversation between users as well as the original poster.  We ensured that context menus would allow for a group of users to break off into a private conversation easily, facilitating a major use case. This use case was later verified through user testing, with 7 out of 30 (23.3%) participants electing to message a new user via the post overflow menu as opposed to the messaging tab. 

Custom Feeds

Tags were initially rolled into a feed selection menu, as a method for industry people and other advanced users to keep up with specific subsets of content. After revisions, we determined that this option could be simplified into a single "followed tags" menu in order to maintain a single unified feed. 

Contextual Wine Links

Users could insert a link to a specific wine by tagging said wine in several different locations. This was meant to help facilitate both conversation (through information-sharing) and wine sales. It also provided an avenue for the platform to support sponsored content in the future. This was verified as a useful purchase path as 5 out of 30 (16.7%) user testers navigated through one of these links as opposed to through another path (when starting from the home feed).

Livestream Integration

The livestreaming feature wasn't expected to be widely utilized at first, but was considered a worthwhile investment to develop for the MVP due to long-term potential (this supported by remote wine-tasting activities found on other platforms and through market research). As such, livestreams were woven in with the the other content types in the main feed and search function.

Trending Recommendations

Trending wines (determined by number of tags and engagement on tagged posts) were given prominence on relevant pages for several reasons:

• We expected users of a wine social network to care significantly about which wines were currently popular.
• This category could provide a tie-in with other venues for wine discussion in the wine community.
• The prominent display would help gamify the platform for social content creators.

Addressing Privacy Concerns

Privacy concerns resurfaced several times during the research phase, with 76% of user testing respondents rating the importance of their privacy on this type of application as 7/10 or higher. This was expectedly due to the content of the platform and potential resulting implications. We wanted to ensure that privacy options were both robust and self-evident for concerned users to adjust as they saw fit.

Usability Testing

Usability testing was conducted with 30 people through Maze.co, in order to detect usability issues with primary tasks and gather rudimentary feedback about subject matter.

Primary tasks success rates were over 90% with moderate misclick percentages:

In addition, both our slight emphasis on privacy settings, and decisions regarding wine attribute categorization were reflected in user sentiments when polled on these topics, helping to add credence to our original secondary research material.

Redesign: Publishing a post

One signficant result of the usability test came from noticing a particularly high misclick rate on the "New Post" screen. Testers commonly mistook the links to adjacent post options—Rate A Wine/Go Live—as the publish button. The correct location was in the top-right of the screen.

This issue was addressed by changing the styling of the "Publish" button to the primary variant, which we thought would likely result in better recognition of the primary action.

Branding

I collaborated with our branding designer to coordinate new text and color styles with overall branding and product objectives.

Design System

As the design of the platform developed, so did the underlying components. These were organized into a guide as a supporting document for our development team. This document also helped to better communicate interactive aspects of various elements, e.g. the input of tags in text fields.

Production

Specifications and assets were exported for development, alongside the design system and other supporting materials.

The document was intended to be utilized in a design spec context, where developers could click on a component to view specific measurements.

The platform is currently in development.