Cayuga Strength and Conditioning Website Development

Course: INFO 2300 Intermediate Design and Programming for the Web
My Role: Web Programmer & Designer
Team Members: Grace Song, Paula Paddack, William Michel, David Ticzon
Our client is Tom Dilliplane of Cayuga Strength and Conditioning. Tom wants a website primarily to display content pertaining to the operation and accessibility of his business. He did not have a website before, so he asked us to construct a website that will help with business exposure.
Additionally, Tom specified three specific needs for the website:
- Display information about his gym operation and purpose
- Use website to promote his business
- Emphasize his business philosophy through the website
- Editing capabilities for admin (Tom)
- Ability for users to create appointments
Before we started our ideation process, we identified the target audience of Cayuga Strength and Conditioning’s website as “Hardcore” strength and conditioning enthusiasts. Tom pointed us in this direction, as these enthusiasts were primarily the consistent customers at his gym.
Ideation
Preliminary Sketches




Wireframes






Wireframe Evaluation
Following the creation of our wireframes, we used the GenderMag Method to evaluate the wireframes to reduce gender bias within our website design.
First, we selected a persona from a PDF list given for this project. We selected Patricia.

Patricia represents what we see as our primary audience based on her technological capabilities. However, because our website is for a strength and conditioning gym, it runs the risk of being bias towards males, and therefore Patricia will help us avoid that in our designs.
Our next step was performing a cognitive walkthrough using the GenderMag method all of our tasks. For each task, we identified the ideal set of actions we wanted the users to take when working through the tasks.
Based on our cognitive walkthrough, we were able to see that in order to reduce the possibility for gender bias on our website, it is extremely important to include feedback at every step of an action a user might need to take. This includes when submitting forms, creating an account, logging in, booking an appointment, etc. We also wanted to increase redundancy in order to prevent errors on the website. For example, before the cognitive walkthrough, we planned on our users checking the calendar for appointment availabilities and then filling out the appointment form with an available date. However, after running through the task, we realized it would be easier for the user if our appointments form also did not allow for booked appointments to be booked at all (instead of leaving it solely to the user to not book a booked time slot).
Final Website Layout and Design
Website created using: HTML, CSS, JavaScript, PHP, SQL
Access to website code: https://github.com/gs488
Home Page


About Us Page


Appointments Page

Reviews Page

Merchandise Page

Sign Up Page

After User Login
Appointments Page


Account Page

After Admin Login
About Us Page


Reviews Page


Merchandise Page

Account Page

When we finished coding up and designing the website, we conducted one last cognitive walkthrough using the GenderMag method for the same tasks we created for wireframe evaluations.
With the final product of the website, we found that there were no issues discovered with the design. The user was able to find what they need. We also had the walkthrough done by different people of different genders. Our design was inclusive to allow a diverse audience to be able to use our designs. Also, the user going through the cognitive walkthrough is given feedback about what they are doing. There are messages for both error and success to the user showing their action as accomplished. A user would be able to carryout using the tasks of this website without any major issues.
