Hall of Fame Sports Memorabilia

Development Interface Design

The Challenge

Hall of Fame Sports Memorabilia (HOFSM) is an eCommerce business that came to us with the goal of increasing their direct sales and making their products available on more sales channels. Although they had an existing website, there was a lot left to be desired. It was ineffective at driving sales and most of their sales came from other e-commerce websites like Amazon, eBay, and more. HOFSM wanted a centralized platform that would allow them to manage all of their product inventory and easily publish to other e-commerce platforms. This new website would help attract more customers and further the sales of sports memorabilia.

Picture of before and after Hall of Fame Sports Memorabilia Website

Our Approach

We worked closely with the HOFSM team to make sure we understood exactly what they were looking for. The website had to allow users to create an account, log in, or checkout as a guest when they purchase products. The website had to include a listing of all products and offer a streamlined user experience. So we started by iterating on the website design and planning our strategy for the backend. To build a custom storefront for HOFSM, we decided to use Shopify’s storefront API. This powerful infrastructure allowed for multiple sales channels, secure inventory management, and simplified third-party integrations. Additionally, using Shopify allowed us to minimize development time which was cost-effective for HOFSM.

Products are automatically published to Amazon, eBay, Google, Facebook, Instagram and more!

Interface Design

Since HOFSM wanted a modern redesign of their website, our designer started by creating beautiful designs in Figma that drew attention to the products they offered. Our team, along with the feedback of HOFSM, would iterate and improve upon the design allowing for a seamless user experience for both mobile and desktop. Other than the logo and the general color scheme, we started creating everything from scratch and restructured the homepage to display trending products, new releases, and top categories. We also worked on the interface designs for other pages such as the login/register pages, contact page, and more. In addition, we created custom email templates for all actions a user could take on the website.

Picture of new HOFSM Website

Web Development

For the backend, we used the Shopify storefront API to build a fully custom website on one of the most powerful web frameworks called Nuxt.js. We started by building a complete suite of custom components, that included text boxes, buttons, and input fields with detailed validation informing users on what actions to take. Then, we meticulously worked on translating the designs to code and ensuring that the website was thoroughly search engine optimized (SEO). Nuxt.js allowed us to statically generate every page in the website which meant search engines could crawl the website and reference the content of the page instantly without executing any javascript. Every time a new product is created, we rebuild the website allowing search engines to rank each product and the site as a whole higher in the results. This makes it easy for new and existing customers to find the items they are looking for faster.  We also included a search option that allowed users to find products from anywhere on the website using the full-text search functionality. Finally, we included a customer service chat feature powered by tawk.to that allows HOFSM to interact with their users, helping them to resolve any questions or queries a customer may have in real-time.

"We have seen a 3x increase in direct sales on our new website!"
- Curt, Owner
Mockups of Hall of Fame Website that show responsiveness

Product Migration

The most complex issue we faced during this project was the product migration. HOFSM had about twenty thousand products listed on their old website, and our team needed to migrate every product and its details to Shopify with minimal downtime. We wrote a script that automatically fetched each product from Amazon and uploaded the product details to Shopify. Although this took a while to complete, we pulled off the massive migration with only one minute of downtime. Once the migration was complete we ran an additional script to assure all the products and inventory were up-to-date and reflected any sales that may have occurred during the initial migration. In the end, we pulled off the full migration with less than a minute of down time and customers were happily shopping at the new store.

Multi Sales Channel

Since HOFSM has thousands of products, they didn't want to have to list each product separately on their website and on other e-commerce platforms such as Amazon, eBay, and more. With the new website, HOFSM is able to automatically publish new products to their website and other e-commerce websites simultaneously. This was monumental for HOFSM as it streamlined their product deployment flow and saved them a lot of man-hours.

Filter feature from HOFSM shop page
Wishlist from HOFSM Website

Scope of Work

Web Development

Nuxt.js

UI Kit Creation

Responsive Design

Search Engine Optimization

Authentication

E-Commerce

Shopify Storefront API

Content Management System

Performance Monitoring

Interface Design

Component Library Design

Information Architecture

Content Strategy

Visual Design

Animation

Data Migration

Automation

Minimal Downtime

Over 20,000 products