Bumble and bumble Site DesignInterface, interaction and visual design for haircare company Bumble and bumble – bumbleandbumble.com
For over ten years (2008-2020) I was a key member (contract) of the award-winning in-house digital design team. During that time I designed for the ecommerce website through two complete site redesigns and numerous updates, including: product family and individual pages for the current site; interface designs for the first mobile site; a redesign of the highly trafficked Look Book page; a photo live chat functionality update; website states for a loyalty program; improvements to the checkout flow; regularly occurring features and launches; a system for the Bb.U (Bumble and bumble University) education site; and more.
Bumble and bumble maintains a rich consumer site that offers products for sale, info on product lines, editorially-driven features, a brand story, salon information and appointments, How-To recipes and videos, and more. Additionally, with a separate login, a parallel network site offers an alternate view and functionality tailored to the needs of network salons and professionals participating in education and networking programs.
Bumble and bumble site redesign
Bumble and bumble transitioned to the Estée Lauder-supported CMS Drupal and had the opportunity to update layouts, image sizes and customer flows. I worked on some layouts for product family (Bb.Thickening) and single product pages. I also spec-ed out the protocol for our new product images across the site, including rules for how different product shapes and sizes appear in relation to one another.
Bumble and bumble Features and Launches
I would regularly design pages for features and product launches. Here are pages from the biannual New York Fashion Week (F/W 2019) feature that highlighted behind-the-scenes creation of looks by our stylists and “Get the Look” lineups of products used.
Click slideshow to see more screens.
Bb.U Course Catalog
Bumble and bumble.University trained stylists in signature Bumble and bumble styling techniques and strategies for running a salon. I designed these pages that allowed users to select and browse courses through a tabbed system (Craft, Commerce, Culture) and created images for each of the course headers.
Click slideshow to see more screens.
Bumble and bumble photo upload feature
When we had the opportunity to add a photo upload feature to the member profile that would allow you to get personal advice from a live agent I designed the member area of the site to accommodate this interaction. At the time our site heavily used hand-drawn elements (to reflect the craft of hairdressing and the uniqueness of everyone’s hair), so I incorporated illustrations into this section.
Click slideshow to see more screens.
Bumble and bumble mobile site
When Bumble and bumble created its first ever mobile site, I designed many screens and interactive elements. The site used hand-crafted elements, so the challenge was was to maintain the hand-crafted look and feel while enabling the richness of features on our desktop site (Get-the-Look galleries, How-To videos, reviews, style recipes, etc.) with contemporary interactions (accordions) on a small screen.
Click slideshow to see more screens.
