Redesigning NewBlueFX


NewBlueFX is a product company building live and post video production solutions since 2002. Adam, Marketing Director, invited us to their Hillcrest office in San Diego to discuss and find solutions to underperformance issues in newly released products. He suspected a recent migration from Drupal to WordPress was causing problems. Adam’s intial proposal was to redesign and A/B test particular product pages. However, a brief website overview raised too many questions, so we proposed to get started with a heuristic analysis to explore potential problems and their scope.

newblue office
me at newblue

Understanding the environment

We have requested data on traffic sources and demographics, product performance, conversion paths, bounce/exit rates, as well as a number of other metrics. We met with product devs, support reps and a product manager to better understand functionality, products value communication and business aspects of the product. We wanted to understand whether the problem related to design, and if so, what was it scope. Some of the important findings were:

1. Released products are ‘average expectations’ products
The team had same budgets, made no significant functionality rehauls and used well-established marketing approaches for release products.

2. New product = updated design
The team implements from slight to moderate UI updates for every newly released product.

3. Exit rates are up
With the new design product page exit rates went up to ~10%; in particular for users traveling from homepage — the largest organic traffic entry point (umm the current design got a more complex multi-layer page structure).

4. Organic traffic conversion is down
Organic traffic conversion dropped by around 11%, while CR during promotions slightly improved or remained the same.

5. Large screens dominate
More than 80% of customers have a screen resolution of at least 1680x1050; the majority - 1920 (face the current design was optimized for @1200px wide screens, less than 5% of sales).

6. Promotions are vital
Up to 70% of product revenue is generated during promotion periods, whereas 50% of customers are new (umm current design was based on the notion that existing customers are the driving sales force).

Some of heuristic analysis findings

buttons Contrast issues,
poor CTA delivery
product-cards Poor product card
transitions flow Imagery not reinforcing
the message
elements Multiple sliders dissolve focus
and hurt info exposure
repeated use Duplication of elements
comparison Unusable data presentation
Navigation IA issu Navigation & IA issues
Navigation IA issu 2 Copywriting issues

With data we gathered during heuristic analysis, as well as data from Google Analytics and conversations with the team we made a hypothesis:

“Underperformance has little to do with new releases. It’s more the result of multiple usability, copywriting, content, layout and other issues”.

Processing findings

Fast results were of the essence for the top management. So we have extracted certain items with a big potential impact and low effort for fixing into a separate group.


We have managed to find 28 quite easily fixable issues having small to high potential impact on conversion. For xample: according to Google PageSpeed insights desktop score was as low as 34 out of 100. Boosting page load speed was an easy task though, as poor results were largely caused by:

a. Uncompressed images
b. Unused plugins and glitchy LiveChat plugin
c. No Gzip compression

Running ahead, should admit we improved PageSpeed results by up to 150% in less than 2 hours.


Hypotheses validation

Having the list of issues refined, we wanted to validate our assumptions and findings vs real user experiences. We launched a series of coupon code incentivized interviews with existing customers and new users. We picked up the page of an averagely performing product (Stylizers family) to accommodate an interview invitation popup.

interview copy

Running an interview with Stylizers 5 Ultimate user

Here are some of the high-level hypotheses/results:

1. Mutli-layered page structure is too confusing
  • Yes, 5 out of 5 interviewees ignored deeper page levels when asked to list features and new features in particular; existing users referred to their memory, not the interface, when asked what’s new in the product. All the interviewees ignored tutorials and additional materials.

2. Product features are very poorly communicated
  • Looks like they are: 4 out of 5 users failed to list the features the product includes; existing users mentioned they saw some of the new/existing features for the first time (despite their release months ago).

3. Product interface is far from being user friendly.
  • Nope. Suprisingly, the users were largely positive about product’s UI.

4. Product has a steep learning curve.
  • Not actually. 3 out of 5 interviewees mentioned they lacked introduction and had to rely on external sources when learning the product. I believe that could be effectively dealt with at a product level.

5. Telling the difference between products is a very complicated task.
  • Yes, 4 out of 5 users found it difficult to tell the difference between products in the same family. 3 out of 5 users failed to recognize the bundle in a product family.
Top keywords for describing individual and bundle product pages:
Busy Confusing Pointless Overwhelming
Modern Nice OK

Creating persona

A series of interviews in conjunction with Google Analytics data allowed us to create a persona to better plan and execute the changes.


Robert Shields


Age: 40
Occupation: freelance video editor, videographer and web producer
Residence: Sacramento, CA
Income: fluctuating, @70k per year
Personality: curious, busy, determined


+ Constantly looking for new work opportunities
+ Tries new software on a regular basis
+ Uses powerful hardware
+ Needs to work fast to keep up with the bulk production workflow


+ Drive more clients with higher budget while maintaining high quality of service.
+ Optimize and polish the workflow to the maximum extent possible.
+ Keeping the workflow ultimately comfortable.

UI work

