THE PROBLEM   >   THE PROCESS   >   THE DESIGN

a more immersive lookbook experience

concept for zara

type


Personal Project

roles


UX, UI, Brand, Prototyping

skills


Sketch, After Effects


THE PROBLEM

Zara is a well known in the fashion industry for their editorial style and as of August 2016 their website and apps features an editorial page where they showcase unique styles part of featured campaigns that resembles like a magazine.

While the website version makes good use of the canvas to portray unique layouts that brings out the branding of Zara,

the lookbook experience is inconsistant and does not carry the same effect on mobile.

Upon doing some browsing through Zara's campaigns I found some videos that were a part of the campaign.

This gave me an idea to do some research on how I can use these creative videos to transform the lookbook experience for Zara.

THE PROCESS

Brainstorming the possibilities

I started off the project by researching the current aesthetics of Zara's UX and UI in both web and mobile. Keeping in mind of Zara's use of typography and layouts I went to wireframe the possibilities and focusing on mobile first.

so why use videos instead of photos?

While Zara effectively uses static images to curate different layouts to portray an editorial feeling and unique storytelling elements which emphasizes their branding, it does not work the same way for mobiles.

The disadvantages for mobiles is the limited spaces to work with when presenting content.

However this can be used as an advantaged if use a strategy that showcase the content as full as we can. By using videos, scrolling continuous is not needed to observe and get the feeling of the unique individual campaigns.

but why video transitions?

Transitions using videos between interactions not only gives feedback that user has taken an action but also helps continue the storytelling. This is perfect when used along the campaign videos Zara uses to show off the concept.

Additionally, transitions subtly makes a connection between the concept and product.

and why make it Frame-By-Frame?

This makes the transitional visuals distinctive from the videos as the user go from one page to another. It also offers flexibility to how Zara can portray different kinds of transitions through their concept.

THE DESIGN

Immersive Storytelling Experience

The end result is a feature that brings out more of the unique individual concepts for the Zara editorial pages which takes advantages of devices with a small real estate.

Browsing through Campaigns

When reached to the lookbook page, all the campaigns are first presented in a horizontal list with video snippets to portray the specific model and concept. Going into one expands the snippet to a full page background to represent a transition into the specific page.

Choosing a Product

After choosing a campaign, a transition will take place and bring out a list of products were featured. As mentioned before, the transition helps make a subtle connection between the style concept and product.

Picking out the Details

Selecting a product will then bring out more information as well presenting an option to adding into the shopping cart. The microinteraction helps users understand the process adding a product into their cart after confirming with the picked size.

more of his featured works