Trouva

Launching A Live Shopping Strategy

Tested and launched a new product for live streaming shopping events with the Trouva creative community. Worked holistically across whole project to consider the needs from the view of each user group.

Role

Design Lead

Timeframe

4 months

Team

1 Product Manager

2 Engineers

2 Stakeholders

Context

Trouva is an online marketplace that connects physical boutiques based in the UK and EU with shoppers across the globe.

Leveraging the community boutiques and content creators fostered over the years, Trouva sought out to engage shoppers through live shopping events. User research had already been undertaken and a number of boutiques and creators had shown an interest in taking part, some already hosting their own live shows on social media platforms and others eager to try.

The Challenge

Being a marketplace with different user groups, the complexity was in creating a service that benefits each of the user’s needs.

My role was to work with the Head of Product to define and design the full user journey for live shows from the perspective of all users. The case study is split into 4 parts: the 3 user groups and the testing to launch phase.

User Group: Trouva Admins

User Role

Trouva team members would be the users managing the live shows and would have the highest level of permissions. For the first phase of live events, only Trouva admins could create the live shows on behalf of Trouva, all boutiques and creators.

The role of the Trouva admin would also be to live stream the shows in person with the show host in order to have a controlled testing environment for the initial set of shows.

User Needs
  • A simple way to create a live show for any user with Trouva creator permissions. While only a limited number of users in Beta phase, plan is to launch with Trouva’s 500+ boutique network and more creators. Finding the right user should be straightforward.

  • Ability to choose the date and time of the event on behalf of the user. While majority of users will be based in the UK, there are some based around locations in Europe and the US therefore selecting the correct timezone is important.

  • A way to see all live shows, upcoming and ended and easily edit a show once created.

  • Ability to tag products that would be shoppable during the live event.

  • A mobile app to stream live shows from

Revising Internal Tools

To facilitate live show creation, I added a section for live events in the Trouva admin platform called Backalley. From this section, the admin could create a new live show for any user.

Above

Create show form. Date and time would be set to the current date and +15 minutes in time by default to allow speedy creation. The timezone would be relative to the user’s IP location by default but easily changeable from the dropdown menu that specified the timezone as per location.

Above

To select the host, a dropdown form with both a search bar and filter is used. The user can either filter by kind of host — Boutique or Creator — or search their name or handle directly.

Live Show Dashboard

Once a live show was created, it would be visible on the live show dashboard with the key information to identify the show quickly. From here, a show could be edited or deleted. The shows were categorised by status — Upcoming, ended and deleted — and split by tabs to make navigating the list of events easier

Above

Live show dashboard with placeholder content. The host, their profile photo, show title and time would be pulled through from the information added on the show form.

Developing A Companion App

To stream the live shows, I worked on the design and development of an iOS app. Through this app, a user could view the live shows they have created and go live from an upcoming show. For internal user testing, we developed a MVP version of the app with limited features. This was used to test that the integration with both the live shows dashboard and the streaming provider were functional and to take any quick learnings.

Above

Screens for the MVP companion app developed to live stream from. Since only Trouva admins would be using the app at this stage, the features were stripped back to prioritise testing phase. The admins would select the live show from the list that was pulled in from the live show dashboard and go live.

Internal User Testing & Launch

We tested the functionality of the app by creating test shows only visible to a selection of employees. Taking the learnings from this, I iterated on the designs and made improvements based on feedback and observations:

  • Log in via QR code - Multiple users will be accessing the app and should have the relevant viewing permissions (Trouva to see all shows, hosts to only see their own)

  • Add a clear Do not disturb message - phone calls interrupt the live stream

  • Change default video settings - performance is more reliable when using data on a lower bandwidth

  • Only go live on shows that are scheduled within the next 10 minutes

  • Hide ended shows behind a filter

  • Add adjustments for dark mode

Below

Clickable demo of the updated version of the iOS app with the iterations made. Shown with placeholder content from the viewpoint of a boutique user, only able to view live shows where they are tagged as the host.

App Store Launch

Once we were satisfied with the performance of the app it was launched onto the app store and ready to be rolled out to boutiques to begin the next phase of user testing.

Continue reading case study, or return to contents

Continue reading case study, or return to contents

User Group: Show Hosts

User Group: Show Hosts

User Role

