Rhythm Spin RidersFebruary, 2010

What I Did:

Content Management System (CMS), E-Commerce, Linkpoint First Data payment gateway integration, PHP, MySQL, HTML, CSS, Graphic Design, Consulting

Update: Rhythm Spin Riders is now a multi location spin studio. Updates can be seen in the Rhythm Cycle project section.

Developed and designed website for Rhythm Spin Riders, a spin / fitness studio in Laguna Beach, California.

They needed a new website that would make it easier to manage their class schedule. Furthermore there was a need to automate daily tasks such as registering and paying for classes. With that in mind I programmed a website that made business operations smooth and pleasant.

Participants have enjoyed the ease of online registrations which has lead to greater profits.

If you are interested in seeing the calendar back end and how the administration control panel works, please review screenshots 2-28 in the Research & Development eCal section.

The website utilizes the following two modules: eCal and TOC which you can learn more about in my Research & Development section.

Home pageView Larger

Clean and easy navigation. Blocks to most prominent sections of the site. Ride Now! block has quick access to profile and classes.
About pageView Larger

Information about the studio along with a flash video about the business.
Contact pageView Larger

Contact information along with the geographical location displayed in a dynamic Google Map. The page also included a form to get driving directions to the studio.
Classes main pageView Larger

Schedule as viewed by a guest not yet logged in.
User login pageView Larger

Login page for users. There was also a place to retrieve a forgotten password.
User accountView Larger

My Account for a logged in user.
Home page after loginView Larger

After login the Ride Now! top right block became a My Account which displayed total rides/credits left and a link to buy more credits, when low, and a link to the user's My Account page.
Classes page after loginView Larger

Checkboxes and registration related info became visible in schedule after login.
Classes page with activity iconsView Larger

Schedule displayed informational icons with pop-up info for respective classes.
Registration step oneView Larger

User chooses classes by checking the events the user is interested to participating in.
Registration step twoView Larger

Confirmation page to ensure user signed up for the right classes.
Registration step threeView Larger

User was notified on the results of the registration. Notification email was also sent out.
Classes page after registrationView Larger

Schedule was updated according to previous registration. Icon and pop-up confirms registration. New icons were added for class cancellation along with option to add additional users.
Classes page after registration continuedView Larger

Pop-up clarifying action for new icons added after registration. In this example action for cancelling a class.
Classes page after registration continuedView Larger

Pop-up clarifying action for new icons added after registration. In this example action for adding an additional user.
Adding or updating Additional UsersView Larger

Error handling when user attempts to update additional riders. In this example user forgot to input a number.
Adding or updating Additional UsersView Larger

Error handling when user attempts to update additional riders. In this example user tried to add more additional riders than they had participation credits.
Adding or updating Additional UsersView Larger

Error handling when user attempts to update additional riders. In this example user tried to add more additional riders than allowed.
Adding or updating Additional UsersView Larger

User submitting a proper number of additional riders.
Additional Users SuccessView Larger

User is notified on the results of additional users form update. Notification email was also sent out.
Classes page after additional riders updateView Larger

When a user had successfully added additional riders to an event, the schedule was updated to reflect this. A representative number was displayed next to the additional riders icon.
Classes page after additional riders updateView Larger

The additional users icon was switched and the informational pop-up was also switched "Edit" mode rather than "Add" mode.
Removing additional ridersView Larger

Additional users can be removed by editing the number to zero.
Confirmation of additional riders removalView Larger

User was notified on the results of additional users form update. Notification email was also sent out.
Classes page after additional riders updateView Larger

After additional users successful form update, participation credits were refunded and user now has 3 credits. The subheading now displays: "You have 3 rides left."
Adding or updating Additional UsersView Larger

Adding one additional user.
Adding or updating Additional UsersView Larger

User was notified on the results of additional users form update. Notification email was also sent out."
Classes page after additional riders updateView Larger

After additional users successful form update, participation credits were deducted and user now has 2 credits. The subheading now displays: "You have 2 rides left."
Cancelling a class with additional riderView Larger

Form to cancel a class. Provides the user with confirmation of class name and time. Informs user about cancellation related issues.
Confirmation of class cancellationView Larger

User was notified on the results of class cancellation. Notification email was also sent out.
Classes page after class cancellationView Larger

After successful class cancellation, participation credits were refunded and user now has 4 credits (2 were refunded due the one additional rider). The subheading now displays: "You have 4 rides left."
Cancelling a class without additional ridersView Larger

Form to cancel a class. Provides the user with confirmation of class name and time. Informs user about cancellation related issues.
Confirmation of class cancellationView Larger

User was notified on the results of class cancellation. Notification email was also sent out.
Classes page after class cancellationView Larger

After successful class cancellation, participation credits were refunded and user now has 5 credits. The subheading now displays: "You have 5 rides left."
Add more rides pageView Larger

Form for users to add more participation credits (rides) to their account. Multiple payment options are available.
Add more rides page continuedView Larger

User could choose from various packs including single class. If user was logged in as super administrator, she/he could make an order for another user.
Add more rides page continuedView Larger

Credit Card payment page.
Classes page logged in as Administrator or Instructor/OrganizerView Larger

Browsing the schedule an administrator or instructor/organizer of their class could view participants.
Participants pageView Larger

Participants of a class were displayed in a grid according to the time they signed up. A plus (+) sign by the participants name indicated they were bringing a guest and signed up for Additional Riders.
Participants print optimized pageView Larger

Each participant got a checkbox that could be checked when user signed in to class. If the class did not reach max capacity by online registrations, there were room for walk-ins and space to sign.
Classes page after eventView Larger

Event icon was updated with new icon that reflected that user took part in class. Informational pop-up greeted and thanked the user.
Classes page displaying cancelled classView Larger

A cancelled class could inform the users an event was cancelled.
Classes page and icon legendsView Larger

Every class schedule page included a legend description at the bottom of the page. The legend were automatically updated with pertinent icons depending on user and classes.