Week 3- UI Project

Add a Feature: Adidas APP

Original screenshots of Adidas App

We were asked to analyze an already existing app and incorporate a new feature into it. This feature should be developed in an area of functionality to be explored and research, of course.
The original idea was assigned to each of us and was originally thought of by one of our mate students from the Bootcamp (hands up to my mate Sarah for coming up with this one!)

This is the end result in high fidelity:

Final high-fidelity prototype —” Create Outfit” feature for Adidas iOS App

This was a solo project and I enjoyed working at my own pace, even with a 4 days deadline. Needless to say, I wasn’t alone at all since it required a lot of chatting, interviewing, and going back and forward after testing with my Bootcamp colleagues and interviewees, which is a great perk of doing research and design!

PS: You can run the Figma prototype yourself here.

Let me take you through each step that brought to this.

The idea behind the feature

In my case, I worked with the Adidas App where different products from the brand can be purchased directly, and the feature to be added was an outfit combinator, which would allow users to mix products from their favorites list and see them displayed on a model figure.

To start, I reached to my mate Sarah, owner of the feature idea, to understand and have a better picture of how she imagined this feature to be and after this conversation, I had clear that :

• This feature would not have a big hierarchy inside of the app, so it wouldn’t have to take a central place in the main menu.
  It was very clear since the beginning that this feature would be inside of the favorites list, and it made sense coming from the fact that these are products that the user likes and is thinking about buying and therefore might like to see more of them and furthermore, gives them the option to have direct access to them and save them.
• The favorited pieces should be organized inside of their respective categories so the user has easier access to them.
• The human figure would only be a vector or outlined shape, to keep it simple and go with the minimalist look of the app.
• The feature should be focused on creating matching outfits, not on how they would look on a specific person, but to see and play with colors and combinations.

As a comparison, Sarah mentioned the shopping platform Zalando with its “shop the look” feature, which gives the option to buy all the pieces shown in a specific product picture but not to mix different pieces and actually see them combined.

USER RESEARCH

As for this project, the focus was set on our visual design skills and no specific user research was conducted. Nevertheless, as UX Designers, we know how valuable it is to understand the problem and the user before jumping into conclusions.

User Research: Interviews

As for this project, the focus was set on our visual design skills and no specific user research was conducted. Nevertheless, as UX Designers, we had to understand the problem and the user before jumping into conclusions.

I performed a quick 3-question guerrilla interview to learn about the desirability of the feature. From it, I gathered the next insights:

• Most users prefer the convenience of buying clothes online.
• Have not used the Adidas App, but know other online shops.
• Big main point: Not seeing how clothes look on their bodies.
• On many occasions, that leads to hesitation to buy & returns.
• All of them reacted positively to the feature idea.

Users need a digital platform that gives them a close-to-real life experience and make them feel more secure at purchasing clothes.

Low-fidelity Prototyping

First low-fi prototype

After gathering this information and analyzing the existing app’s functioning, I prepared a few sketches of the first lo-fi prototype and ended up with this one that I would later show, test, and iterate from in the next step. It includes:

• the name of the new feature is “try on”, referencing the action of trying on clothes, which should be easy to recognize by the users.
• this feature is shown inside of the “favorites list” screen, on the top second bar, right next to the number of favorited articles.
• the human figure is a vector and outlined simple shape and on its left top side would be two buttons to choose a gender.
• the favorited pieces are underneath the human figure, next to each other in a carousel layout, which the user can control by sliding left or right, this action would be supported by left and right icons on each corner. This way, the user has a good view of every piece of clothing and can access and play to mix them easily.
• the categories to which each piece belongs would be on the top. Once the user clicks on one, the favorite pieces inside of that category would be shown on the carousel.
• the user has the option to add the items directly to their cart by clicking the “add to cart” button that would appear next to each displayed piece by clicking on it or to “add outfit to cart”.

First Lo-fi Feedback: iterations, iterations & more iterations

After showing Sarah and other four interviewees(2 males, 2 women) the first lo-fi and asking them a shortlist of questions, I received the following main points of feedback:

• The human figure should not be a vector, it would be more helpful and make more sense to use a more realistic picture or image of a real person, not necessarily 3d, that can give the idea of how the clothes would look together.
  This would make the users use the feature and motivate them to buy more complete outfits.
