Redesigning a LA fashion brand during a platform migration

Overview: Black Halo is a high-end, women’s fashion company based in Los Angeles and led by designer Laurel Berman. With the success of their Jackie O dress, and frustrations with their past ecommerce platform, they decided to migrate and redesign their entire website on Shopify Plus.

Results: With our team of strategists, designers, and developers, we successfully migrated Black Halo’s entire product catalog and customer database. During the migration, we implemented a new art direction and incorporated UX best practices to streamline the shopping experience.

MY RESPONSIBILITIES

UX Design, UI Design

TOOLS USED

Sketch, Abstract, InVision, Google Analytics, Whimsical

Black Halo
Black Halo

Our Approach

1

Gather information through surveys, a competitive analysis, and branding exercises to better understand Black Halo’s mission and goals.

2

Provide style tiles to align with the look & feel of a new art direction.

3

Create a new information architecture (IA), sitemap and navigation from Google Analytics trends.

4

Design low to high-fidelity mockups for final approval before the development and QA process.

Black Halo Discovery Phase
Black Halo Discovery Phase

What we focused on for the redesign

During the competitive analysis, we noticed a couple trends within the luxury fashion ecommerce space. Websites were either so simple that they were indistinguishable from one another, or so experimental that some aspects of the site were unusable, such as type sizing and spacing causing usability issues.

In an effort to find that perfect balance of “unique and usable,” we doubled-down on a few key themes for Black Halo’s redesign. Quality fabrics + sophistication + being made in Los Angeles.

Black Halo Made in LA
Black Halo Made in LA

Design Process

Once the art direction, IA, sitemap, and navigation were approved by the client, we started to produce wireframes and mockups to ensure business goals and needs were accounted for. Throughout the design process, I met with our internal agile team for any third-party app design restrictions, and consulted with our development team for any concerns on complex features or animations.

Black Halo Scroll Text Section
Black Halo Scroll Text Section
Black Halo Navigation Design

Navigation

I reorganized the structure of the navigation by referencing specific trends I found in Google Analytics Behavior Flows and Site Content. I also nested brand specific named categories under a more general/universal nomenclature to help guide new users to qualified products.

Additionally, I introduced lifestyle imagery within the desktop navigation to highlight any best selling or new products, while also adding color to the feature.

Product Listing Page

Presenting the amount of variant options offered by Black Halo was a tricky problem to solve due to Shopify CMS constraints. I worked closely with the developers to ensure filtering and hover states worked as expected. I also included a side scroll of popular subcategories to educate users of their options while browsing.

To help with page load time, I introduced a hybrid infinite scroll on the product grid that would reveal a CTA to “Load More” after a specific number of products would appear as users naturally scrolled.

Black Halo PLP Design
Black Halo PDP Design

Product Details Page

Staying true to the theme of “quality fabrics,” I took advantage of the client’s already existing assets by enlarging the product images within the design to highlight the fabrics and remove the initial need to zoom.

From early conversions with Black Halo’s customer support team, shopping by fabrics was a known user behavior that we believed could be beneficial in the redesign. I added a new section which included more information about the fabrics, and added a CTA which redirected users to a collection filtered by fabrics.

Final Results

As a team, we successfully migrated Black Halo’s eCommerce store to Shopify Plus with a new look & feel that separates them from their competition. Along with the redesign, UX improvements were incorporated to help user browsability, product understanding, highlight brand themes, and resolve site speed concerns.

Overall, I was responsible for creating designs for the navigation, product listing page (PLP), product details page (PDP), about us, checkout, account dashboard, store locations, search functionality, notifications modals, and overseeing the design QA process.

Black Halo Additional UI Designs
Black Halo Additional UI Designs

Learnings

EARLY COMMUNICATION IS KEY

Communication was the main component of why this project went as smoothly as it did. We had the luxury of multiple meetings with the client that included our entire team of project managers, strategists, producers, developers and designers. By doing so, we called out any red flags before they could become an issue.


THE DEVELOPER AND DESIGNER DYNAMIC

Our designers and developers had an open door policy throughout this project, which reduced any amount of assumptions when translating designs into a functioning website. This ranged from type spacing and animations to filtering and page loading states. I also found it beneficial to involve developers early in the design process, which helped me brainstorm possible solutions while gaining a better understanding of Shopify’s innate limitations.

Credits

AGENCY

BVA

YEAR

2019/2020

SENIOR ACCOUNT STRATEGIST

Sally Kay

ECOMMERCE STRATEGIST

Taylor Elliot

PRODUCER

Gina Gaines

UX/UI DESIGNER

Jeremy VanDerpluym

SENIOR FRONT-END DEVELOPER

Oscar Pan

FRONT-END DEVELOPER

Ian Springer