With enough accumulated data we got into UI work. We updated the goal: instead of a focus on a few pages, we took a holistic approach — fixing higher level issues and creating reusable templates.

We analyzed every product family and noticed that almost the entire product mix followed the same patterns for data presentation. Moreover, marketing team had to heavily rely on full-stack devs to build new pages. At the same time, there were no strong arguments for producing different templates. So we pursued another opportunity to improve marketing workflow and cut down operational expenses on designs production.

pen and paper

The pen and paper stage

We had to keep the core components of design guidelines as a part of agreement. So our creativity was quite limited.

Production of a template required consistency throughout the entire website, so the first steps were aimed at improving coherence. So we:

1. Fixed product naming and grouping inconsistencies in All products and Homepage
2. Reduced the number of pages to 1 per product
3. Removed redundant product family landing pages

Old Way Image
New Way Image

4. Created a new category for All inclusive type of products (standalone products of this type were mixed with product categories).
5. Created a megamenu to replace a multi-layer dropdown menu

dropdown copy

The original drop-down menu

mega menu copy

Mega-menu: outlined product types, categorization and hierarchy

With the reworked navigation and IA, we cleared the way to building a unified template. We were ready to build and ship.

1. Reworked hero
1.1. Centered hero layout
1.2. Increased h1 font size from 42 to 55px
1.3. Limited line length to 75 characters for scanability
1.4. Limited the amount of text to 1 line to communicate product’s message to ‘visual’ people like Robert, our persona, more effectively
1.5. Added solid fill buttons for better contrast
1.6. Added a text indicating product place in the family (individual/bundle)
1.7. Added background video instead of static image and video CTA. During the interviews the majority was unable to clearly define product functionality. At the same time production of explanatory videos was included in product budgets. Adding videos is expected to better introduce products to visual people.

single page

Product page hero

2. Reworked secondary navigation
2.1. Merged Education & Volume Discounts into 1 page experience (both forms have almost the same sets of fields).
2.2. Added CTA ‘Buy X - Save $Y’ link for non-bundle products
2.3. Made Overview and All features anchor Links that take users to the relevant areas of the page instead of new pages.
2.4. Free Trial - added a download icon to make it stand out from the menu items, yet not give extra accent.
2.5. Secondary navigation pulls up Add to Cart button as user scrolls down from page hero

secondary nav

3. Reworked compatibility
3.1. Heavily reduced the number of items in System requirements (mostly obsolete items like Windows XP, and etc.).
3.2. Removed system requirements from the bottom of the page
3.3. Merged Requirements & Compatibility into 1 lightbox
3.3.1 Updated visual structure for better scanability
3.3.2 Added a CTA button to lightbox


4. Reworked feature presentation
4.1. Added NEW labels for new features instead of a separate page (interviewees mostly failed to name/discover new features)
4.2. Pulled new features to the top to better cater to upgrading users
4.3. Proposed using before/after layouts for the fastest and cheapest feature communication
4.4. Reworked copies to include CTA descriptions
4.5. Added the amount of templates included in each feature (crucial for Robert’s fast workflow).


5. Added all features
Created the section to view all the available features at a glance, accessible from fixed secondary navigation.

all tools

6. Removed tutorials and blog posts
Got rid of mostly SEO-oriented content (oftentimes not even relevant at all) and mostly non-relevant tutorials.

7. Redesigned secondary CTA to make it more prominent.
In various products the secondary CTA block performed up to 37% better than its predecessor.

2nd cta

These and some significant steps completed the work on a template for a single product. White space, checkerbox layout and blocky structure left a ton of space for almost any maneuvers and further A/B tests. This modular layout laid a foundation for assembling bundle products (the ones comprised of single products). So in bundle product template we have:

1. Transformed each feature block into a product block.
1.1. Preserved NEW labels to emphasize what’s new in bundles.
1.2. Watch video - opens an existing explanatory video in a lightbox.
1.3. Go to Product Page - link to the single product page.

product in bundle

2. All products - ‘filter by product’ to improve the discoverability of features on different product levels.

all bundle features

Designs validation

We have built a dynamic prototype in Webflow to see how the templates perform. The results were largely positive — with many of the issues we addressed to in the new designs users were more comfortable and confident with discovering and finding information.

Metrics Image

Web development

Our web devs transformed our design ideas into code and updated the entire website. We have been working in a test environment, gradually uploading the ready components. We have used the same platform, did our best to preserve the original structure and made sure none of the 3rd party solutions were broken. Newblue got clean, well documented code that is really easy to play with.

Wrapping up

We have managed to increase the company’s revenue during the promo periods by 12%. We have managed to rehaul the entire product mix UI (25 products) and eliminate all the issues with the budget allocated for just 1 product family (5 products). We have decreased the marketing team’s operational expenses on design and provided the versatile, easy to assemble UI solution. And finally…

Conversion rates went

4 — 47% up

Let us help you create amazing things.

Get in touch