When looking into opportunities to improve the site, the homepage stood as the clear place to tackle. As a team, my producer and I broke down what each component of the homepage was and how we could fit in redesigning the home from top to bottom with our Outsmartly team among the busy workload of our day to day. Up above are chunks of my analysis of the original homepage and my notes. They would lend themselves to be our roadmap for the homepage redesign and testing.

Evergreen Hero Video

The best area for impact is the evergreen hero that sits at the top of the hero page as it is the first thing people see when they land on our homepage. For the longest time the original edit of the evergreen video had gone unchallenged and untested.

The Original Evergreen Hero

New Detailed Orientated Hero

The original evergreen video consisted of a super cut of various ads / video loops filmed by the BlendJet video team, the hypothesis was that by seeing a collection of assets clearly filmed across various locations, different times, with different models that the breath of work would instill a level of trust in new customers that BlendJet was a legitimate brand.

Through my own research and observations, I argued a counterpoint that the rapid cuts between scene to scene with no clear story with no consistency was visually distracting and did not give customers a sense of the brand nor the product. Which is why I proposed a clean, detailed orientated video that zoomed in on the product to help customers get a sense of the product while also being more inspirational.

Promotion Banner

One of the easiest and fastest areas of opportunity to improve was the promotion banners that we featured right underneath our evergreen video. The original banner style featured our logo faded and cut off with this off-brand blue to pink gradient that wasn’t used anywhere else. Visually from promotion to promotion it never changed, only the copy was updated before I started working with our principle designer to have a cadence of banners made for each new promo ahead of time.

The original promo banner had an off-brand light blue to pink gradient with the logo swirl enlarged and cut off. The banner’s background would not change between promotions making it difficult for customers to know when something new was being offered.

Thanks to my producer, the dev team and the designer under me we were able to update this section to be able to change the banner background so it could correspond with the promotion or holiday season.

Teach Moment

The biggest area of opportunity for a refresh is what we call our “teach moment”, it is where we teach a potential new customer about our flag ship product–BlendJet 2

Current redesigned Teach moment - Desktop

The original teach moment was a static image that featured a black BlendJet 2 with the feature set icons and text—the redesign improves on the layout of the typography and features the range of current BlendJet 2s in stock by switching between images. When a user interacts with the space the current image will become static allowing the user to look at the selected BlendJet longer—if they were to click on the CTA it would go to the corresponding product page. A user can also click through the thumbnails to view a particular BlendeJet 2.

New Releases | Accessories Call Out

In the original layout there wasn’t a particular space to bring attention to new releases, and we also had the opportunity to enhance how we display our accessories.

The original new release call out was only dedicated to the Disney collection which posed a problem as BlendJet released more licensed partnerships with other brands with background colors that are a visual mismatch. Meanwhile the accessories callout is visually lackluster. In its place is the new redesigned modular grid that gave us the flexibility to feature new releases in the biggest blocks, our selection of accessories in the smaller blocks and quotes. On the backend the new system allows for us to keep the space fresh based on what’s current or what needs to be featured.

JetPack Feature

The priority of redesigning the Jetpack section was to teach new customers what our flagship instant beverage line is and how it relates to BlendJet 2 from the homepage. Another improvement is that now on this section we go into the categories we offer.

Just like the other parts of the site the Jetpack feature is in a similar horizontal band with the product image on a background. We improved upon the layout by first giving the user a better understanding what Jetpack is through additional text and iconography. The design also improves on the user experience of seeing all the categories and being able to choose between them, in addition to improving the colors in this section.

Marketplace -> Shop Ingredients

Another big opportunity for a redesign effort is the former Marketplace section on the homepage. The director of our NPI process decided that Shop Ingredients was a clearer name for the page to help customers understand the purpose of this page and its offerings, as Art director I worked closely with him to ensure his goals were met with the redesign of this section and the landing page.

Original BlendJet Marketplace Feature - Desktop

Redesigned Shop Ingredients Feature - Desktop

The original Marketplace feature is visually similar to the other feature sections on the site which exacerbated the issue of monotonous look of the site. The new, redesigned and renamed section Shop Ingredients improves on functionality by showing the user the different categories offered on the Shop Ingredients page. The Shop Ingredients page section also has some text to help new customers the purpose of the page.

Final Result

The final result of all these efforts of redesigning the homepage component by component is a homepage that better showcases BlendJet and its range of offerings while also visually being more dynamic than the old layout.