Class, Measurement, and Client Enrollment Management

Task: The client needed a way to create fitness classes and enroll members to the classes. Each class will have its unique list of measurements. The members that enrolled in the class will be measured before and after the class for the same measurements listed under that class. Each measurement contains name and unit two attributes. These measurements will be displayed in the members Progress panel when they log in.

Click & Edit Updating

From adding new program to changing program content, the client will able to update all information by click and edit. No separate page. No confusion. The detail button after each class will load all information about that class on the same page through AJAX/JSON. All information will be autosaved. No spending 30 minutes filling out huge form and accidentally hit back button.

Clean. Simple. Professional. Delivered.

The Accounting Student Association is the biggest student organization in the Eli Broad Business College of Michigan State University. With over 150 active members attending around 10 meetings per semester, the organization need a clean, professional looking, and highly functional website. As a member of the executive board, I designed and programed the website from scratch.

As the business nature of the organization, the design was focused on simple, clean, and informative. White space, gradient, and multi-column was used to achieve the goal. The site is powered by LAMP.  960 grid system for CSS was used for clean markup. SQL query such as table joint was used to solve some of the business logic.

After maintaining and communicating about the website for two years, I was very honored to received the Outstanding Member of the Year award. Only one person of the organization is award every year and is presented by the MSU accounting department.

Informative Home Page

The home page is a quick capture of all the latest contents of the site. It keeps the members up to date as well as provides a quick access to individual section with full and older information and documents. The three closest events that are later then the current date is automatically picked and summarized on the left. Viewers can also apply, downloading meeting documents, and R.S.V.P certain events.

Content Organization and Highlights

The rest of the site categories its content and presents its information in a chronological ordered list for easy navigation. Here are some of the highlights from each section:

Events

Under the Events tab, a colored tag is added by the site to separate passed and upcoming events so it maintains the chronological order of the entire semester's events as well as inform the upcoming events. PHP date & time function was used.

Pop-up Event R.S.V.P

R.S.V.P events can be registered through a pop-up event on the homepage. The red ticker update the number of people that have signed up in real-time.

Officer Biography

E-board members are able to update their own bio on the back end. Positions can be picked through the drop down menu. Once the position is picked, the sequence on the front end will be displayed according to the predefined SQL table through a table joint.

Photo

A javascript gallery plugin was used for displaying pictures.

Downloads

Presentation and minutes download.

One-stop-shop home page.

Contains all the most recent information of the organization.

Clean form design.

Prospect members can register online and pay membership due through Paypal. All information were saved into database, which saved all the paper application and the hassles. Relevant information were grouped together for easy input. Drop down and checkbox was utilized as well.

Awards and the about page.

Events List

that come with a back end to edit it.