As well as Trouva itself, boutiques and creators would be the main hosts of live shows. Interviews conducted with boutiques suggested lives presented an opportunity increase exposure on the Trouva platform, to connect to their audience directly and to be more informative about their product selection. Many also felt it was less effort to live stream than to create edit and post a short video and that weekly lives seemed feasible.

Creators interviewed were able to give insights into their experience with other live streaming platforms, including the positive features and pain points. Those interviewed saw value in being able to build a community on Trouva through live shows and to increase overall engagement with their platforms. While the commissions model was suggested to not be as beneficial financially, many were keen to partner with Trouva and create curations of products to feature.

User Needs
  • Personal dashboard to view all live shows - upcoming and ended

  • Ability to tag products that would be shoppable during the live event

  • Flexibility on the start and end time of the shows

  • A mobile app to stream live shows from

  • Technical support

Social Dashboard

To facilitate the needs of the users, I initially ideated creating a separate dashboard where the user could view and manage their social profile, live shows and get access to metrics and affiliated links (a future phase of the Social Commerce project). I built out some wireframes to get a sense of the user experience.

Above

Social dashboard wireframes from the perspective of a boutique. Once Trouva has scheduled a live show for the user, they are able to tag products, edit the title and add a cover photo. At this stage, users weren’t able to change the date and time without contacting Trouva.

Reviewing the user journey, the dashboard felt overcomplicated since both users would access the dashboard through different entry points. I reflected the overall experience and concluded the complexity could potentially have a discourage user adoption of the social features.

Simplified User Journey

After reflection, I reworked the user flow for accessing live shows. Instead of existing on a separate platform, the entry point for live shows is contained within their social profile on the main Trouva website and is the same journey for both boutique and content creators.

Above

Mobile and desktop frames showing the user journey for accessing live shows.

  1. The user clicks on the “Live shows” button on their profile page

  2. A new screen opens that features all live shows with active live shows highlighted

  3. Upcoming and ended can be viewed via a dropdown

  4. Clicking Trouva Live app login generates the user’s unique QR code. Clicking their profile image at any time navigates back to the user’s profile

Creating a live show

Through the live show dashboard, the users would be able to create their own live show. To provide a seamless experience, I aligned the user journey and UI to the process of uploading a short video post. In particular the user flow for tagging products was identical to enable ease of use.

Below

Clickable screens from the wireframes that were shipped to production showing the show creation form.

Key Takeaways

A holistic experience

By positioning live shows within the user’s profile, they are able to create a new post or a live show in one destination, connecting the two parts of the social commerce features.

A holistic experience

By positioning live shows within the user’s profile, they are able to create a new post or a live show in one destination, connecting the two parts of the social commerce features.

A holistic experience

By positioning live shows within the user’s profile, they are able to create a new post or a live show in one destination, connecting the two parts of the social commerce features.

🌊
Simplicity is key

To encourage as much user adoption as possible, the steps to creating a live show were made as simple as possible. Aligning the UI to that of the iOS further enables ease of use when switching from a web browser to application.

🌊
Simplicity is key

To encourage as much user adoption as possible, the steps to creating a live show were made as simple as possible. Aligning the UI to that of the iOS further enables ease of use when switching from a web browser to application.

🌊
Simplicity is key

To encourage as much user adoption as possible, the steps to creating a live show were made as simple as possible. Aligning the UI to that of the iOS further enables ease of use when switching from a web browser to application.

Continue reading case study, or return to contents

Continue reading case study, or return to contents

User Group: Shoppers

User Group: Shoppers

User Role

The shoppers were the audience of the live shows, the objective being to engage with the content, make purchases based the content and want to return to Trouva for more content. User interviews conducted with shoppers taught us that they almost solely engaged with social media and content creators through their mobile devices and would often discover products and websites through links shared in social accounts.

User Needs
  • Entry points to live events within the shopping experience

  • Visibility of the products featured in the live show

  • Ability to shop products without interrupting the live show

  • A mobile-first viewing experience

  • Visibility of past live shows to maximise value and generate interest in future shows

Competitive Analysis

I undertook competitive analysis on many different platforms that used live streaming or live shopping, tracking the key features on a database. This helped to highlight best practices along with inspiration for the UI.

