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.
Role: UX/UI & Brand Designer
Responsibilities: Interactive Desktop & Mobile
Duration: 7 Weeks
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
Illustrator
Photoshop
XD
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.
Flow Chart
I started off mapping out the 'screen' and behaviours' of the contest microsite with a flow chart.
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.
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.
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.
