Transforming NAED: The UX Strategy

<< View Part 1: The Discovery Process

+Problem

NAED.org had not been maintained properly for over 7 years due to employee turnover, no UX, web design or content marketing capabilities, lack of cohesive direction and product managers managing each section’s content and design separately causing the overall website’s appearance and user experience to be very frustrating and confusing.

The website was originally built to serve 3 different audiences but due to budget constraints certain sections suffered and their user journeys to purchase products had to be retrofitted into poor usability solutions based on functionality catered towards event purchases. The website became a source of contention internally and externally as most members struggled to find resources or information. The website was also not mobile-responsive or mobile friendly. With all of these problems the best solution was to audit the content, migrate the necessary information and start over.

The UX strategy focused primarily on these problems:

  • UX architecture for all domains and decoupled platforms to appear more cohesive
  • A new design aesthetic that gently transitioned away from the old, dysfunctional website and dated brand while slowly transitioning into better usability and modern aesthetic.
  • Mobile-responsiveness and mobile UX considerations
  • The education section needed to offer content for users researching and comparing different products
  • The education section needed “purchase” buttons next to each product
  • Each section landing page needed to highlight resources and offer some taxonomy for content types
  • Multiple audiences using the website for different needs and functions
  • Repurposing existing media and resources that were in-demand but hard to find
  • Homepage automation for calendar updates and new content to surface automatically reducing manual edits
  • Simplified product purchases, resource download and registration user journeys

WHEW šŸ˜‰



+ Proposed Wireframes and SolutionsĀ 

Option 1: These were proposed for reskinning the education section utilizing
the existing RiSE iMIS CMS templates.

Option 2: These were proposed for a new website design in Hubspot CMS

 

+Lead Page for Ad Traffic and Data Analysiswireframesdraftlandingpage_v1



+Final Website Before & After

Homepage: Beforenaed-home-before

The new homepage focused on a more impactful, emotional video to increase search rank while also representing the expansiveness of the industry, an immediate call-to-action to join, highlight tiles that focused on timely events and product promotions, a featured blog post and automated calendar updates with an option to add the events calendar to your device. The original NAED brand red was used as a top-level navigation bar to sync the same menu style across all disconnected/decoupled platforms (forum, LMS, eStore and Account).

Homepage: After

NAED-UX-Header

NAED-Home-New

 

Section Landing Pages: Before

education-landing-page.png

about-landing-page

This layout was chosen to give search engines and users more information about each product offering, browsing options to view all products for comparison and also offered new sorting options to view based on different audience needs and criteria.

Section Landing Pages: After

NAED-education-New

event-page

 

Product Overview and Individual Pages: Before

screencapture-naed-org-naed-education-epec-aspx-1510770831432

education-overview

The separate registration form and disconnected eStore purchase/registration experience were both part of a larger platform and eStore project scheduled for a later phase. This new layout allowed the user to conduct research, learn more about the course and then take action to register and purchase from the same page.

Product Overview and Individual Pages: After

product-new

new-content

 

Event Page: Before

event-page-before

Event Page: After

event-new

 

New Content and Repurposed Media Pages

media-galleriesNAED-Video-Gallery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s