Myself and other stakeholders watched many live shows and discussed the experience. The ease of finding the products being featured during the show was a recurring topic, with the ability to seamlessly shop and watch together being a strong positive factor. Other features such as interactions and appreciations were received well, however such additions would be out of scope for launch. I also made the observation that the show title wasn’t a primary feature of the UI in many examples, perhaps because once a user was watching the show it became less relevant than when they were deciding to join.

Live Show Ideation

Gathering the competitive analysis, I wireframed many ideas for the interface and user flow. Below are the 3 key options presented to the team for discussion.

Option A

The UI remains as close as possible to the short video experience with the added live tag and number of viewers. Products are accessed by clicking the bottom left thumbnail to open a drawer with all available products. Messages are found by clicking the message box icon on the right side.

Option B

A revamped UI that moves the show host’s details at the top and adding the profile image to connect the viewer to the host better. The products featured in the live show are given more prominence by appearing as tiles at the bottom of the screen to swipe through. Clicking on a product opens a drawer with light product information and an option to add to bag or open to full details in a new tab. Using the drawer as an overlay component meant that the show could continue in the background. The messages would have a similar experience.

Option C

UI with a focus on user engagement by having the messages positioned at the bottom and appearing dynamically as messages are sent. The host’s name and profile photo is also made more prominent but show title is truncated to one line only. Products are again accessed through the thumbnail bottom right that opens the product drawer.

Feature Scoping

After reviewing the wireframes and undertaking feature scoping, the team decided to go with the first option (Option A) that aligned with the short video feed. This would be easier for engineers to build, reducing time to market.

However, through discovery phase, I had highlighted many improvements that could be made to the UI of both Live Shows and the Short Video Feed. These were still included on the scoping table for future iterations.

User Entry Points

On top of promotion on email and social channels that would link directly to the live shows, we wanted shoppers to discover an active live show as they browse the Trouva site.

Data showed that shoppers landed on Trouva through a number of pages, the highest proportion (42.68%) being a product page, primarily through Google Shopping.

Entry Points Ideation

To give maximum visibility, the entry points would be visible at all times when a show was taking place and providing the most direct user flow as possible. I explored different ways of positioning live shows on the Trouva website.

Option A

An entry point to live shows page is placed on the main menu. For mobile this will be found by opening the burger menu. When a live show is happening, this is highlighted in green along with a small thumbnail of the current live show at the bottom right of the screen.

Option B

An entry point to live shows page is added as an icon alongside account, wishlist and shopping bag. When a live show is happening, a green dot appears and a small banner with “Watch now” is pinned bottom right.

Option C

A floating widget appears bottom right of the screen with the live show autoplaying. The user can mute/unmute the sound, expand to full screen or close the widget. Once closed, a TV icon in a circle will remain in place to reopen if desired.

Floating live show widget

The floating widget concept was the preferred choice as the leadership team wanted to be as impactful as possible in highlighting a live show. Through further design ideation and user journey thinking, a policy was defined in which the widget would appear on landing anywhere on the Trouva website and if the user closed the widget, it wouldn’t reappear unless their cookies were cleared. This was to counteract any negative impact on the regular shopping experience.

Below

The finalised wireframes for the floating widget

Key Takeaways

🚀
Launch fast, iterate later

While there were many features and ideas I had for live shows, in order to launch in time for Christmas trading, we stripped back many features with the intention of reviewing later.

🚀
Launch fast, iterate later

While there were many features and ideas I had for live shows, in order to launch in time for Christmas trading, we stripped back many features with the intention of reviewing later.

🚀
Launch fast, iterate later

While there were many features and ideas I had for live shows, in order to launch in time for Christmas trading, we stripped back many features with the intention of reviewing later.

📱
Mobile first design

Since 65% of users visited Trouva on a mobile device and that users interviewed typically engaged with social-based content on their mobile, the interface was designed from a mobile first perspective, with some adjustments for desktop.

📱
Mobile first design

Since 65% of users visited Trouva on a mobile device and that users interviewed typically engaged with social-based content on their mobile, the interface was designed from a mobile first perspective, with some adjustments for desktop.

📱
Mobile first design

Since 65% of users visited Trouva on a mobile device and that users interviewed typically engaged with social-based content on their mobile, the interface was designed from a mobile first perspective, with some adjustments for desktop.

Continue reading case study, or return to contents

Continue reading case study, or return to contents

