Navyonline.com E-commerce Website Development and Video Production
Navyonline.com is the online storefront for the Naval Academy Business Services Division (NABSD) at the United States Naval Academy. While NABSD has two physical shops located on the Naval Academy grounds in Annapolis, MD, Navyonline.com allows them to extend their reach and get their products and message in front of more people. And their message is clear: 100% of all the shop’s proceeds go back to the midshipmen.
Key project features:
Developed in HubSpot
A HubDB-based product page with search bar, price filter, and sale selector
A HubDB-based Social Quick Links Page displaying recent social posts
Video editing and motion graphics for featured homepage video
The redesign of the online store had a 2-step approach, to ease the transition of the NABSD store from its aging e-commerce database to a fresh one. First, the shell of the website—the front-facing and more content-heavy pages that surrounded the e-commerce platform—needed to be redesigned with the new brand our creative team had crafted.
Step two was to set up the core of the site—the e-commerce shop where customers could select and purchase Navyonline merchandise—on an entirely new platform with a cleaner look that matched the redesigned shell I developed.
For the first phase of this redesign, I used the mockups provided by my team to develop a new homepage, the top-level store category pages, and templates for resource and landing pages.
I also created lower-level product pages, a place for a visitor to land when traveling from a higher-level page like “Women’s” to “Women’s Outerwear”. These pages are no longer in use, but for a time they served as a way for us to list available products before sending visitors off to the true e-commerce platform to purchase an individual item. Using HubDB, I was able to create a functioning search and price filter for each of the product pages, and I even built a way for account managers to set certain items on sale at a percentage of their choosing.
As part of a later marketing project, I edited and created motion graphics for a promotional video that was used on social media and featured below the hero image on the site’s homepage.
To see the full site and promotional video, visit Navyonline.com.
Homepage Layout and Promo Video: I enjoyed bringing the new branding into the development of the new site and particularly this homepage, where people can learn more about NABSD or jump right into shopping and supporting the Brigade of Midshipmen. Also shown here, below the hero image slider, is the promotional video I created. Both projects were a fun opportunity to bring the new Navyonline branding to life.
Website Design Progression: Aside from moving to a new e-commerce platform, the greatest change for Navyonline was the rebrand. With a whole new logo, color palette, and style for graphics and product shots, we had a great opportunity to showcase their new, fresh look and and tell more of the story that is Navyonline and the mission of NABSD.
Product Category Pages: Each top-level product page featured a customizable module which could display a current popular product and brief description. The pages also included quick links and large images to help visitors navigate to the apparel and products they sought.
Product Listings Page Template: Using HubDB to organize and update the products for each category, I created a listings page template that would display the corresponding product database, and I added a search bar, a price filter, and an additional module on each listings page that would allow account managers to add a sale price to that page’s items with the click of a button.