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 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
Our Approach
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 + Made in Los Angeles.
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.
Navigation
By observing trends from Google Analytics's 'Behavior Flows' and 'Site Content', I redesigned the structure of the navigation for both Mobile and Desktop. I nested brand specific named categories under a more general/universal nomenclature to help guide new users to qualified products.
To highlight any new or best selling products, I introduced lifestyle imagery within the desktop navigation.
Product Listing Page
Due to Shopify's CMS constraints, accurately presenting the amount of variant options offered by Black Halo was a tricky problem to solve. I worked closely with the developers and engineers to ensure filtering and hover states were accurately represented during the customer journey. Additionally, I included a side scroll of popular subcategories to help 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 were naturally reached while scrolling.
Product Details Page
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 to the PDP which included more information about the fabrics, and added a CTA which redirected users to a collection pre-filtered by fabrics.
Staying true to the theme of 'Quality Fabrics', I also enlarged the product imagery within the design to highlight the fabrics and remove the initial need to zoom for their users.
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.
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