UX, UI, CRO
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.
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 ( 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 ( 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 ( current design was based on the notion that existing customers are the driving sales force).
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”.
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.
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.
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
A series of interviews in conjunction with Google Analytics data allowed us to create a persona to better plan and execute the changes.
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.
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.
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
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
The original drop-down menu
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.
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
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.
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.
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.
2. All products - ‘filter by product’ to improve the discoverability of features on different product levels.
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.
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.
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…