Client: SiO Beauty
Landing page targeted from a facebook ad.
Go to website
The objective was to create an educational landing page for one of SiO’s products — smoothing kits — and inform consumers coming from a facebook ad on why they should convert.
The current homepage didn’t have as much information to convey what this product was and the product detail page was cluttered with too much information. Neither one had a great storyline or hierarchy of information, so we needed a landing page that would serve to educate the consumer on what the brand is and how the particular product could help them.
My strategy was to educate the consumer on what the product is, how to use it and quickly be able to get a sense of the brand.
I designed two versions of the landing page for SiO Beauty:
– The first version has a greater focus on product. The initial call to action is to view more products, followed by an instructional section on how to use the products. The last section displays all the products in the smoothing kits. This solution makes the product concept easy to digest, but may lose some of its brand identity.
– The second version speaks more to the idea of the brand. It uses its brand voice to go more in depth about their general products and mission. It still conveys the ease of use of the product, while embracing their unique tone. I feel this version gives enough information to clarify the product for the consumer and maintains its personality.
I decided to build out a prototype of Version 2.
I set up a development environment using a Yeoman generator to scaffold a base webapp and create common project assets. I used HTML5 and CSS3 to code the app. Some of the tools I used included: Sass (for coding in scss syntax), Gulp (for optimization, testing, watching files and refreshing browser), and Git (for version control).
I used two fonts as a close substitute to replace their existing web fonts — which aren’t available for free.
Open Sans & Oswald were both included from Google fonts, as well as icons from Font Awesome.