Bold Commerce

Flocker Product Builder, Creator Storefronts

Following the public launch of Flocker in early 2019, our team began using researching how creators were using the service by way of analytics and reaching out to them directly to gather feedback on their experience so far.

Based on heat maps and behavioural analytics, it became clear that, from a UX perspective, creators were struggling with our product builder. When asked about their landing pages, creators relayed feedback from their supporters that they wanted a more familiar shopping experience and a clearer picture of what advantages their Twitch sub provided them through Flocker.

About

Flocker provided content creators with tools to help reduce subscriber churn by offering incentives to their Twitch supporters.

Timeline

2018—2020

Responsibilities

Wireframing, interface design, user testing, prototyping, illustration

Flocker Product Builder

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 so the last thing we wanted to deliver was a product builder that made more work for them. These session recordings and interviews had helped us identify several points of friction, we then developed a series of improvements to the page and moved quickly to implement them.

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.

Flocker Creator Storefronts

Creators had communicated feedback from their supporters to us regarding Flocker's storefronts and profile pages, which I'd been wanting to address when we had the resources to do so. With our work on the product builder completed, these updates became my priority.

Creator storefront (2018—2020)

Product detail page (2018—2020)

From our conversations with creators, as well as an internal design audit of the existing UX, 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 customers.
  • Product details (sizes, colours, etc) appeared on a modal and didn't allow for more in-depth information to be displayed, which customers were 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 or quickly took them there to subscribe.
  • 3 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.

Secondarily, I designed new dedicated product pages for each item to replace the modals we’d used previously that displayed only a minimal amount of product information. 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.