Spirit Lists App Feature Expansion
Building off the existing spirit list functionality - which was limited to three pre-named public collections - to include an unlimited number of custom named lists, private lists, inventory and notes, and multiple user-to-user social components including co-ownership and follow list options. The business planned to designate some of the new functionality as Pro only (paywall).

Year: 2020-2021
​
Tasks: UX/UI, Wire Flows, Visual Design
​
Tools: Axure
​
Client: Distiller
​
Collaborations: CEO, CTO, Developer
Presented as a list of links to dev ready screens.
Existing Functionality & Design
The existing spirit lists were limited to three pre-named spirit collections: Collection, Top Shelf and Wishlist. Spirit cards contained in each list displayed a bottle image, spirit name, origin of location, user and expert ratings, and were linked to their respective spirit detail page. All existing spirit card attribute displays and functionality needed to remain.


Goals & Desired Functionality
Adding new features and functionality to the spirit lists would not only provide added benefit to users, thus increasing app activity and account signups, but the business intended to hide some of the features behind a paywall to encourage Pro subscriptions.
​
The initial desired feature set included, but was not limited to:
​
-
An unlimited number of custom named spirit lists
-
List images, either custom or bottle image compilation
-
List description
-
Private list option (All lists are public by default)
-
Spirit level bottle quantities (Use case: inventory management)
-
Co-ownership of lists / List Members
-
Follow / Watch List option
-
Spirit level notes
List Cards, Spirit Lists & Spirit Cards
I knew that finding available space for new attribute displays on the existing spirit cards would be particularly challenging, so I kicked off the project with some list card layouts to start developing some UI patterns without obstruction.

List Card Requirements
The attribute display requirements for new list cards were list name, image, quantity of spirits within a list (high priority at the time, but a strong point of confusion later due to its similarity with inventory display), a user's relationship to the list, the presence of individual spirit notes, number of watchers, number of members, and private list icon when applicable.
None of these attribute displays needed to be individually linked: tapping the card would simply open the list itself (more on interactions later).
Using a narrow 320px frame, I took a first stab at some layout options while determining the conditional displays required to denote relationship and private: View wireframes in Axure

We were clearly running into spacing and visual flow issues, so I tried a different approach: displaying the attributes as non-interactive informational tags that could easily respond to - or stack - on smaller screen sizes.

The tag approach was well received so my next step was to determine how users would access the additional list attribute data and functionality. I'd envisioned expanding tiles from the get-go, allowing users quick access to their desired screens and other pertinent list information in fewer steps. The UI shown below is from list owner's perspective. View wireflows

Tiles expand to show additional list attributes and functionality including:
​
-
List description
-
Bottle images teasing spirit contents (display order TBD)
-
List members
-
List followers
-
Owner-only access to list settings
-
Copy list action
-
Add spirit action
-
View spirit list action
List Relationships & Conditional Permissions
​A list can have a single owner, one to many members and one to many followers. List permissions were dependent on the user's relationship to the list, specifically;
​
-
List owners have list settings access for updating list name and description, and inviting and managing participating list members.
-
Members can add and remove spirits, and contribute spirit notes.
-
Followers have list viewing access to owner and member list updates.
The user's lists home screen was comprised of owned lists, lists they are a member of, and lists they follow, each requiring conditional actions:

List members can manage spirits and leave a list, but not access settings

Non owners and members can only follow or unfollow a list
List Member Management
List owners have access to member management from either the expanded tile view or within list settings:

An Added Social Benefit
Distiller had an existing user-to-user follow function (not list followers - this point of labeling confusion will come up later) for which they receive notification when a followed user adds a taste. Providing users the option to view a public lists' members and followers had the potential to encourage more user-to-user follows:

Spirit List Screens, then a Pivot or Five
Required functionality on the spirit list screen included adding spirits (the priority CTA), copying the list to another list, and list settings access.
Required functionality on the listed spirit screen included notes management, deleting the spirit from the list, copying the spirit to another list, bottle quantity / inventory management and spirit details screen access.

