Vivant Contest Microsite

Vivant is a Parisian fashion brand that embraces bold clothing designs, and who has recently expanded their stores in Canada. They are hosting a contest that allows users to engage and participate on the site. The goal is to create a place for Vivant's followers to connect, share and interact with the compelling online content.

Art Direction / UX · UI Design

Interactive Desktop & Mobile 

Duration: 7 Weeks

multi-device.jpg

The Problem

Vivant is a brand that embraces bold and unique clothing designs. They are well-loved in Europe and Asian countries, but not so much in Canada. The problem that they are facing is loss in sales as majority of Canadians prefer purchasing minimalist designs over bold clothing designs.

The Challenge

The mission is to create the best online experience that connects the brand with its fans. In this project, I am tasked to design contest microsite that promotes the brand and engages the target audience by providing clear call to action and information about the contest for users participate by submitting content and, or voting for winners.

Toolkit

Adobe_Illustrator.png
Illustrator 
Adobe_Photoshop.png
Photoshop
Adobe_XD.png
XD
invision.png
InVision

Design Process

Define Target
Audience

Flow Chart

Wireframes

Ideation

Final Prototype

Primary Persona

Marie Esmaeili is the primary audience of this project, she based on the challenge that the brand is trying to overcome. A mood-board was created to gain a better understanding of Marie's personality and lifestyle. Vivant's contest is designed to inspire individuals like Marie, who prefers a minimalistic clothing style, to go out of their comfort zone and give more personality to their wardrobe.

DD50_kristyhui_ConceptStrategy_Page_2.jpg
DD50_kristyhui_ConceptStrategy_Page_1.jpg

Flow Chart

I started off mapping out the 'screen' and behaviours' of the contest microsite with a flow chart.

desktop_design_package-01.png

Wireframes

A greyscale desktop and mobile wireframe was made in Adobe XD with the 'call to action' buttons in the colour purple, indicating the behaviour (options) users has on the landing screen. Two iterations of wireframes were made, the first one being a rough draft and the second was revised after receiving feedback and user testing.

Screen Shot 2021-12-05 at 4.38.54 PM.png
Screen Shot 2021-12-05 at 4.39.43 PM.png

Art Direction

I created a Moodboard and a Style Tile for Vivant's to convey its brand identity. Vivant is a friendly, playful and free-spirited brand that likes using small illustrations and organic shapes to create a fun and positive experience for their customers. The colour palette is a mixture of shades pink and orange to express the positive energy as well as shades of blue to portray the free-spirited and artsy side of Vivant. These aspects, including the friendly and feminine typography used in the branding, creates a memorable experience for Vivant's fans who are participating or voting in the contest.

Concept_01_moodboard.jpg
StyleTile_01.jpg

Final Prototype

Interactive Mobile Prototype

Users can navigate to other pages on the microsite by selecting the hamburger menu. There is a help button on the bottom left corner if users need to inquire more information.

Information about the contest and prize is found on the homepage. Users can view recent submissions by other participants. If they wish to participate, they can simply navigate to the submission page to learn more.

Interactive Desktop Prototype

A full rundown of the voting and participation process of Vivant's contest microsite. Users are able to vote for the participant they wish to, and enter the contest by following the rules to participate, which is submitting a form and image of your outfit. The desktop microsite displays effective feedback from call to action buttons. After receiving final feedback and revising the prototype, this is the final product.

desktop.jpg
mobile.jpg