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.
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.
The user clicks on the “Live shows” button on their profile page
A new screen opens that features all live shows with active live shows highlighted
Upcoming and ended can be viewed via a dropdown
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
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
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
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.
