Build-Your-Own-Bundle

Improving the UX and UI of a 3D bed-set builder tool, which would scale into other collections, such as table linen sets and bathroom sets. Users could select a variety of bold colour-ways and sizes, with a handy tool to see their vision come to life.

Before - Desktop

The most MVP feature, this interactive game-like experience applies colours to a rendered set in real-time. Simple is better in a minimalist aesthetic, while intuitively guiding users through a complicated journey of creating a custom bed set order from their favourite choice of colours, sizes, and add-ons.

Desktop - After

• Colour swatches are pulled out of the dropdown for improved comparison, and less clicking. The original dropdown didn’t make it obvious you could scroll, potentially skewing popularity for those “above the fold” within that menu. Now people are more likely to find what they’re looking for.

• Changing the menu background from grey to white improves legibility and interpretation of colour, as well as rearranging by order of similarity.

• Size Guide helper tool offers more clarity on dimensions, borrowed from fashion sites.

• Selections are previewed, and easy to dismiss

• Architecture of flow is rearranged more chronologically

• UX writing improvement: “Extras” switched from “Optional Extras”

• UX Writing: “Summary” instead of “Checkout” since it is simply being added to the cart.

• Redesign proactively accounts for roadmapped product line expansions into nightwear, bath linen sets and table linen sets.

Mobile - Before

• Breadcrumb checkmarks/error icons get cut off, losing some functionality and so do dropdown selections

• Space for selection panel is very limited by inability to scroll the page, and real estate occupied by render

• Buttons and text are too small for mobile, so it’s harder to use and not properly responsive

• The division of steps into several tabs makes it difficult to go back and make any changes. Consolidation of certain tabs makes it much easier and encouraged for users to “play around” with combinations

• Dropdown selection is not easy to navigate for comparing colours, they are put into order of similarity and one a white background instead of grey for better accuracy

Mobile - After

• Breadcrumb checkmarks/errors icons switch sides for better visibility

• Page is able to scroll, and the render is made smaller on the screen, for larger button sizes and ease of interactions for a proper responsive mobile design

• Consolidation of certain tabs makes it much easier and encouraged for users to “play around” with combinations

• Colours are broken out of the dropdown and rearranged in order of similarity, on a white background instead of grey for better interpretation and toggling.

Table “Build Your Own Bundle”

Building off of the strong foundations of the Build-Your-Own-Bundle bed linen set customization tool, and adapting it to table linens.

Early UI Experiments

Gaining refinement

Cart Redesign

Streamlined order details and articulated selections for a less confusing user experience, preventing extra load on CSRs and pain points resulting in potential for mistakes on orders. Adjusting Taxonomies of naming conventions for SEO and warehouse POs, but more importantly, the ease of use for customers.

Creating Video Content

Beautiful videos to tell the story and educate users visually. Pixel-perfect for ad collateral and embedded autoplay website experiences.

Creating a brand identity

Launching new facets of the brand into lines like candles, home scents, and also a Journal microsite concept, since our blog posts were very strong and we wanted to bring that part of our digital presence to life with it’s own distinct experience outside the eComm format.

Inspiration gathering for graphic-typography relationship

Very Aesthetic ~ An influential app we loved and emulated,
Co-Star Astrology

Gathering inspiration for a microsite Journal project.

Image Overlay Quick Selection

A way for users to browse beautiful lifestyle photography and shop a set of colour-ways featured in the photo, via a parallax modal which would slide up on hover for desktop.