Project 3: Add a Feature | YOOX
Case study of how I have integrated a scanning feature into YOOX app
This is the third project with a sprint length of four days and the first project when we had to work alone and for which we had to create High-fidelity prototypes. I knew that it will not be easy, because of the time constrains and we also had to do quite many tasks, in order to deliver the final project and presentation, but I was super excited!
The Challenge
“My challenge was to incorporate a scanning feature on an e-commerce shopping app, where you can take a picture of products and see if anything that is similar is available on the platform for sales”, for which I have chosen YOOX app, as I like the company and their products.
The device for which we had to create the Mobile app feature was open and I have chosen to implement it for Android.
For this project, I have followed the Design Thinking Process, the same as in the previous projects.
1. Empathize
1.1. Business Analysis
In order to start empathizing, I have started to check more information about the company, about the app and competitors, even though I already knew some information.
YOOX it’s a well-known Italian e-commerce fashion company, that ships its products in over 100 countries all over the world. YOOX sells fashion products from multiple brands.
First of all, I have started to make a deep dive into YOOX app, where I have focused on the following:
· Information Architecture: IA follows the traditional e-commerce structure with prominent search and filters, editorialized section to products and product grids.
· Aesthetics: the page is colorful, modern, young, bold
· Brand attributes: editorial commerce/ story telling (e.g. Style resolution, Be sporty)
Competitive Analysis
For the Competitive Analysis, I have started to research the competitors, analyzed their apps and checked if any of these e-commerce companies have already a scanning app implemented and how it works: Zalando, Amazon, Zara, YOOX and Net-a-Porter.
After analyzing their apps, I was surprised to see that three out of five apps have already a scanning app implemented. One of the apps — Zalando does not have a scanning feature implemented, but a bar code scanning feature.
In order to test the scanning feature of Amazon, Zara and Net-a-Porter, that have already this feature, I took a photo with their scanning apps of the same products: a black-white striped blouse, a light-grey hoodie, a pair of blue paid pants and a pair of winter slippers with fur. It was very interesting to see, that the products results varies, depending on the app an on the type of the products.
The main conclusion
After testing all the apps with this feature is that the given results are of similar products with the ones photographed, the quality of the results may differ and it is not only precise. I have noticed as well that there are no other filters that the user can choose and the results are not inspirational.
I have also observed, that Zara and Net-a-Porter have this feature implemented for front and back camera as well, but Amazon has just for the back camera, so you can’t take a photo of a product that you are wearing and check if they have it for sale.
1.2. User Research
In order to start this project, I have analyzed the existing YOOX app and noticed that this scanning feature it is not yet implemented into the app.
After business analysis, I have started to conduct Guerilla Research on four people, between 28–45 years old from three countries: Switzerland, France and Romania and the following themes emerged:
· Not many users have used it (1 out of 4) and many people were not aware of the availability of the feature or they were not aware that today’s technology can provide that.
· The person who used it was impressed by the technology, but at the end did not find or buy an item through this feature.
· A recurring request was:
- to find proposal for matching items;
- the results to be useful;
- to be easy and quick to us, in order to impulsively react on current experiences.
Assumption
Based on the demographics of the interviewees, I would assume, that this feature is more appealing by younger tech-savvy users.
1.3. Key Findings Research
Potential users:
· younger tech-savvy audience, that does not only shop out of necessity, but also because they see it as an entertainment and part of their lifestyle.
The Scanning feature
· used more out of impulse: needs to be easy to use (i.e. available at any part of their lives during their day);
· may change the way users will search for items: more playful & enjoyable experience;
· needs to be places prominently in the navigation;
· respecting the brand attributes: the feature should be bold, colorful and fit to the overall story telling.
The current apps use the feature primarily as part of their search engine, to find an exact product.
2. Define
2.1. JTBD Statement
After having the results of my research, I have started to write JTBD, in order to understand well the job that the customer is trying to get done, so that he can buy a product.
I started to write more JTBD statements and at the end I have concluded the following:
Most of the current apps that already use the feature have a JTBD that would read as follows: When I use the scanning feature, I want to find the same item that I have I front of me, so I can buy it.
Based on the key findings from my research, I propose the following JTBD for YOOX app feature:
When I use the scanning feature, I want to get inspired and discover products, so I need to buy them because I want to posses them.
2.2. Problem & Hypothesis Statement
The Problem Statement
The feature was designed to achieve an easy way for the customers to quickly find and buy a desired product. I have observed, that the feature is not well known to the users or in my particular case (YOOX), does not exist yet. In addition, the feature is too task oriented and too little inspiring, which is causing less time in the app and ultimately less sales to our business.
The Hypothesis Statement
We believe implementing this scanning feature for the customers will help them to quicker and easier discover and buy more relevant products. We will know we are right with the 20% more sales initiated via the scanning feature.
2.3. User Flow
In order to visualize the path(s) that the user is going to follow to complete the tasks using the scanning feature, I have created the user’s workflow.
For this workflow, I propose multiple entry points inside the app to get to the feature: from the landing page, button navigation and search function.
In the prototype I have focused on Users’ ‘Happy path’, using the ‘Search’ button as entry point.
User’s Steps:
• The user opens the app and lands on the ‘Landing page’
• The user selects the ‘Search’ button from the navigation bar
• The user chooses to take a photo of the desired product and clicks on ‘Take photo’ button
• The user takes a photo of the desired product
• The app shows that similar items have been detected and the user taps on the ‘Hotspots’ to discover the products
• Different Categories with similar items are displayed to the user
• The User needs to choose the desired category/categories
• The product(s) results are shown
• The user can open the product to read more about it
3. Ideate
3.1. Ideation
After defining clearly the problem, hypothesis and JBTD Statement, I have started to ideate, using Crazy 8. As I was working alone on this project, I have asked my family to have a look at the sketches, we had an open discussion about them and this helped me to start creating the Lo-fi prototype.
3.2. Lo-fidelity
Having the ideation in mind, I have created the Lo-fidelity Prototype. After the first prototype, I have presented it again to my family and I have noticed that having the camera of the scanning feature on the first page in a banner and also to be able to open a photo from their album if needed, makes them confuse. Therefore, I made the second Lo-fi prototype and tested it again with two people. This time they got the flow immediately.
3.3. Mid-fidelity & Testing
As the Lo-fi prototype was already ‘approved’ and tested, I have started to create the Mid-fi prototype in Figma. In order to see if the people get the flow and understand where they have to click, I have tested the prototype in Maze. I was super happy that I was able to test the Mid-fi in the second day, as I was thinking that from the next day I can start to work on the Hi-fi prototype and presentation. Unfortunately, my plan did not work, as Maze did not upload my prototype (website errors), therefore, I could not stick to my initial plan. First of all, it was taking super long to upload it and after it was uploaded and I was starting to create the flows, it has appeared for several times different errors. I have tried for several times until 12 am, but at the end I had to give up and call the day, as I had a new project day that was waiting for me early in the morning.
The next day I have tried again in the morning to upload it, but unfortunately, some errors still appeared. In the afternoon, after our Bootcamp classes have ended, I talked with the TA and we have tried to upload it from scratch together. After some try and errors, it finally worked! I have published it and sent the link for testing to our general IH group. Later on, I have heard form some colleagues that they also had some issues uploading their prototypes in Maze.
My Mid-fi prototype was tested by 15 users and I have made the following testing conclusions:
· Entry into the feature via landing page and search button was successful;
· There were no major blockers detected;
· Some users didn’t know exactly where they have to press on the screen which was showing that the feature found results for the photographed item. This was important for me, in order to know that I have to improve the signposting in UI. After talking with some of the users, they have mentioned that they didn’t know exactly that they have to press on the ‘hotspot’, because of the Mid-fi and that they think that if would have been a real photo, they would have realized where they have to click.
3.4. Hi-Fidelity Prototype
Having all this extremely important information from the user testing, I have started to create the Hi-Fidelity prototype, focusing on Users’ ‘Happy path’ and using the ‘Search’ button as their entry point.
Outcomes & Learnings
Outcomes
• scanning feature added to the YOOX app
• multiple and more prominent entry-points to the feature
• proposal to make results page more inspiring
Learnings
• more time for testing needed
• using Maze may take longer than expected
• importance of focusing on the right priorities
- • using Maze may take longer than expected• importance of focusing on the right priorities
Thank You for reading 😊
