Customized eCommerce Web Redesign

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 + Discovery

Business Deep Dive + Current Process Audit

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.

Technological Discovery

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.

Identifying Key Pain Points + Opportunties

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

Bringing the In-Store Look + Feel to Their Digital Presence

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.

Strategy & UX Planning

Prioritizing Ease of Navigation

I spearheaded the complete overhaul of 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.

Mobile Experience First

As we found in the research phase that a majority of users were coming to the website straight from instagram, I knew improving the difficult mobile experience would be a top priority.

I led my team to completely re-design 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.

Iterative Design Process

Streamlining the Experience

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.

Prioritizing Filters + Search

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.

The Extremely Custom Customizer Tool

Key Customization Tool To Mirror the In-Store Experience

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

The digital 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.

Working Hand in Hand with Development for a Seamless Result

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!

The Personal Cart Experience

Clear + Logical Presentation of a Varying Mix of Options

A lot of effort went into the clear and logical presentation of these customized products – and all their accompanying options and add-ons – in the shopify shopping cart.

Technological Wrangling

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.

Direct Result of Complex User Needs

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.

Implementing Save for Later

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.

Adding Seemingly Simple Edits, Duplicates, and Gift Notes

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.