Andrea Kaplan-Chambers UX Designer and Developer

I am A UX/UI Designer, Developer and Fine Artist


based in Austin, Texas

Cupcakes and Cashmere

Project Type: New Client Website
Client: Cupcakes and Cashmere
My role: Engineer, Creative Consulting
Languages: CSS3 (LESS), HTML5, Bootstrap, Javascript, Twitter API, JQuery, Knockout, Orchard Framework

A Style Guide is the first step in establishing the branding profile of a new client if no prior branding exists. It gives the client options within a complimentary range of colors and fonts so that they can feel free to pick and choose, while also not blowing out the scope of the final deliverable build. Light colors and ethereal font families were chosen along with the custom font family "Emily's Handwriting" inspired by the owner's signature.

Going with the ethereal theme, a clean design was generated with dynamic hot spots for generating immediate Calls to Action. The Main Menu was purposely designed to be short and to the point, the Header area was built as a customizable carousel that contained hot spot areas for click-through's on featured content, and the main body content featured custom seasonal collections.

The Product Listing Page was category-based with a custom banner. There are filtering options by Color, Size or Style; and the ability to Sort the results based on Newest Arrivals and Cost. Pagination was added to show how deep the results went and gave the user the option to fast-forward in the search results page. Products were represented as thumbnails with their Name and Price below.

The Product Description Page featured breadcrumbs for secondary navigation, a Zoom tool that showed when the user hovered their mouse over the main product image, thumbnails, pricing, color swatches, Size dropdown select, Quantity dropdown select, and Size Chart accessible through a popup.

The Details section included Sizing information along with a full description of the product, along with an Add To Wishlist link so that the user could save it for later browsing. Also included below the thumbnails is a video link which led the user to a popup that automatically played a video of the model on a runway showing the product.

The Product Description Page was loosely mapped out without product images to give an idea of how the responsive website would adjust on tablet and mobile devices.