OSO Mattress

OSO is a new mattress-in-a-box brand created by long time sleep system maker Reverie. The OSO mattress has a huge leg up on the competition in that they offer a unique option to customize each side of the mattress to the customer’s sleep preference. Visit OSOSleep.com

OSO illustration

Discovering OSO

UX/UI Design

The OSO website had already been launched when they decided it needed a makeover to improve brand awareness and overall online conversions. The OSO mattress’ left and right sides can be configured with 4 comfort options; soft / firm, firm / soft, or all firm or all soft .

Wireframe drawings

My first steps were to define a solid sitemap and content strategy. With help from OSO, we were able to breakdown the content page by page to create a unified content experience that would drive users to checkout.

Sitemap and content strategy

Once the sitemap and content strategy was approved I began the wireframing process. Every page was created with the goal of navigated the user through all the benefits of the OSO mattress and to convey the overall brand messaging.

Wireframes

My main objective was to create an experience that allowed full customization of the product to the user. This included utilizing interactive elements and animation. Additional objectives were defined in order to accomplish OSO’s goals.

Product page prototype
Home page prototype
UI design components

Branding on Point

Art Direction

My next step was to get the OSO branding and overall styles into the Web 2.0 world. I started by creating a new style guide that would assist not only me with the website but provide OSO a road map to keep branding consistent in other mediums including print and digital advertising.

Styleguide: typography, branding, color pallet

Building OSO

Front-end Development

It was now time to put all the elements into play and build the website. OSO was already building on Magento and since I’ve been building ecomerce site’s on Magento since 2007 (I know, that’s 10 years!) I was ready to dive in.

Responsive, mobile-first design

The OSO mattress is basically a single product with multiple skus but because of the complexity surrounding the mattress configuration OSO needed Magento's robust system that can handle multiple attributes to be selected at once.

Responsive, mobile-first design

Next step was to incorporate GreenSock, my favorite animation JS library and ScrollMagic. When using GreenSock in conjunction with ScrollMagic you can really provide the user with an immersive experience that stands out.

OSO home page design
OSO product page design

When all was said and done the new OSO website really hit the mark and the user’s responded well! With these systems working together the finial product came together nicely and accomplished all the goals Reverie set out with the new OSO website. Visit OSOSleep.com