Customized eCommerce Web Redesign

Redesigned digital presence for a popular lifestyle and accessories brand, focusing on mobile first, streamlining navigation, and bringing the high-touch personal experience of the SCL brick-and-mortar stores to the digital platform.

Role
Creative Director
UX Lead
Digital Branding & Visual Identity

For this project, I led the creative team and interfaced with client and internal stakeholders, spearheaded the redesign of the user experience and crafted the new visual identity for the SCL digital presence.

Process: Research

SCL was founded several years ago by two sisters, and has grown incredibly quickly from there. Their focus is bags personalized with patches – for which there are scores to choose from – but they have expanded into other accessories and products as well, leading to a large, wide-ranging product seletion.

Based on Shopify, the SCL eCommerce experience

We dove straigt into learning the business, parsing out areas of opportunity and their visions of the future. My usability audit brought out multipe pain points and opportunities to improve the customer experience, and a customer survey of more than 450 people gave us a good idea of how users were currently using the site. Overall there were some significant issues with the core Customizer tool, especially on mobile.

Process: Strategy and UX Planning

We completely re-worked the navigation structure to streamline the users' ability to find and customize products. The previous SCL website had a very confusing navigation structure, making products difficult to find and organize. The new information architecture is streamlined and organized, with advanced filtering for product collections.

As we found in the research phase that a majority of users were coming to the website straight from instagram, we really wanted to improve the difficult mobile experience. We completely re-designed the mobile customization process from the ground up, crafting a thoughtful step by step process allowing for the greatest flexibility in product customization and ample space for the critical patch placement step.

Redesign of Information Architecture and Improved User Flows

Wireframes of a new step-by-step customization flow

Branding & Visual Identity

The three brick-and-mortar SCL stores are bright, airy, and with a strong visual aesthetic that was not matched by the previous website. I created an entirely new visual system to better reflect that in-store feel, bringing in multiple shades of pink, keeping the text crisp and clean, and including a lot of whitespace, symmetry, and order for the light, organized, and elevated feel.

Crafting a system of visual identity

Final Designs

The first phase of the new SCL redesign focused on brand consistency, optimizing the customizer, streamlining the site navigation, and making sure the site was completely responsive.

We built out product pages for their wide range of products – bags and pouches and the hundreds of patches to go on them, and all sorts of accessories to go in them. Thoughtful filters for each type of product category make the process of finding things easy and intuitive, and directional cues seamlessly lead users to the central customizer tool, where they can then add and arrange patches to their heart's content.

Menu + Navigation Experiments

Intuitive product organization

Dynamic filters & quick shopping options

Seamless product variation selection

A simple, clean and clear front-end for a complex back-end.

The customizer tool offers a ridiculous amount of functionality in a really simple and easy to use package. Users can add patches, rotate them, change and move them as much as they want. Go back and try different colors, bags, and sizes without losing their progress, save their creations for later, or send them on to friends and family in a gift hint as a finished product.

Easy 1-2-3 instructions for Customizer tool

Seamless experience mirroring in-store activities

Device-specific UX for key tools

A lot of effort went into the clear and logical presentation of these customized products in the shopify shopping cart. Every bag and added individual patches are grouped together in the cart, so its never a question of what you're purchasing and how it adds up. Users can mark each creation as a gift individually, or the entire purchase at once, and write as many notes as needed to accompany them.

Ability to select & arrange unlimited patches

Easy patch selection & maneuverability

Clear product groupings in cart

Clean & consistent throughout