Buy the Look – Studio – Internal Tool
Up until now, Buy the Look section was populated after shooting with an image detector software, but results were not satisfactory and users picked up on it, noticing inconsistency between suggestions and hero images.
User feedback was also urging to leverage more our amazing styling tips.
For the launch of the new and improved Buy the Look feature on ASOS we needed to be able to capture the styling items in Studio. How can we help Stylists and Producers identify all the styling items without effecting efficiency and targets?
PROBLEM
Customers are frustrated with “Buy the Look” not showing the correct items used in the outfit.
Discovery & Building the Business Case
Being able to show the whole outfit to customers would not only solve the wrong identification problem, but it would also highlight ASOS inspirational side. Stylists do a great job at styling models and clothes and this feature would get them the recognition they deserve while also inspiring customer while browsing and shopping.
While Building the Business case and running an experiment (A/B test) to understand the impact of the current buy the look carousel before our renewal with our third party software, we discovered that stopping the contract for image recognition would save the Business around $300k per year.
After assessing what we wanted to achieve we needed to make sure we could collect and store the outfit data in the current Studio workflow, so we started by analysing the Studio flow to see where we could fit this new task in their journey. We spoke to Stylists and Producers to understand how they were working to immerse ourselves in the Studio side of ASOS. We asked Stylist how they knew what they were shooting that day, what their usual way of styling each product was, if they used ACT (Assets Creation Tool), if they did multiple journeys to the styling Wardrobe, how they assesed which styling items to grab, if they often used hero products as a styling item and so on. We also used this time to collect any queries and requirements from the Stylists, Producers and Photographer.
After the interviews we refined the process flow to mirror our findings.
DESIGN
During the Design phase we kept in touch with Studio people to ensure full transparency and clarity over their way of working and our requirements. We then set up a shadowing session during a Shooting. After this, we presented our first Figma prototype to show them how we envisioned the process, and then we collected some feedback from the team.
TEST
PROTOTYPE TESTING
During the shadowing we discussed with Stylist and and model which flow would feel more natural. Our assumption was to scan after the shooting, when the model would take them off and hand them to the stylist, because we assumed there were going to be many changes. Our assumption was proved wrong when we witness there were not many changes in styling and the Stylist worked in synchro with the photographer, so scanning items when they hand them to the model was the more natural choice.
During this session Stylist also highlighted that if they needed to change items they’d prefer to just erase them from ACT.
This also sparkled the conversation about how the Producer flow would look like – they would need to check the styling items and be able to delete or add items if needed. Which we added as next step to focus on when we got the Stylist flow nailed down.
Main Takeaways
Redesigned the shoot list to fit smaller screens
After talking and watching Stylists we realised that ACT was not optimased for small screens and the Stylist screen was very crowded and busy. Up until now Stylist have not relied on ACT for their day to day job, and the platform was optimased for Producers, working on big screens (often multiple screens) and in need of checking different parts of the product in different moment of the process. But now, for the stylists to be able to utilise the ACT platform we needed to clean up the screen and make it more suited for smaller screens, which all Stylists used. We prioritised and kept only relevant tags and we reorganised for better scanning. We checked with Stylists which kind of information they needed about a product when looking at their screen and found out that the majority of information could be omitted or reorganised.
change in flow
As mentioned before, our first design included a step for the Stylist to select if the hero product scanned needed to be added as a Hero Product (aka opening the product page) or as a styling item (meaning they then had to scan the hero product associated with the styling item). We realised this step was unecessary since the Stylist, naturally, was always picking up the Hero Product first as a Product Hero for the Photographer (or Producer when in Studio), so they could bring up the product page on their screen. This meant that we could leverage an existing behaviour to our advantage without adding more complexity. They could simply scan the Hero product and start adding Styling items right away.
MVP TESTING
After the insightful shadowing session in Studio and our chat with Stylist, Photographer and Producers we went back to the drawing board to apply the changes.
When we were ready with a functioning MVP we tested it in Studio with a selection of SKUs in our test environment. This time we wanted to test, with an interaction closer to reality, which flow would feel more natural to Stylists. We also timed each different flow to see which one performed better.
Main Takeaways
Collpased Enrichment goals
From this session we realised the Enrichment Goal section on the Product page was taking a lot of space that was not adding any value to the Stylist – it was in fact making their job more difficult. Since the Enrichment Goal section was almost always empty (because goals were being shoot and the images were not uploaded yet) it made sense to change the default status to have this section collapsed for Stylists. This would allow for more space and less cognitive load.
Previously scanned items
The majority of the Shooting are organised around the same fashion segment, which means that a lot of the products are styled similarly and often with the same Styling items. And often this is done by leaving the clothes on the model. So how could the Stylist add the item if the model was still wearing it? We thought about taking the barcode off, but this presented multiple problems: it would generate confusion and it would require additional effort, when the stylist had to reattach it and be sure not to lose it or mix it up. This solution would also not be applicable for Shoes, because the tag is attached to the inside of the shoe. We also though of having the Stylist scan the the item while the model was still wearing the garment, but again this solution was not feasible for shoes and it would be very inconvenient in terms of timing.We then realised that the scanning could be done directly from the screen. We would collect all the scanned items barcode and the Stylist could easily just scan from there. This also worked very well because we sorted the items in chronological order, so what the model was still wearing could be found at the top of the list, making it very easy for the Stylist to scan the correct item. This would also allow them to add other Hero Product as Styling Item without adding any more complexity.
Bonus: by spending a lot of time shadowing and immerse ourselves in Studio was the trigger to open up the side drawer with all previously scanned. While designing this I kept in mind what I learned and the fact that Stylist work very differently from me, and they are on their feet all day, the laptop is small and most of the time is not on eye level. The time spent moving the cursor to the small target label could be better spent by just keying the spacebar to open and close it. I checked with tech if this could be done and then with Stylist. When everyone agreed I included this in the final design.
IN STUDIO TEST WITH REAL SHOOTING
For this step we felt pretty confident for the main Stylist flow. We calculated delays and focused on possible errors and edge cases and select the appropriate ad expected behaviour (for example double scan, barcode not found, etc.)
PRODUCER FLOW
Following the Studio flow we could now focus on the producer role. This was a very different one. They sit outside the Studio when selecting shots, submitting them for retouch, checking that everything is in order before approving assets to go live.
We wanted to make sure they had the last say, because this was another chance for some quality control. So we wanted to make sure we weren’t missing any use cases. So after talking with some of the Producers we added a “mark as styled” button if some of the product were not marked as styled by the Stylist during the shoot or if the Producer deleted or added some styling items in the appropriate section. We also added the capability for Producer to not only delete styling items, but also add them. This was a requirement that came up during discussion with the stakeholders. When selecting pictures Producers could select images that the Stylist, in Studio didn’t feel 100% confident, so they’d change the styling item or delete it, but it had to be added again in order to reflect the selected picture. This requirement added some complexity on the tech side, but they’ve been involved from the beginning, and they were part of the process, which made the request process very smooth. Since Producers, at this stage, would not have access to the specific item to scan we made a change to store all the scanned items of the specific shoot so the Producers could retrieve the item from a selected list when needed. We also designed a new style of card to allow them to search for SKU, colour, brands and type of garment.
RESULTS
Update to Jan 24