HHBCNY Site Design

UI    •    Development    •    Responsive

Project Overview

Company

His and Hers Bootcamp

Industry

Fitness

Year

2018

Role

Art Direction/UI Design/Development

The client, His and Hers bootcamp (HHBCNYC), was a startup business with very limited web presence.  The goal was to create a site that not only served as a marketing tool, but also allowed for better class and member management.  Prior to site launch, most transition and payments were done in person, and there was no system in place to control class capacity and signups. 

UX Tasks I Completed: User Interviews, Feature Analysis, Prototyping, Commerce Experience
UI Tasks I Completed: High Fidelity Mocks, Asset Library, QA

My Role and Process

I handled this project from beginning to end, not only designing and creating the front end experience (Parallax and responsive) , but also creating a back end system which handled class sign ups, member management, payments and updates.  I conducted User Testing and Review, created quick low-fi mocks and analyzed competitors.    The client was given the ability to set class sizes, add/delete events, build out member profiles, provide discounts and  coupons, and most importantly make content updates without the need for additional development services.  the outcome was an easy to use and very popular tool which quickly helped grow the business.  At last check-in, classes were sold out weeks to months in advance and the ability to manage funds had allowed the client to focus more on the core goals of the business.

Frontend/Backend Sections & Functionaility

Full height/Width slider on page load.  Content can be easily edited from the backend.  custom video background autoplays on load.

Class Preview Slider allows for quickly editing and featuring upcoming events/classes.

Custom Calendar widget for quick and easy class signup.  Also allows for users to create accounts to make future signups even quicker.

Class list example.

Media section/Social.

Backend Dashboard snapshot.  Clint can edit/Add classes, change content and manage signups/users.

Frontend/Backend Sections & Functionaility

Full height/Width slider on page load.  Content can be easily edited from the backend.  custom video background autoplays on load.

Class Preview Slider allows for quickly editing and featuring upcoming events/classes.

Custom Calendar widget for quick and easy class signup.  Also allows for users to create accounts to make future signups even quicker.

Class list example.

Media section/Social.

Backend Dashboard snapshot.  Clint can edit/Add classes, change content and manage signups/users.

Share This Work