This project was thought to present the fashion brand RVCA for the men's segment of the multibrand website Bikini Village. For this, Bikini Village made a quiz contest where some of the clients would win prices composed by RVCA products.
RVCA for itself has this incredible theme of being the duality of two worlds: beach and urban. My whole visual was based in this duality and its variations (women/men, skate/surf, organic/linear, etc).
I've been working for Bikini Village for 2 years now as a Visual Designer and or this project I was the only designer involved in collaboration with e-com content team and leaded by a marketing manager. My role in this project was to build the whole UX and UI design and the page code. Note that the project showed here it's not the version that went online, I rethought the whole process based on my new experience and UX/UI studies specially for my portfolio.
The main goal was to present the recently added brand RVCA to the men's segment of Bikini Village website and increase its selling with traditional women's segment through a contest about RVCA’s history and concepts.
My challenge was to create a visual that could attract the men segment with no loss of the already-built women public. Also, the goal being to show RVCA's history and curiosities for the quiz contest, another big visual challenge was the amount of text we had to insert specially on the small mobile screens.
Our main target was Bikini Village's men's segment but not letting down the women's one. The page should be visually attractive to both genders.
For the page structure, some items were demanded by the content team such as the prizes photos (to show the women's and men's kits in detail) and a video (automatically played) to visually support the content and bring the user into RVCA's mood.
For my wireframes we agreed to start with a hero showing an H1 and H2 that would quickly explain the contest with an image to support the theme on the background. One of these texts should contain RVCA’s name for SEO purposes. A cta button should follow up the text (above the fold) conducting the user to RVCA's products page directly in case they have the impulse to shop (being selling our main goal) and had no interest on the contest.
The second section had to present the contest prizes to engage the users to continue scrolling and enter the contest. Respecting the duality of the brand motto, I decided to show the women’s and men’s prizes side-by-side even on mobile. To support the visual communication, I also created icons for each item containing on the kits.
The video was actually the last element positioned on my wireframes, as it was only a visual support. I didn't want the structure to be prizes and products directly, so I decided the put the video in between them to add some visual break between these elements.
Being selling the main goal of Bikini Village, the products section is placed in the middle of the page. Selected RVCA’s products (women’s and men’s) were presented on a slider (manually commanded), each with a quickview icon (+), product name and a button for buying (“Select size”). These elements were added to give users all the options they could have for complete a buying journey.
Finally, the next section was dedicated to presenting the text about RVCA’s history and curiosities that would be the theme for the contest quiz.
The last section was a banner for the contest quiz itself. It should follow the text part and be the last thing on the page to induce the users to scroll all the way down to enter the contest.
I followed my moodboard and the photos already provided to me as a base for my UI Kit, such for the colors and icons styles. Being this page part of BikiniVillage’s website, I had to use its family font, Open Sans.
My final visuals are actually an adaptation of my wireframes. I see wireframes as guides to UI. The visuals could vary based on the needs the project shows along its way, such as coding problems or, in this case minimum quantity of photos, etc.
For the contest quiz banner, I wanted it to highlight from the others even if it was the last one on the page. So, I added a scrolling text as an alert for the contest and putted the cta button as a primary one (with the pink primary color).
