Value added and my role within the team
With a large percentage of the population shopping on social media, it would make sense to collaborate with Shopify to explore different ways to integrate a social aspect within their customers’s online stores. This would give our customers an additional media type do display their UGC.
During the design phase, I collaborated with a designer at Shopify to ensure cohesive branding and my design teammates for feedback. Also, PM and Eng helped guide and push product direction and made sure we had know which existing endpoints to leverage.
83%
of Gen Z say social media is their top influence channel for shopping
Gathering information and creating user flows
In order to visualize how users would interact with this widget, I drew out user flows to dissect each touchpoint. Under each step, I added notes, assumptions of user's intentions, and any open questions I had. During this process, I found one touchpoint that was a bit separated from the browsing experience. However, if it was earlier in the user journey, it could boost engagement.
The whole experience would live in 4 main touchpoints
1.
The Entry point is displayed on a shop's landing page. It provides a preview of what type of UGC shoppers can browse.
2.
The Explore page is a gallery of shoppable social media posts that is curated by our product.
3.
Product preview and details provide shoppers a high level view of the product within the UGC. It includes info like product image, name, and price.
4.
The Product details page (pdp) provides shoppers a detailed view of the product before they add to cart. It includes details like variants, sizing options, stock etc. A small section of this page displays shoppable posts that are also curated by our product.
The UGC within the PDP felt disconnected from the experience. Throughout the design process I would try to find a different way to display this information.
Informing shoppers just enough to get them to click in to view more
In order to bring forward the hidden UGC, it needed to be placed within the Explore page or the Product preview and details section. This was not to an easy task since there was a lot of information to be added. I fine tuned the design by focusing on solving these two problems:
Shoppers need to see a preview of the products that are shoppable within the UGC, and
Needed a call to action that will get the user to go to the next screen knowing that they can see what products are in the image,
Below is a synthesis of the iterations I progressed through:
Iteration 1: First iteration consisted of hotspots that hovered over the products. Product links were found at the bottom in a carousel display.
Iteration 2: My first attempt at adding the “Shop this look” feature, which displayed the UGC of multiple products. However, this did not work since it took up too much vertical space. Also, there wasn't a way to allow shoppers to cycle through the UGC of each product.
Iteration 3: Next, I tried to sort the information by reducing product links to just an image and a CTA to show all of the other information. This provided direction to what is required on this screen, however, everything was awkwardly placed and confusing.
MVP: Went from an information heavy screen to a simple screen with hotspots and one CTA that opens up bottom sheet. This provides larger images and a more holistic view of all products within shoppable posts.
Providing shopping inspiration through shoppable posts suggestions
Feature & details
Photos and images are horizontally constrained so hotspots coordinates are consistent across different aspect ratios
Visual animations: hotspots appear on scroll and CTA has a delayed colour change in order to direct attention
Optimized to display product details and images at a glance and can see all products
Design decisions
I decided to have only one primary CTA called Shop this look that would open up a bottom card that displayed product information and details. Some finesse was required to find a way to provide just enough info to the shopper while trying to make them to feel compelled see more. This style also allowed users to have a bigger and better view of the products within the shoppable post.
Another feature I wanted to move forward in the user journey was the add to cart functionality, however, this ask was a high lift. By adding a Like button instead, less work would come to our side since it was powered mainly by Shopify.
Features
Styled by others is an additional experience that allows shoppers to browse user-generated content of all products at a high level. It leverages the idea that "if a shopper likes one product in this photo, there's a chance they will like other products in the photo as well" in order to increase average order value.
Originally, this felt disjointed and was found hidden on the PDP page. Now, it is now more accessible to users and can give shoppers an idea of how all products fit together instead of funnelling towards just just one product.
Design decisions
Making this part feel natural was important, so it pretty much followed the designs of the browsing page with subtle differences. It was a browsing experience that focused on one product only so it always had the product stickied at the bottom.
“People don’t buy products, they buy better versions of themselves”
Initially, the goal of the design was to funnel users towards one product and add to cart. Now, this design would provide shoppers the option to view product details and extend the browsing experience by displaying UGC of products that user's may like in order to increase average order value. This would also capitalize on the fact that we had a greater amount of products and curated content than competitors.
End of the feature and product testing
This feature was removed from the roadmap prior to development. If it continued, my next steps for this project would be to test my hypothesis and determine whether users would rather see all the products up front in the form of a product link, or if they will click a CTA to shop the look within the shoppable post.
To assess if this feature is successful, I would also track the number of shoppers that like secondary products and if it lead to higher engagement levels. I would also monitor the Average order value and the number of Add to cart as the KPIs to determine if Shop this look is successful.