Marketing Strategy and Design to Fuel Emerging Brands

UXD Case Study 2

banner_uxui_1.jpg

APCON Website Redesign

INTRODUCTION | The APCON public-facing website was extremely outdated when I started with the company. It was the product of a conglomeration of input from marketing & engineering departments without any guidance for a user-centric experience.

My task was to completely redesign it from the ground up — from defining objectives to identifying critical users, mapping user flow, content plan, interactive and navigation strategies, SEO strategies, planning CMS for fast updates for non-programmers, visual design, delivery of assets and instructions to programmers, and management of the processes to bring the new site live.

ux_cs_bna.jpg

OBJECTIVES | Objectives for the newly-designed site came mostly from the CEO, some from the marketing & sales departments, and some from myself.

  • Update the look & feel to be more contemporary. But do not want to look like competitors, create a distinctive B2B brand style to reflect the company's unique qualities.

  • The new site should serve to increase prospect interaction and ultimately product sales.

  • Represent the company as a cornerstone of corporate communications — ie: blog, events, leadership, press releases, careers, new product releases, etc.


download.jpg

RESEARCH | Quantitative: I used Google Analytics to see what I could learn about site visitors and segment the traffic into categories to focus on the first company priority: prospects. I set up filters to filter out career hunters, company employees, and other non-critical traffic. Then I studied filtered traffic flow to see what content potential prospects visited and how long they stayed there.

 

Qualitative: I interviewed people representative of the prospects: IT Directors, and Network Engineers.

 

PROFILE | From the quantitative data and qualitative interviews, pertinent learnings started to take shape about our prospects.

1. They are overworked, stressed-out and they scorn "marketing fluff" on websites when they are after technical information.

2. They want specific technical data about the products as fast as they can get it — network diagrams, data sheets, technical briefs and product capability specifications.


IDEATION / DESIGN STRATEGIES | I wanted the highly-technical prospects to be able to drill down to detailed product information within one or two clicks from the home page & main top menu — this was accomplished in the Products section of the site. The Solutions section has content that is more benefit-oriented and "street level" friendly, aimed at prospect "influencers" who do not have a technical background but do have a voice in purchasing decisions.

WIREFRAME SKETCHES | A few concept sketches shown below.

 

PROTOTYPES | I built high-fidelity, interactive prototypes (using InVision) for stakeholder reviews and to test out several concepts and design options.


USER-CENTRIC STRATEGIES INCLUDE:

Rollover menus: Users can get a high concentration of technical detail by simply rolling over a compact menu system.

Relevant media served dynamically: users can access media (datasheets, videos, technical briefs...) that are pre-filtered to be relevant for the product they are browsing.

ux_apcon_1.png

Interactive diagrams: Users can get a fast, top-level understanding of product features by rolling over called-out areas on product images and diagrams.

ux_apcon2.png

Resources library: Any combination of subject matter & media type can be quickly located and explored with expanding menus & checkbox filters.

Contact menu and form under Resources invites conversations with prospects in the way they prefer (schedule demo, online chat, email, phone call).

ux_apcon_3.png

Solution story funnel: "Tell the solution story" on a single page — showing how hardware components and software work together for network security. Using rollover interactivity to help simplify a complex solution story. The rollover action is more efficient and cohesive for the user than scrolling up and down down through nine screen views to reveal the same content.  

inset_uxd_1.jpg

Mobile | The APCON products are business to business and are of considerable cost — therefore 100% of prospects do their shopping research on desktop monitors (confirmed by Analytics and interviews with sales team). However; we did create the site to be responsive and to have custom screens designed especially for phone experience. Use cases are prospects at a trade show or on the go who want quick information from the site, job seekers, sales engineers at a client site to look up specifications, and others.

inset_uxui_1a.jpg
banner_uxui_5.jpg

TESTING | I conducted user testing by sending out form surveys to a targeted audience to get input on navigation, content and design. We also conducted focus groups to get critical input. Results were collected and evaluated and some features were redesigned based on user input.

RESULTS | Besides the aesthetic improvements from the previous site, the new site has proven to enhance company revenue and facilitate the product sales process.

bar-graph-arrow-going-up-line-drawing-illustration-animation-with-transparent-background_bxg6isd-g_thumbnail-full08.png
  • 476% Increase in media downloads from prospects (a leading KPI for the site).

  • 300+% Increase in inbound Contact Us form leads.

  • 2X amount of prospect time spent on product pages which increased SEO position for key searches.

  • SEO improvement from 16th page position to 1st & 2nd page positions on key searches.