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.
UX Design, UI Design
Sketch, Abstract, InVision, Google Analytics, Whimsical
Gather information through surveys, a competitive analysis, and branding exercises to better understand Black Halo’s mission and goals.
Provide style tiles to align with the look & feel of a new art direction.
Create a new information architecture (IA), sitemap and navigation from Google Analytics trends.
Design low to high-fidelity mockups for final approval before the development and QA process.
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.
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.
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.
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.
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.
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.
SENIOR ACCOUNT STRATEGIST
SENIOR FRONT-END DEVELOPER