The app idea first hit me on a Sunday afternoon. No, I wasn’t at home and taking a nap, but with my girlfriend waiting in a crowd, at the entrance of a shopping mall. Why? Because “we” couldn’t find the  perfect match to the dress, Kylie Jenner was wearing last night during the mega cool fashion show.
Source: Giphy
After many hours of painful queues I thought that there must be another way than to visit each of the designer shops and compare garments, so after we got home, I started to work quickly to ease the lives of others at least.
RESEARCH
First I dropped myself into a quick research about existing web and phone applications targeting celebrities and outfits. Although I was familiar with the concept from women's magazines, where bazaar-like pages are collecting the pieces of outfits together, that wasn’t the exact thing I was looking for. So I turned into something else...
Source: http://rogerbrunings.com/
Beside the analysis of the possible competitors I wanted to gain insights about the process of the clothes selection and the whole outfit searching, so I made personal interviews with my girlfriend and her friends upon the topic. These qualitative researches have marked in advance, that girls are primarily hunting on Instagram by following celebrities, and using websites of major women's magazines.
Girls checking out celebrities on Instagram
STRATEGICAL APPROACH
Thanks to the information obtained during the research and the current activities of competitors the idea slowly started to shape as a plugin which functions cross-platform on web and mobile with search engine algorithms under the hood.  One of the key barriers to buy clothes online was the complexity about the process for the female target group, so my product must guide the user through the buying process with the minimum number of steps possible.
The first sketches took place on paper using a dotted grid and pen.  I’ve made numerous variations of screens, and then used the POP application to make them connected to crete my first prototype.
My first sketches on the grids for exporting to POP application
WIREFRAMING
Although a good number of sketches helped to rule out many alternatives, the wireframing phase rose many questions about the product, mainly about speeding up the checkout process, and also  a simplification overall.
Wireframes of Shop The Look created in Sketch
PROTOTYPING
The second low fidelity prototypes have been made in InVision, and I returned with the usability test to my original sample of girls -mentioned before at the discovery phase- to keep consistency in the flow. Despite the prototype has received good feedbacks, a lot of explanation needed in terms of visual design, and what exactly will be seen on the screens.
InVision prototype of Shop The Look
BRANDING AND UI DESIGN

I wanted the application to convey some feelings visually when the user starts scanning outfits.  So after all I created a word cloud, and I found these 3 words the most descriptive for the brand: attractive, convenient and chic. I started to create colour variations, buttons, etc. but since a demo worths 10.000 words check here how all the pieces came together in an interactive prototype created with Principle:
My first product demo with UI and new branding
After several amendments and logo sketches I stood with the square shape, which gave me a lot of associations from people I was happy with. Some of them were thinking about an entrance of a shop, others perceived as a step inside a shopping bag. 
Looking at the colors I wanted to emphasize the chic elegance, so I used dark elements and also operated with varying shades of gray to create visual hierarchy. 
In the end I put together a visual style guide which not only focusing on the Shop The Look mobile app but also counts with a possible iteration for an independent Shop The Look blog as well.
Shop The Look Visual Styleguide
Back to Top