Live Show Testing

Live Show Testing

Once all the user roles had been thought out, the wireframes built and the functionality QA’d, we were ready to begin testing real live shows. I worked together with the Head of Product and Programme Manager to organise a number of live shows with Boutiques and one creator. For this stage, the team created the live shows on behalf of the hosts and tagged products based on a list they provided.



6 live shows were hosted with support from the Trouva team in person. During each live show, myself and other team members monitored the performance and stability of the stream, as well as viewing numbers.

Above

Screenshots of the live shows that were hosted - one hosted by Trouva team, one by a creator and the rest by boutiques. For each show, 50 products (the maximum amount) were tagged, with as many of them featured during the broadcast. An exclusive discount code was provided during each show to generate attention and quantify engagement.

Observations & Feedback

From the initial live shows, there were a lot of learnings, both on the product side and from a programming aspect. Generally, the hosts appreciated the ease of using the app, particularly the efficiency of logging in via a QR code. Further observations were made and feedback from the team undertaking the test shows. These helped direct further iterations to the product.



Duplicating a live show



The Trouva team members who were creating live shows on behalf of the other hosts highlighted a couple times where an issue with connectivity or someone accidentally cancelling the stream meant the show needed to be recreated immediately. Recreating the show and tagging the same products when under time pressure wasn’t ideal so suggested a feature to duplicate a show. I created the user flow and wireframes for this additional feature.

Above

Wireframes for duplicating a live show. From an ended live show – now a replay video – the user selects the three dots icon to open a bottom-up menu and clicks “Duplicate show”. From here, all of the same information is copied with the exception of the start date that is +15 minutes of the current time, rounded up.

Editing a live show



Once the live shows had aired, they were recirculated with the “LIVE” tag changing to “REPLAY”. These would eventually be integrated with the explore video feed to maximise value from them. Editing a previous live show would enable the show host to maintain relevancy in the content by updating tagged products or removing any temporary discount codes from the description. This feature was grouped with duplicate show and could be accessed by clicking the three dots (more information icon) on the live show.

Above

Wireframes for editing a previously live show. The show date & time cannot be edited at this point but all other elements – show cover, descriptions and products – could be edited.

Privacy features

Feedback from show hosts was that they would like to be able to change the visibility settings on a show in order to create test shows that only Trouva admins, or someone using their credentials could view. I created wireframes to show how this feature could be added in the show creation form allowing them to set the privacy settings at the start, or edit later.

Above

Wireframes for changing the privacy settings of a live show. In this example, the user is editing a previously live show to be visible only to them. On the live shows dashboard the privacy setting is highlighted on the show’s thumbnail image and on the live show replay, a tag “Only you” is added above the description.

Live Shows In Numbers

9 shows

9 shows

Featuring boutiques, creators, and Trouva staff

Featuring boutiques, creators, and Trouva staff

10k

10k

Total unique viewers

Total unique viewers

2.2k+

2.2k+

Engaged views and replays

Engaged views and replays

42h

42h

Total watch time

Total watch time

Based on organic traffic on Trouva.com

Next Steps

With the first round of live shows showing users and hosts alike were keen to engage with, I continued to work on further iterative features as the brand and marketing team promoted the lives and began formulating a content strategy. Together with the Programme Manager, we worked on a best practices doc to share with users who wanted to use the live show feature to educate them on the tool and give insights into our initial learnings.

In-app show creation

To make the show creation process more efficient, I worked on a concept where a live show could be created from within the iOS app. To simplify the build, I proposed opening the web browser with the live show creation form instead of building it directly within the app. This would allow users to quickly create a live show and start the stream within minutes.

Above

Wireframes for creating a live show within the iOS app. By clicking “New show” a web browser is opened within the app that uses the same login credentials to create a live show for the host. Back within the core app, after a show is created, the user can go live immediately if the start time was set to the present time.

Show teaser

To create interest in a live show, we explored how a user could upload a teaser which would feature in the explore video feed. I created wireframes that followed the same user flow of creating a video post and adding music on top.

Below

Demo for adding a teaser to a live show. Where the user previously added a cover image, they also have the option to add a video. The process then follows the same user flow for adding music as when they create a video post. The user can also choose a cover from the footage, or upload a new image.

Rebekah Neal Design 2024

Rebekah Neal Design 2024