SC07 Booking System
Project not available
Table of Contents
Details
- Date Completed:12 December 2006
- Days/hours spent:6 days, 2 hours
- About the company:Fitness Professionals
- Software used:Photoshop CS, TextMate
- Tag:CSS, Javascript, XHTML
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
Designed as well as applied my JavaScript skills to this website as FitPro's Web Designer.
1. Introduction
FitPro has a Spring Convention based in Loughborough. It has a range of sessions consisting of lectures, master classes for freestyle fitness, personal training, children's fitness, etc.
"The event programme allows delegates to cross between disciplines and experience presentations from a more diverse range of presenters, on a wider scale then ever before. The FitPro Spring Convention therefore caters for today's multifaceted fitness professionals, without compromising the content and high standard that each of the individual events has attained over the years."
2. Design
The objectives were to design something clean and simple which the users would find useful. These objectives were limited to the HTML already created by the developers. Design concepts were then based on these HTML pages. We also decided to stretch the layout to fit a minimum of 1024x768 screen resolution as only 10% of people visiting our site were using 800x600 and the fact that we had to fit a lot of information the extra real estate would help.
3. Wireframes
I thought it would be a good idea to start by creating some wireframe layouts, to show where the different page elements should be.
Select a day(s)
I was trying to keep a consistent and simple layout, by having the breadcrumb trail, menu, shopping basket in their own private spaces. These private spaces would not change till the shopping process was complete.
A wireframe layout of the select days page
Session selection
As the FitPro Spring Convention was spread across three days, it was important make sure users knew what day they were on and the time. Therefore, i made this a bigger feature just below the breadcrumb trail. An action panel was added to the bottom, were all actions concerning the shopping process were placed. I was trying to make use of the now more accepted method of form submission. So, for every action there is a reaction. Add to basket or Skip Timeslot this ensured a logical approach.
A wireframe layout of the session selection page
Confirm order
Now for the confirmation order page, there was no need for the shopping basket as the information was transferred over to the left-hand column. Freeing up the right-hand column to add the action panel there instead. Each of the days would the information that the user only needed. One mistake I notice with booking process is that website's tend to want to add loads of data into the shopping process. There is a fine edge between what to show and what not to show... I think it was has been archived quite well in this layout.
A wireframe layout of the confirmation order page
Payment
Keeping the same information from the last page but removing the edit option, as the user has confirmed this order. The action panel was moved down and information about the user and their order was added to top.
A wireframe layout of the confirmation order page
4. XHTML & CSS
Table into table-less
I had to rewrite the table-formatted HTML into table-less XHTML (using CSS for styling purposes). Yet the more important was that I need to make sure that data was kept inside tables but the layout was done with div tags. From an accessibility point of view, tables needed summary attributes, table data/headers needed scopes and titles were possible. This way the session data presented to the user would be readable by screen readers.
I used access keys in the top and footer menus for easy access to these options.
CSS
Using my new found method of splitting CSS files (into logical selections) I applied the logic here. I also noticed that using the V-model speeded-up and made it easier to fix any IE bugs with minimal of time spent. What would of taken up to 5 days was reduced to 3 days (as the level of skills rises), which is an increase of over 40% with no quality lost.
5. JavaScript
We need tooltips to come up when a user hovered over a session so that they could find out more information about it. Using jQuery and modified version of iTooltips (interface plugin). I managed to get the HTML from a hidden div and apply that to an absolute positioned div which followed the movements of the mouse.