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 personalization and checkout experience of the SCL brick-and-mortar stores to the digital platform.

Role

Creative Director
UX / UI 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 visual design, as well as crafted the new visual identity for the SCL digital presence.

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 did not initially match the in-person store experience. It suffered from an incredibly awkward customization tool, making personalizing their items extremely difficult online – a key component of their product line and business model.

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.

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

Strategy & 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 and piecemeal categorization system, making products difficult to find. The new information architecture is streamlined and organized, with advanced filtering for product collections, and able to flex and grow as their team adds new lines and collaborations.

As we found in the research phase that a majority of users were coming to the website straight from instagram, we knew improving the difficult mobile experience would be a top priority. 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

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 Infrastructure

Intuitive product organization

Dynamic filters & quick shopping options

Seamless product variation selection

The Customizer

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.

It took a lot of research, experimentation, and collaboration with the development team to create this seamless, intuitive tool. You'd never know it from the front end, but there is a ton going on back there to so closely match the in-person shopping and personalization experience with choosing and arranging patches on selected bags – plus some useful tools thrown in to make take advantage of the digital realm, like Share and Save For Later. We rebuilt the backend structure extensively in order to redesign this critical tool, which had the added benefit of improving their organization and fulfillment process as well!

Easy 1-2-3 instructions for Customizer tool

Seamless experience mirroring in-store activities

Device-specific UX for key tools

The Cart Experience

A lot of effort went into the clear and logical presentation of these customized products in the shopify shopping cart.

Every bag with its personalized patches are grouped together in the cart, which sounds simple but requierd a lot of wrangling of the default shopify system. But the clarity of bundling those individual products together for the user is priceless – and its never a question of what they're purchasing and how it adds up.

Based on research into customer needs, users can now mark each individual custom bag as a gift, or wrap the entire purchase together, and write as many gift notes as needed to accompany each.

Ability to select & arrange unlimited patches

Easy patch selection & maneuverability

Clear product groupings in cart

Clean & consistent throughout

The Cart Continued

Since we know many people like to customize a lot of bags, add them to the cart, then decide later which to purchase when, we integrated the Save For Later functionality with the user's Account and the Customizer tool, so no bag will be left behind, and everything is accessible from anywhere on the site.

If a user realizes they spelled something wrong, or just wants to switch their unicorn patch with the beaded rainbow, users can also Edit everything in the cart, not losing its place there or anything else. If they have a large party (think bridesmaids gifts or big themed trip souvenirs), users can easily Duplicate designs and Edit from there – no need to re-do all that work over and over again!

Basically, if the user needs it, we added it. This cart is seamless and intuitive, and shows no sign of the effort it took to make it so.