The international sustainable fabrics company created a luxurious, and anti-allergy bedding alternative via a eucalyptus fiber blend, sold via e-commerce.
Google Analytics was the first tool I set up to gain insights into our users. The first insight I gained was regarding our demographic. It seemed that middle aged women made up over 80% of our user base. They were purchasing for themselves primarily however, gift sales occurred about 30% of the time, we later leveraged this data to further improve the gift process via adding more dominant and easier to use gift code usage and hoisting gift purchase promotional on the homepage and in other promotional materials.
First I collected all the product data, so I could organize and prioritize the products, their meta and categories. Respecting the content first approach I organized the IA with this data as well as the marketing content and imagery available. I then mapped it to a site map and wireframe of each of the pages, for approval of the VP.
After approval of the IA and wireframes, I created labeled and detailed high fidelity mock-ups, fleshed out with imagery, coloring, typography, and glyphicons. The details included broke down why things were placed where they were and why they were styled a certain way. This increased the understanding of the stakeholders.
Our demographic was made primarily of well off, young adult and middle aged women who were looking for beautiful, anti-allergen or softer alternative to the market dominating cotton and silk options. Soft earthy expressive and elegant typography and colors were chosen to cater to this. White space as well as the neutral itself were used as much as possible without sacrificing functionality, UX, and scanning/flow. This helped provided a clean, open, airy, bright feel through out the site.
I build the UI as a component library. Hero (top left): Re-useable as a masthead item at the top of pages, or as an informative separator with a prominent call to action.Shop (top right): Allows multiple filtering of products. Displays available colors in thumbnails, heading, description, and flair-able price (sale, etc.) in a manner that maximizes user visual flow through alignment and styling of the elements. 3 Column (bottom left): Allowing each of the images, headings, descriptions, and button to be configurable or left out enabled a high amount of customization for the CMS users, providing consistency and variability.