Redesigning a LA fashion brand during a platform migration
Black Halo is a high-end, women’s fashion company based in Los Angeles and led by designer Laurel Berman. Frustrated with their past ecommerce CMS, the Black Halo team decided to migrate and redesign their entire website on Shopify Plus while maintaining their customer database and API functionality.
During the migration, I implemented a new art direction to fit Black Halo's new direct-to-consumer strategy and incorporated UX ecommerce improvements to streamline the shopping experience.
MY RESPONSIBILITIES
UX Design, UI Design
TOOLS USED
Sketch, Abstract, InVision, Google Analytics, Whimsical
Our Approach
1
Gather information through surveys, a competitive analysis and branding exercises to better understand Black Halo’s company 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.
Researched Black Halo competitors to help differentiate the brand with a new art direction
During a competitive analysis, I 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 benefited from end-to-end collaboration with development and client relations
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.
Utilizing Google Analytics to reshape the information architecture
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.
Dev/Designer collaboration to refine animations
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.
Tapping into Black Halo's customer service for added insights
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
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 elements. This ranged from type spacing and animations to filtering and page loading states. Involving developers early in the design process also helped me brainstorm possible solutions while gaining a better understanding of Shopify’s innate limitations.
FUTURE TESTING
I would love to test shopping behaviors within the navigation and product filtering. With Black Halo switching from a model of department stores to made-to-order direct to consumer, we had to make some assumptions for new users. We incorporated categories such as shopping by event, but if users know what they're looking for, another solution may be viable.
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, such as product tagging for filtering and uncompatiable third party APIs, before they could become an issue.
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