• Users are not interested in uploading pictures of themselves to mix the clothing pieces, they consider it too big of an effort and besides, would be afraid to pick the wrong picture and looking very bad in the clothes, which could actually have a negative impact and focus the attention not on the outfits but on themselves.
• There should be an option to personalize the body shape. Even if the feature is not about seeing oneself wearing the clothes, the users think it is important to show different basic body types. Showing variety in the models is an important point for them.
• I also showed alternatives to the name, and ask the interviewees about other ideas they might have had. The majority mentioned names including the words “outfit”, “style, “create” and “mix”. After a new round of questions it came down to “create outfit” as the chosen combination.
• Some of the interviewees asked about being able to save those outfits for later and buy them all together, which is a possibility I added on the next prototype.
• The overall flow of the feature and the display of the clothes was positively received; until now the feature seemed easy and fast to follow, the only thing that could be added is a button to go back to favorites and the “save outfit” one.

The interviewees also gave me information about other online shops and apps with similar features, to which some of them mentioned Asos and Zalando having the option to buy recommended looks but not exactly combining different pieces into an outfit.

USER FLOW

We started with our user flow. Here is the section of the flow where our features were implemented:

Mid-fidelity Prototyping, getting closer

Mid-fi prototype final version

Having a better view of the feature flow and based on the feedback received previously, I worked on a second version of the prototype, this time mid-fi, digitalized, and with more detail, including:

• Options to personalize the body type, a slider to choose skin color.

• A more realistic, 2-d image of a woman and man. To this point, I must say I was surprised to a certain level since I expected the users to be happy with a very general human shape or vector, that would represent a person in a simple yet including way, but after the interviews, I noticed it is important for them to feel connected to that image in order to actually use this feature. However and at the same time, they don’t want this image to look so close or similar to them to avoid scaring them from buying the products, and, of course, it has to be as including as possible, giving personalization options that don’t have to be complex but respectful.

For this last reason, I prepared three screens with the possible body shape for testing: one showing only a human silhouette, a complete human figure, and one with the figure starting from the neck down.
This would still give me the possibility to give the users a more realistic idea of the clothes on the body, include the previously mentioned personalization options (body type), and better access to personalize the skin tone. But again, these two would be tested as a next step to decide.

• A text box section with a short description of the feature and the respective button calling the user to try it. This decision came from the fact that the button alone on the top was not giving much information to the users about what exactly they would be doing. At this point, the text box section was supposed to be fixed on the screen while scrolling and could not be closed.

After testing this mid-fi, I received the following feedback :

• Users prefer the human figure not showing a face, that way they said they would focus only on the outfits.
• They wanted the feature to have a skin tone personalization option.
• Also, the personalization column was bothering them, as it was still shown on the next steps and made the screen space smaller.
• Adding a short description of the feature somewhere in the wishlist screen before clicking on the button was also mentioned.
• The button “Add outfit to bag” was pretty well received, users thought it was very useful.

Hi-fidelity Prototype

With the previous information, I moved on to working on the high-fidelity prototype, where I had to recreate the original app and the user flow until getting to the feature. This prototype also went through some iterations.

What the high-fi includes :

• Option to add single items or a complete outfit directly to the shopping bag and a share icon, to send the outfit combination outside of the app.

• Better use of the screen space for personalization options and the human figure, thanks to the unfolding bottom section that comes up when the “customize” button is clicked and brings better usability on the phone.
• This change was made already in the high-fi version after it was brought to my attention by some interviewees.
• Short description of the feature, including an “X” so the user can close it and have the complete view of the screen back, plus the single button on the top bar that appears when this happens.

Text box accompanied by feature button can be closed to regain the complete view of the wishlist items. By doing so, the “create outfit” button will appear on the top white bar.

What’s next?

• This project started with the idea that, no matter what the interviewees said about actually using the feature in real life, we had to go on with the feature and do the best we could. For that reason, I think it would be important to keep researching and see if it is something that could be applied to the brand and its products.
• Also, I would contemplate the idea of testing a possible “save the outfit” option, which would be a nice extra to the outfit creator.
• Testing a possible feature icon, that replaces the “create an outfit” wording on the feature button.

Some thoughts

• As much as I enjoy doing user research, I was very happy to work on this project since it was very UI-focused and I could really dive deep into getting my Figma skills in practice. During the week, we also had a couple of Figma workshops that helped us enormously to improve the way my files are organized, which was a huge game-changer for me. Organization means less stress and more efficient work!
• Doing sketches and prototyping ideas fastly to bring them to test was key for me at the beginning.
• Going crazy on the details, especially during the mi-di phase is definitely not the best, however, I saw that having some more elaborated elements and components coming from it helped me going into the next step faster.