Dev Constraints & UI Concerns
It was discovered that the expand / collapse tile functionality would be outside the scope of development due to either system constraints, resources, or a combination thereof.
Additionally, there were some new - and valid - concerns brought up by the business regarding the non-interactive informational tags on the list cards, specifically:
-
We would be introducing a new UI pattern that didn't currently exist in the app and weren't open to modifying the existing spirit card design to match, and;
-
Users could infer the tags were interactive.
​
Lastly, the business decided to prioritize the list description, so I needed to find space on the list card.
Clearing up Potential Points of Confusion
User Followers vs List Followers
The list "Follow" label was going to be in obvious competition with the well established user-to-user "Follow" label, so we brainstormed alternative options ultimately landing on "Watch" list. This had a waterfall effect on iconography, albeit a positive one:
​
-
The previous "user" icon used to represent list followers was updated to an "eye" icon representing watchers
-
The previous "network" icon used to represent list members was updated to a "user group" icon
Quantity of Spirits in a List vs Bottle Quantity (Inventory)
Since inventory was planned as a Pro only paid subscription feature, it required visual priority on the spirit cards. I had intentionally avoided using a bottle icon to represent inventory on the spirit cards - even though it was the obviously choice - to avoid confusion with the bottle icon on the list card representing quantity of spirits in a list.
Initially, I proposed a visually prominent text based message as a bottle icon alternative.

Though I don't recall the specific reasoning behind it, the business ultimately decided to remove the quantity of spirits contained within a list altogether, freeing up the bottle icon for use as inventory representation.
The Aftermath
Removing the quantity of spirits contained within a list freed up real estate on the list card, allowing me to display all of the required attributes outside of the stackable tags with plenty of breathing room. Plus, the unboxed format better matched the UI on the existing spirit cards.
(In hindsight, the quantity of spirits contained within a list could have retained low priority presence somewhere in the spirit list screen header.)
With the expand functionality out of scope, I had to add another header row of actions on the spirit list screen to allow for list settings and description access. Inventory and note icons were added to the existing spirit cards.

Conditional UI
With functionality, attribute display requirements and iconography nailed down, my next steps were to accommodate for conditional displays and actions based on a user's relationship to a list.
​
Though not all conditions will be featured in this case study (or it will never end!), below are a handful of deliverables I designed for developer handoff and presentation material use during team meetings.
List Members
List members can leave a list but don't have access to list settings. When a user leaves a list, they are offered the option to stay on as a list watcher:

Publicly Viewable Lists
Unless manually set to private by the list owner, spirits lists are open to views by the user base accessed from the list owner's public Distiller profile.
​
Users viewing another user's list can opt to Watch / Unwatch a list, but are not privy to the presence of spirit notes and inventory on the cards:

Truncation, Color, and...Skittles?
Distiller has an existing color palette that's quite bold: think Flamingo Red, Lime Green and Bright Blue. Each color represents a spirit family (Whiskey, Vodka, et al) and is thoughtfully used throughout the website and native app on specific elements such as primary CTA's and iconography.
When appearing within a contained spirit family section of pages and screens, the spirit family color looks elegant and does its job well. When multiple spirit families are present in a list, the colors mixed together can appear quite busy; hence, the "Skittles" look reference frequently mentioned in team meetings.


With the addition of an inventory and note icon to the spirit cards, we were definitely heading further into "Skittle" territory (A and B) so I explored some alternative color options (C - E). At the same time, we were debating on whether or not to truncate longer spirit names or adjust the card layout to fully accommodate them:

Whatever the truncation and card layout decision, we planned on applying it to the list cards for consistency:

In the end, we chose to position the list titles and spirit names above the image with no truncation and used black icons throughout:

However, spirit family colors did retain some presence on the listed spirit screens:

Developer Handoff
I laid out all of the user list associated screens at both 414 and 320 pixels to indicate how elements should be positioned at different screen widths, and provided developer access to Axure Cloud where they could utilize the Inspect feature. And given that Distiller was a long term client, they knew how to reach out with questions.
Success Metrics
The downside of being a UX/UI contractor is that my involvement with a project typically begins at the ideation stage and ends at the developer file handoff stage, so I'm usually not privy to success metrics. And in some cases, it can take up to a year or more for a project to launch publicly. This is one of those cases.
Takeaways
Distiller has been an active client of mine since the beginning of 2020 and I've had the pleasure of working on many, many projects with their team over the past 2+ years. Having worked in a corporate team setting at Hagerty for over 5 years, I'm no stranger to the twists, turns and pivots that occurred with this Spirit Lists project and understand that the business decisions, system and resource constraints behind them come with the territory.
​
In hindsight, the one thing I would have done differently is maintain a better organized Axure file and change log for preparing detailed case studies.