Web Development

Beginning in Spring of 2014, I took over development and management of AdvancedElements.com utilizing Dreamweaver as the content creation platform. From the start, my goals were to improve user experience by streamlining navigation and informational pathways, improve the overall look of the site, and optimize SEO. Of these goals, SEO was found to be in dire need of a complete overhaul to modern standards.

2013, A starting point

Looking to improve upon a clean design and layout, a number of items were addressed across the site. One of the most crucial was the user's experience when looking for or navigating towards various products on the website. One particular issue was the way in which a visitor would learn about each of the kayak models. The current structure left the visitor to determine which was best for their use and/or type of paddling without being provided with sufficient categorization of each model. While the navigation towards each kayak model was efficient, providing 2-3 clicks to get to a particular kayak product page, this streamlined process left customers uncertain of exactly which model would best suit their needs.

2013 AE Homepage
2013 AE Homepage

In 2013, the homepage had a head navigation bar to help direct visitors towards various areas of the site. "Products" was the primary link to view all product categories. Below the main hero image, there were 4 shortcut rollovers to help visitors get to more specific areas like "Choosing Your Kayak" where they could learn more specifically about the various kayak models.

press to zoom
Products Page
Products Page

From the Products Page, a user could then navigate into whichever product category they were interested in.

press to zoom
Kayak Product Page
Kayak Product Page

Once a kayak model was chosen, from either the "Choosing" page or the "Kayaks" page, the user would land on the corresponding product page. On this page, there were subsets of navigation to enable the user to navigate through models within the same kayak line, or navigate towards other kayak models.

press to zoom
2013 AE Homepage
2013 AE Homepage

In 2013, the homepage had a head navigation bar to help direct visitors towards various areas of the site. "Products" was the primary link to view all product categories. Below the main hero image, there were 4 shortcut rollovers to help visitors get to more specific areas like "Choosing Your Kayak" where they could learn more specifically about the various kayak models.

press to zoom
1/5

2014, Across the board upgrade

As mentioned before, the desire was to maintain the clean look and overall functionality of the existing site but to also have a number of items addressed across the site. Most notably, the kayaks were grouped into specific use categories in order to help visitors ascertain which kayak models would be best to review for their paddling types and needs. This change resulted in an additional navigational click-through, but was worth the investment for better user experience and understanding of the product. Additionally, SEO and page speed was addressed across the site and updated to current standards.

2014 AE Homepage
2014 AE Homepage

Primary navigation was kept intact on the homepage while imagery and social icons were updated/improved.

press to zoom
Products Page
Products Page

Navigation to the products page remained the same as in 2013 but, after review of the site on tablets and phones, it was found that the black & white rollovers were less engaging because rollovers did not really have much effect on a tablet or phone unless tapped. The resulting solution was to change the buttons to full color with a color change in the text if the button was rolled over on desktop.

press to zoom
Kayak Product Page
Kayak Product Page

The kayak product pages were updated in a number of ways to not only feature the product better, but also deliver necessary product information up front such as use type and product specs. The sub-navigation was also updated to provide navigation through all models within that kayak's specific use category.

press to zoom
2014 AE Homepage
2014 AE Homepage

Primary navigation was kept intact on the homepage while imagery and social icons were updated/improved.

press to zoom
1/5

2017, A move into responsive design

2015 and 2016 yielded updates to imagery, product additions, and continued improvements to user experience, page speed and SEO but, with Google's transition to prioritizing responsive sites in rankings, it became necessary to overhaul the entire site. After reviewing workload, software limitations, and overall needs, it was decided to contract with a web developer to produce a responsive site. During this transition, I worked one-on-one with the web developer, overseeing art direction as well as providing all necessary site content such as body copy and digital assets.

Since publication, I have managed and edited the new site through a content management system and worked with the developer to continually maintain and update SEO in line with current standards.

 

To see the site in its entirety, visit:

www.advancedelements.com

2017 AE Homepage
2017 AE Homepage

A fresh look given to a familiar design. When re-designing the AE website, efforts were taken to maintain the look of the currently running website in order to maintain branding and familiarity with consumers but, at the same time, to modernize it.

press to zoom
2017, A shift to responsive.
2017, A shift to responsive.

press to zoom
Kayak Product Page
Kayak Product Page

press to zoom
2017 AE Homepage
2017 AE Homepage

A fresh look given to a familiar design. When re-designing the AE website, efforts were taken to maintain the look of the currently running website in order to maintain branding and familiarity with consumers but, at the same time, to modernize it.

press to zoom
1/5