Amuse Society

I worked with Amuse as their UI Designer and Front End Developer. The goal was to create a site that was modern, intuitive and set Amuse apart from their competitors.


The process was highly collaborative, as Amuse had a well-defined aesthetic and overarching vision for the brand, but needed my guidance and expertise to build a site that captured all of these elements while also adhering to best practices set by the market as a whole.

Challenge

I partnered with Amuse shortly after they were founded. To compete with other lifestyle brands, Amuse needed a fresh modern store to match their beach meets street aesthetic.


The branding and style were already solidified but all other elements of the site needed to be conceptualized, designed, mocked up, coded and tested.


Moreover, the site needed to enhance the brand by showcasing profiles of the company’s muses - a diverse group of women who represent all shades of creative expression, ranging from art to music.

Competitive Analysis

Amuse had a fully formed aesthetic, but they lacked brand awareness, an online presence and they needed to separate themselves from their competition.


I researched several competitor sites, such as asos.com, dollskill.com and aritzia.com to identify opportunities to differentiate the Amuse brand and UI from other companies offering similar products. It was important to understand what their competitors had groomed the market to expect from their online shopping experience.


Key findings

Design

  • A focus on product imagery
  • Featured products on homepage
  • Hero image/carousel on landing
  • Alternate product images on hover

User Experience

  • Propose and highlight free shipping
  • One global navigation
  • Popup cart summary that stays on product detail page
  • One page checkout
  • Allow for gift basket customization
  • Option to specify delivery date and a note to recipient

Brand Building

  • Subscription email box visible everywhere
  • Social / share buttons for product

Opportunities

  • Profile pages for muses

Design Process

The design process was a true collaborative effort with the brand. I chose a clean, minimal and imagery focused design that made use of the entire page width. I started by prototyping my concept in Photoshop and then converted to Magento.


Designed to quickly grasp the eye of customers, the product wall featured must-haves, instant alternate views and suggested pairings to complete the look. If a specific item was out of stock, customers had the option of choosing to be notified (via email address) when that item was back in stock.


Also, a "Society" landing page was built to feature the company’s muses – a diverse group of women who represent all shades of creative expression, ranging from art to music.

User Flow



Wireframes



Style Guide

#85714d
#000000
#FFFFFF

Tools

  • Photoshop
  • Illustrator
  • Fireworks

Development

I created pixel precise hand-coded markups in Magento and used a CSS preprocessor to meet the high coding standards. I used the Bootstrap grid layout to ensure a responsive ecommerce experience that was compatible across multiple devices.


The site was also tested across all browsers to make sure that it looked and behaved as intended, providing a uniform brand experience no matter how users access it.


Tools

  • HTML5
  • CSS3
  • SASS/Compass
  • JavaScript
  • PHP
  • XML
  • Bootstrap
  • Magento 1.9
  • Git
  • FTP
  • Sublime

Final Deliverables

Visit Site