Bold Commerce

Flocker Product Builder, Creator Storefronts

Flocker launched publicly in early 2019 giving content creators tools such as a product builder, dashboards to track sales, and a storefront that allowed subscribers to purchase products at a discount. Shortly after launch, our team reached out to creators who had been using the service looking for their feedback on the experience so far.

Based on heat maps and behavioural analytics, I understood that our builder required a more logical UX flow. Creators also told us that their supporters wanted a more familiar shopping experience and a better idea of what their Twitch subscription provided them through Flocker.

About

Flocker helped content creators avoid churn in their subscriber base by offering incentives to their Twitch subscribers.

Timeline

2018—2020

Responsibilities

Wireframing, interface design, user testing, prototyping, illustration

Product builder (2018—2019)

During session recordings of creators building products, I found the following issues consistently occurred:

  • They interacted with fields completely out of order because they were arranged in a way that didn't make sense. For example, creators were asked to name a product before choosing the type.
  • They experienced difficulties or errors related to image resolution, file size, gradients, transparencies, etc.
  • They weren't setting subscriber pricing for their products, one of our best features, because it was hidden.

Content creators have enough on their plates. The last thing I wanted was a product builder that made more work for them. These session recordings and interviews helped us identify several points of friction, which the team moved quickly to address.

Product builder (2019—2020)

  • 1 Product images were added to the type dropdown so creators could see what it was exactly they were building.
  • 2 Some of the lower contrast colours, like teal, were adjusted to address long-standing accessibility issues.
  • 3 Links to download the applicable product template were added inline with the graphics section to allow for pixel-perfect artwork and placement.
  • 4 To address common issues with transparency or gradients in images, tips with best practices were added throughout the process.
  • 5 Product name was moved down as creators typically didn't name products until they had added artwork. I made products available in all sizes by default and removed the size picker.
  • 6 Subscriber pricing fields were made visible at all times under regular price.
Results—

The impact of these changes to the product builder was seen immediately. The number of created products increased dramatically, while the time spent creating each one dropped. The number of products flagged for having low-resolution artwork declined, which also took load off our review team. Creators saw increased interest and sales amongst their supporters with sub-based pricing added to their products.

Shortly after completing the work on the product builder, I turned my attention to the next iteration of the creator storefront. The version Flocker launched with had been well into development when I joined the project so, following the launch of Flocker and based on the usage and feedback of users, it was a priority to revisit when we had the resources to do so.

Creator storefront (2018—2020)

Product detail page (2018—2020)

From conversations with creators as well as an internal design audit of the existing CX, several issues were brought to light. Most prevalent were the following:

  • Many creators were simply using their landing page as a store first and foremost, disabling the subscription and donation widgets. The original design didn't effectively accommodate this.
  • The products creators were building displayed close to the fold or below it.
  • The cart appeared as a FAB in the bottom right of the page, which wasn't immediately apparent to supporters.
  • Product details (sizes, colours, etc) appeared on a modal and didn't allow for more in-depth information to be displayed, which shoppers were then asking creators for.

Short of product names and prices, I rethought almost all of the existing UI and started from the ground up, placing a focus on the merchandise and making the layout as versatile as possible for the ways that creators were using it.

Creator storefront (2020)

  • 1 The cart was moved to the top right corner of the page, a position most users were more familiar with.
  • 2 A new button was added that showed their subscriber status on Twitch.
  • 3 A creator's products were moved to the top of the page and extra details were added to listings such as type, sizes, etc.
  • 4 Subscription and donation widgets were moved to the side of the page and could be disabled without impacting usability.

I also designed new dedicated product pages for each item as opposed to displaying a minimal amount of information in a modal as we’d been doing previously. These new pages featured product-specific details like materials, fulfilment times, and care instructions so buyers could find the information they needed without having to reach out to our support team or the creators themselves.

Creator storefront (2020)

Results—

Creators that were given an early look at these new designs were pleased with the changes and were excited to share the new experience with their communities. Unfortunately, I was unable to perform any testing to view potential improvements to supporter sales or conversions as the project was shut down in late 2020.