Tech B2B UX Revisions

This is was a great project to showcase the end-to-end process for bulk process, product, technical, and community pages for a robust website with a quick timeline turnaround. Ideation was done in Figjam, final assets built in Figma.

The overall goal was to make high-traffic pages more concise in narrative, simplify the look and feel to align to the current branding and showcase media and callouts.

ROLE
Lead UX/Visual Design, Art Direction, Design

CREDITS
Neo4j team members, Web team developers Paul Dessert and Anthony Walker

Old Hero Banners

Audit of page heroes across the website. Some had branding from many years prior, others had animation or arbitrary shapes and images.

Opportunity to use this area to showcase products, orient users and give cohesion to the brand.

Old Body Modules

Opportunities for layout & design where to extend our narrative goals, use more visuals and treat it as as a story vs. stand alone sections.

We also wanted to standardize the types of copy needed (overline, headline, subtitle, images, etc).

Old Banners & Call-outs

Opportunities to understand resources that should be prioritized, i.e. case studies, customer stories, white papers, guides, docs, videos. Also to learn where the sources of traffic comes from.

We also wanted to extend our goals, for ex: amplify our use of quotes and testimonials for social proof.

Also important: remove Youtube, Vimeo and other brands UI from our video modules in place for our own branding.

Component Examples

Our internal developers build each page from a series of Wordpress modules.

The modules themselves act as a template for content strategy to write to and make it easy for stakeholders to own and update the CMS.

Opportunities included expanding the library of components so they had more variability and iterations.

Updated Hero Banners

The suite of updated Homepage and Internal page heroes. Focus on: concept justification, depth of space, consistency in color and elements (such as line work, showing connections to nodes, image treatment), featuring product imagery and product logos.

Updated Body Modules

Samples of updated Body Modules. Focus on: scannable copy, heiarchy, integrated branding and a good page flow, making technical diagrams and imagery relative and digestable to users of any level, as well as simplifying the creative on pages that have high utility so the messaging can shine.

Updated Banners & Call-outs

Samples of Banners & Call-outs. Focus on: standardizing behavior, replacing other brands' UI for overlay video module, prioritizing resources, giving more context to call-to-actions (CTAs), driving and teasing traffic to other high level pages on the site.

Using Format