Contextual discovery
Creating a unique and engaging shopping experience that is tailored to each user's unique context leveraging traffic source and session data
Company
Trouva
Role
Product designer
Date
July 2017
Tools
Figma
Context
Trouva is an ecommerce platform for shoppers who love independent shops. Hundreds of shops have been added to the platform, creating a distinct and curated shopping experience. We built out the infrastructure and branding to create a global destination that gives international customers easy access to small independent shops whilst amplifying the shops exposure to online customers with minimal additional overhead and costs
Objective
In the summer of 2017, after exploratory conversations with one of the co-founders, I pursued a design challenge with a simple goal: How might we create a new type of digital shopping experience that further engages our customers, reflects our values, and puts the joy of discovery at the heart of the user experience?
Design process
I began by conducting several unstructured interviews with recent customers regarding their experience on Trouva. I wanted to learn more about how they viewed their experiences shopping in-store compared with shopping online. I was inspired by their insights and covered two whiteboards full of ideas and journey maps
"I love hearing the stories behind the products, like a vase or bowl and where it comes from"
"I try to buy things that feel more personal and these shops always have unique pieces that I couldn't find anywhere else"
"These shops always look so lovely. They inspire me in how I try to arrange my home"
After reviewing the customer interviews with members of our merchandising team, I was inspired to learn more about visual merchandising ('VM-ing') and I set up a few shop visits to speak with shop owners and learn from them
I learned a lot about how an independent shop differentiates themselves from the larger chains by creating unique in-store experiences for their customers. VM-ing is not just an inventory rotation tool for these curators. It is an exercise in aesthetics and storytelling that is personal to them
"I look at what's trending, of course, but I try to find pieces that have a story or a unique origin"
"When I arrange items, I try to show how they might look in a real home, not just on a shelf"
"I like to leave space around items so they [customers] can focus on each object's details"
"I rotate displays so that my regulars find something fresh each time they come in"
After visiting several shop owners and reflecting on the customer interviews I had done, I felt like I had a strong opportunity definition that would guide me as I began pursuing solutions
Customers
Create an ecommerce experience that accommodates various shop identities and aesthetics whilst delivering a familiar and delightful experience to the customer that feels personal to them
Shop owners
Enable shop owners to tell the stories of the brands and products they stocked without needing to spend significant time and effort on our platform
I gathered ideas from our editorial team, marketing team, and engineers and aggregated them to sketch out as many divergent paths of exploration that I could. There were ideas ranging from augmented reality, to 360-degree photography, to chatbots, to machine-learning-based recommendations, and more.
I reviewed each one against the goals and constraints of the project and then began synthesising different ideas and creating wireframe solutions from combinations of ideas. I took inspiration from the in-store experience and designed a set of modular components based on real-world objects and intuitive digital interaction patterns. The components seemed to fit, but there was something missing.
While working on the design for the table component, I explored how we might leverage both the standard white cut-out product photography and the lifestyle photography that we had. I simulated these two views (I called them 'Catalog' and 'Moodboard') to show how the same content could be displayed in different ways, affording our users a customisable experience depending on the mood / context they were in, as well as give us the ability to dynamically select which of these two components to render based on what we knew about the user
Independent shops thrive not just by delivering curated collections of distinct, high-quality products, but by engaging their customers directly and building personal relationships. From the interviews with shop owners and the visits to their shops that I had gone on, something that stood out was the way that they spoke about their customers. They had 'regulars' and addressed them by first name when they entered. They knew what their regulars were looking for, and what their aesthetic tastes were. They recommended products that they knew customers would like, but they also recommended new product lines and brands that their customer had not seen or heard of before
This knowledge of the customer, and the ability to react to their tastes and preferences but still surprise and delight them was the shop-owner's super power. This insight became the basis for what I called the continuous-context discovery system
In a typical browsing experience, a user goes from page A to page B to page C, and so on, each of which are static pages or views. However, if we retained the user's context of page A and used that to tailor the content and display of page B, we could create a distinct user journey in which each page is dynamically created based on the context of the user themselves
To give an example of this system in action, a customer who clicked on a Facebook ad for a concrete vase might land on a product page for that particular product. We would show them more vases, more products from the same brand, more products in the same material (concrete), and a quote from our editorial team about why they love concrete as a material
If the user wanted to see more from the shop, we would show the shop page, but display products that matched the material (concrete) and style (modern, industrial, minimal, etc.) first. We might group together products from a brand that specialises in concrete and feature them in a callout
Taking that a step further, if we knew the inbound journey to page A, via query parameters in the URL created with the ad, we could even tailor the content and display of page A
Taking inspiration from the world of the shop owners and their unique curative approach to visual merchandising and leveraging our robust information architecture and data, my final design used views that were generated from the set of modular components and based on what we knew of the user's context. To further reinforce our brand and the independent shop ethos of Trouva, and help our shops engage with their customers, I introduced elements of human attribution to the experience. As you explore the content, the first name and face of the shop owner displays above their content providing a social and connective element to the user experience and building brand recognition across the platform
Susan
Life Story
My inspiration was to bring to Edinburgh the kind of store that I seek out when abroad, an inspiring place where you feel just at home with a coffee flicking through our magazines as you might be shopping for a unique gift
After generating several prototypes, I ran usability tests with different scenarios to see how users interacted with the prototypes and gather their feedback. The scenarios focused on several key dimensions like product category, shop, brand, material, etc. I ran the tests with some of our users, a few shop owners, and a few members of our in-house editorial team. The feedback was positive, and after a quick iteration it was ready for implementation and A/B testing
"This is so much fun"
"Wow, I need to make a note of that [product] so I can buy it later"
"I love the imagery. The [product] page feels much more natural"
Outcome
~0%
Shop owner effort
The final designs required zero additional effort from shop owners