Collaborated with Dynamic Yield to bring new interactive features to UO's website.


DY Category Quiz

The DY quiz was launched with the purpose to give customers a more personal shopping experience. By answering a few questions, the user is then taken to a category page with products that match the answers chosen during the quiz. 

Originally, the quiz was meant to be the perfect dress/romper, but due to the timing of the quiz launch, was rewritten to fit the new “Get Cozy” direction with a focus to make the best of your stay at home.


The quiz was first launched in May 4, 2020.


Role: Wireframes, production, redline development, mobile asset creation


Art Direction - Andrew McQuiston

Copy - Rachel Haas, Annaliesa Downey

Creative Direction - James Mackenzie

Executive Creative Direction - Dan Kent

In collaboration with Lauren Markarian, Buena Chan, DY developers and URBN’s UX Designers.

Quiz userflow

Part of the design process was to identify where the user would access the quiz and where it would take them. Both the category page and landing page banners are accessible through the home page and the main site navigation. The PDP notification was also important as a lot of traffic comes directly into the PDP. 

The results' category is determined by how many questions of each "letter" do you answer. There is a total of five question, to have as much variety as possible but without boring the user. In case that there is a tie for two categories, one will be randomly selected. If unhappy, user can access the other categories and even retake the quiz.

Wireframes

Mobile

Secondary banner placement in category page.


Fly-out notification in PDP.


Quiz launch screen with live type + CTA.


Default question screen.


Selected answer state.


Loading screen waiting for results.


Screen to take to category page.


Personalized category page with results banner.


Desktop

Secondary banner placement in category page.
Quiz launch screen with live type + CTA.
Default question screen.
Selected answer state.
Loading screen waiting for results.
Screen to take to category page.
Personalized category page with results banner.

Secondary banner placement in category page. Quiz launch screen with live type + CTA. Default question screen. Selected answer state. Loading screen waiting for results. Screen to take to category page. Personalized category page with results banner.

Final Screens


Slider Promo

Rather than just having a normal promo spot on the website, the goal of this project was to incorporate a secondary message that also created a more dynamic interaction with the customer. 

With this idea in mind, the slider promo acts as a peek-a-boo message, inviting the user to interact with it in order to see the complete message. If necessary, the slider can be closed through the "x" at the top right corner. 

The first release of this feature was in December 2019, for the 25 Days of UO Rewards experience.


Role: Ideation, visual design, production, front-end development, VQA, archival process book and instructions manual


Art Direction - Andrew McQuiston

Creative Direction - James Mackenzie

Executive Creative Direction - Dan Kent

In collaboration with Lauren Markarian, Buena Chan and DY developers

The slider is responsive, the browser's height and width determines the slider's size. In contrast with the standard promo banner, the type is customizable, and can be adjusted as needed per promo.

 

More from Urban Outfitters

Using Format