Evolution of an Interface

This charm builder tool it is a good example of the website prior to the adaptive redesign. Building this tool, I relied on user testing to find logical uses for the required elements such as the right rail and the bar of filters. Going through this process, I found the limitations of the established patterns and understanding how a redesign would bring more functionality along with a stylistic update. 

Challenge: The main goal for the site-wide redesign was to apply an adaptive design logic that would work across all devices, eliminating the need to maintain three; desktop, tablet, and mobile sites. By enabling more cross-selling functionality and including an editorial approach into the user experience would support the new business goals of targeting a more fashion-focused audience. 
 

Process: Transitioning the website to an adaptive layout was a multi-step process, starting with testing stylistic and formatting changes within the existing navigation and frame (shown above). The page layout, broken into The modules scale, wrap or load varying amounts of products to fit within any screen size. This helps establishes a hierarchy and the transitional behavior between devices and functioned more responsively while some of the adaptive functionality was still being figured out. 
Light color gradients help define the space of a module and could be easily changed for a seasonal update. This module grid is applied to the homepage, catalog, and category pages above. 

One of the most challenging pages was the product detail page, (below) including cross-selling functionality which had to be negotiated into the hierarchy without downgrading the in-depth product details. 

ui_detail_page_mobile.jpg

Some of the final explorations went into incorporating the adaptable navigation and breaking out of the blue frame.

Results: Testing was often inconclusive. In my opinion, this had more to do with a complex user-flow than stylistic and formatting changes. The biggest feeling of success was more internal; the stylistic changes to the branding were taking hold company-wide as was the spirit of trying new things.