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:

  1. Display information about his gym operation and purpose

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.

Cornell ’19 | Cornell Computing and Information Science ‘20