Overview

JC Sports is a custom apparel company that has been serving the Chicagoland area for over 25 years. Specializing in custom imprinted active wear and sports apparel, JC Sports provides high end garments to schools, businesses, teams, and individuals.

I was hired by JC Sports to design and develop a brand new website, and establish a platform that could host a future eCommerce store. Working on a tight schedule, I took the project through wireframe layouts and UI/UX explorations to ultimately deliver a visually engaging, and fully responsive website.

jcsportshirts.com
jcsports_browser_home

Early in the project, Ruth Sullivan, owner of JC Sports, set the main purpose of the site as a platform that would brief customers on all areas of the business. From services and best selling items, to company history and testimonials, Ruth wanted the full scope of her operations brought online for both prospective and existing customers to navigate. With a wealth of content that needed to be presented, it was important to construct a display that wouldn't overwhelm users. Accomplishing this was a process, and working through a number of page iterations I ultimately decided on a segmented homepage built around quick introductions to each section of the site. Minimizing the user's initial exposure to information, prominent calls to action work to direct visitors towards featured areas of the site for further engagement.

An important feature that Ruth wanted to include in the site's design was that of a compact way for customers to view the company's location and contact details. Rather than just display this information in plain text, we envisioned a map with a custom overlay that would both house the contact details, and point to the JC Sports office location, however, building this feature presented a unique challenge. Where a default Google Map is colorized, and offers a marker represented by a pin, our idea called for a grayscale map, and a specially designed 'Get in Touch' box. To accomplish this, I worked with the Google Maps API to generate a stylized map and a function that creates our overlay and places it over the JC Sports office.

jcsportshirts.com/faqs
jcsports_browser_faqs-1170x1519
jcsportshirts.com/about/testimonials
jcsports_browser_testimonials

The testimonials page was a particularly fun section of the site to build. Using an array of custom fields, Ruth is able to conveniently load feedback from her customers, and these testimonials are automatically styled and populated on the page. As JC Sports has received such positive feedback, I felt it was important to highlight these commendations and feature them on the homepage of the site to demonstrate the value that JC Sports can offer to prospective customers. To achieve this, I built a text based slider that ties into the testimonials page and automatically pulls the latest uploads.

jcsportshirts.com/lookbook
jcsports_browser_lookbook

Design in the Browser

Working on a tight deadline, the majority of this site was designed in the browser. The desktop design was created in Photoshop while wireframes served as guidance for the responsive design which was fully developed in the browser. This approach made it possible for me to complete the site's design and development in only two weeks.

  • jcsports_mobile_catalogs
  • jcsports_mobile_contact