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.
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.
Social Media, Wine
Jan 2021 — March 2021
React Native mobile application to be deployed on both iOS and Android, and a desktop website.
User/market research
UX design
UI & Interaction design
Interactive prototyping
Design system production
Developer support
Usability testing
(5-person team)
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.
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:
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.
The platform was to be implemented both as a React Native mobile app on both major platforms (iOS/Android), and as a website.
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.
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.
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.
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.
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).
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 wines (determined by number of tags and engagement on tagged posts) were given prominence on relevant pages for several reasons:
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 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.
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.
I collaborated with our branding designer to coordinate new text and color styles with overall branding and product objectives.
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.
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.