WHEN BROOKLYN SLUGGERS approached us, they were excited about creating a website to promote their newly constructed sports facility in Red Hook. Initial meetings established three basic concerns the client was interested in resolving.
They wanted an online presence to coincide with the opening of their new sports center. They also needed a way for customers to easily reserve batting tunnels, fitness classes and baseball clinics. And finally, a branding strategy was fundamental to promoting their name and tying all their marketing efforts together.
Brooklyn Sluggers offers nearly a dozen services, such as: batting/pitching tunnel rentals, individualized training, fitness classes, and sports clinics. One of the goals was to create a site where customers could quickly and clearly view information about the client's services and be persuaded to reserve equipment rentals or sign up for classes.
Although the client already had a substantial customer base, newsletter sign-ups were key to acquiring new customers and eventually new customer conversions.
Creating brand recognition via a unique logo and color palette were critical to promoting their name through social media and identity design collaterals such as business cards, sports apparel and location signage.
Prior to opening a brick and mortar location, the client would hold classes at leased gyms or baseball fields. Customers would usually reserve classes by phone, text or email via their mobile devices. So it was clear that mobile-first design and functionality were a priority.
One of the questions we had to answer was how to arrange and present numerous services/products without confusing or overwhelming the user. We also needed to make information quickly and easily accessible on mobile and offer enough detail to prompt customer conversions.
“How Do You Arrange and Present Numerous Services and Products Without Confusing or Overwhelming the User ?”
Competitive auditing showed a saturation of personal/fitness training studios throughout the Brooklyn area. The exception to that were baseball facilities: none were found within a 6-mile radius! The client had a clear advantage in the batting/pitching tunnel market. This meant we needed to emphasize baseball over fitness, at least initially.
Analysis of the more successful competing baseball/fitness center websites revealed striking, energetic images, often with motivational text, clear pricing tables, and CTAs to sign up for classes or membership plans.
“Single Clicks to Quickly See Detailed Info and Calls-To-Action”
Based on discovery data, business needs, and user experience projections, we focused on the client’s unique baseball offerings and went with a predominately baseball-themed logo and design.
A mobile-first site was a priority so that customers could, for example, book a class or reserve a batting tunnel while on their way to the facility. Mobile-friendly features such as minimal clicking and continuous scroll for quick access to various services were important.
We opted for a single-tier hierarchy so customers could see detailed information and CTAs with just one click. The site needed to be responsive and multi-device optimized to comply with best practices and to provide a smooth, consistent, and intuitive user experience.
A sticky header—consisting of the logo, social sharing buttons, and a hamburger menu—
provided above-the-fold access to vital information at all times. We opted for a hamburger instead of a navigation bar because listing all the services would have cluttered the header. We also wanted to encourage scrolling, which requires less clicking and is quicker on mobile devices.
A mobile-friendly, long-scrolling “Feed Page” consists of bold, stacked, full-width image blocks. Each block represents a service (Category) and features a section title, tagline, and motivational sports quote overlay. A single click takes the user to a “Details Page”, providing more information and a CTA.
A Newsfeed at the top of the Feed Page announces upcoming clinics, classes and sports tips. A newsletter sign-up form appears on the Feed Page and all Details pages.
“Clear Pricing Tables for Each Service and Prominent CTA Buttons.”
A single-tier hierarchy gets the user quickly to the services offered via a Details Page, which consists of a full-width banner containing an image overlaid with a header title, a tagline, and a motivational sports quote.
Below that, is a detailed description of the service with a pricing table and a prominent CTA button.
The hamburger menu is part of the sticky header and is always visible. Clicking the hamburger triggers the flyout menu.
The logo is responsive and changes according to window size and device used. The transitions are smooth using CSS animation.
Desktop and laptop versions feature a full-sized logo. On tablets the logo is a bit smaller. The logo is further reduced in size and switches to a monogram (BK) version on mobile devices in portrait view.
The logo is also responsive on mouseover, indicating that it can be clicked. The color changes to gray and clicking takes the user to the home page (Feed Page).
The basic color palette is maroon, gold and silver. Gold indicates the object is "clickable" and is used in Feed Page headers, CTA buttons, and in the logo.
The header color (in this case, Fitness Training) changes to indicate whether a user is on the Feed Page or in a Details Page. The Feed Page header is gold across a transparent overlay. The image is slightly muted with a gray overlay. The Details Page header is white over a solid gray overlay.
Design ideas began as sketches done with pencil and paper. Based on competitive analysis, we knew we wanted bold images and text. I explored different layouts and variations of text and images.
Mobile Portrait View
I tried out single and two-column layouts, different logo, hamburger sizes, and header/footer navigation links.
I played around with a left and center-aligned logo, an image slider, navigation variations, social sharing icon placement, and split-image banners.
A sound structure creates a good foundation for the visual design. I mapped out the user experience journey via wireflows (hybrid sitemap/wireframes).
Wireframes took the sitemap to the next level adding detail to the user experience process. Because this project required a mobile-first approach with a simplified way for users to access all the services, we opted for a straightforward, two-tier hierarchy: a scrolling Feed Page which drills down to Details pages.
Rapid prototyping helped me identify user experience gaps, dead-ends and redundancies. It was a vital part of the iterative process and the dynamic workflow between client, designer and developer.
Here are some low-fi, portrait-view, mobile prototypes of Feed and Details Pages. The prototypes were accesable on a mobile device by test users and is both scrollable and clickable, simulating a realistic user experience.
The client was very pleased with the look, feel and functionality of the website. Post-launch testing showed an overwhelming positive response to the website design and user experience.
Since site launch, the client has received significant newsletter subscribers and sign-ups to their classes and sports clinics, resulting in customer conversions in the form of reservations for clinics, classes and equipment rentals.
“I would like to thank Mario for his imagination and creativity...”