Wireframing — MatchesFashion App

What is my task for this challenge?

To ‘reverse engineer’ one popular app Interaction Design and User Flow, and create a wireframe version of 5 screens of it. I decided to go with Matches.com, as I’m quite interested to analyze differences between UX experience for luxury market products and brands, compared to fast fashion brands in this case, and follow the options and process until you actually add the product to the basket.

User flow

The user flow chosen was:

1. To enter the app and seach product by designer
2. Once the full list appeared I could have searched for one, but decided to click in the letter M, as I thought the designer I was looking for started with that letter but wasn’t quite certain.
3. Under the letter M, I scrolled down a little until I found the designer I was looking for and clicked again.
4. That took me to the brand page, where I could browse products by applying filters, but I decided to scroll down and clicked on the first product I liked.
5. That took me to the product page, containing more detailed info about this garment. I was anxious to add the product to the basket, so selected “add to bag” but the app reminded me I hadn’t chosen a size.
6. I clicked on my size, clicked on done and my product was added to the bag.

Screens 1,2,3

Screens 4,5,6

Wireframes

Wireframes made with Figma

Original screens from Matches Fashion App copied

You can check the interactive wireframes in the link below:

Click here to view prototype Matches

What were my learnings throughout this challenge?

Regarding the app I chose

Made me think a lot about UX design for luxury products, making me question the following:

• Seems that UX is more complicated for luxury fashion than fast fashion and there is more steps until you “add to basket”. This is due to the fact that fast fashion is mainly product centered, while luxury isn’t necessarily and created a lot of editorial content around the product.
• As a first line of though, because luxury fashion has a higher price, I believe the process of buying should be simpler, so that there is less opportunities for the user to question the purchase, and if they actually want to go forward with it or not.
• On the other hand, from the user perspective, there is probably the idea that buying a high end garment is about much more than the actual piece of clothing, and therefore simplifying the process may be too aggressive.

Would be really interesting to conduct some user interviews in this respect.

Regarding wireframing

I believe I learned:

1. The importance of thinking of all the elements you may need before starting the wireframe, and preparing a good library of these elements beforehand.
2. How different shades of grey, or adding effects such as shadows, can completely change the appearance and function of a wireframed too/icon etc…
3. Organization is key: keep every layer and every icon with a name and inside a group if possible. If not, once you decide to do so you will have an absolute mess of layers.
4. Select wisely one font or several fonts for your wireframes, and develop a small style guide for different headers, text blocks etc… This will also make life easier and help visually to convey meaning of a category or subcategory etc..