The FitStop
A Milestone Project completed by Shell George for the Code Institute Diploma in Software Development.
Introduction: Mischale 'Shell' George
I have always wanted to learn how to code and my circumstances earlier this year led me to sign up to this course. I did this with the hopes of moving out my employment situation and to gain a better work-life balance.
This would be my very first project that I have completed, and I am submitting for my Milestone project for the Code Institute. The inspiration for this project was mildly influenced by the assessment guide and my love for fitness. Over the years I have found myself in various fitness environments and this project gives me the opportunity to develop a hypothetical gym where everyone is truly welcome.
View the deployed website here: The FitStop
Table of Contents
User Experience Design
Strategy
User Needs & Business Objectives:
Focus: The focus of this project was to make an informative and interactive design for the founder of the gym, Isla Carson. The founder wanted to ensure the website was inclusive, intuitive and simple to use.
Definition: The website was created so that the customers/users can stay up to date with the gym's events and training classes. The users would also be able to get a good first impression of the environment, the trainers and the coaches. Once they are able to have all the important information, they can choose to sign up and become a member of the gym.
Value: This website should entice customers to learn as much about the gym and the services as possible. Which in turn, would lead them to sign up for the membership. This allows the founder to increase her customer base and increase her revenue from this business.
Scope
Functional Specification:
This section is split up into two separate segments for the Owner and the User.
Owner Goals:
- Easily accessible site on any chosen device. (mobile and web versions)
- Key information on the landing page.
- Quick links that show prices and benefits of the different membership types.
- Pages to show the user what make this gym stand out from the others.
- Hassle-free sign up form for memberships.
User Goals:
First time user -
- Find out more information about the gym and its facilities
- Be able to see all the available classes and see if they cater for their level of abilities
- Be able to quickly access the social media links to see if other users have had a good experience.
- Find out the benefits of becoming member and weigh the pros & cons of being a single pass user or monthly paid member.
- Find out more information about the coaches and trainers that work at the gym.
Regular or returning user -
- Have access to an easily readable timetable for all the classes.
- Quick access to sign up link if they are a returning customer.
- Quickly access the social media links to follow the gym's activities and community events.
- Learn about the additional benefits of being a monthly paid member and the different membership tiers.
Structure
Interaction Design:
Developers that came before me have already set some of the common conventions that we see for web development. My intention was to ensure that this convention was followed so that the user found the website easy to navigate.
This was done by keeping the colors and theme consistent across all pages. The labels for each page were kept consistent so that the user would be able to easily move through the site without getting lost.
For example:
- The navigation bar on the website is laid out horizontally on the desktop version but on mobile I chose a vertical drop down. This was because many users would expect this usability as most websites have adopted a similar format. This makes the website intuitive to a new and returning user.
- The 'Sign-up' button will be designed to say 'Submitted' to show that the form has been completed. This gives the user visual feedback and confirmation that the action has been completed.
Information Architecture:
The information in each of the pages was laid out so that a user would be able to move through the different content with ease and learn information about the different services and facilities the gym offered.
Skeleton
The whole purpose of this website was to show users important information regarding the gym, the events and the membership prices. The aim is make the user feel like that can seamlessly move across the website, find the information that is relevant to them. Ensuring that this information is laid out intuitively will allow the user to have a positive experience.
I attempted to use progressive disclosure across each of the page so that it would entice the user to continue exploring through the website and interact with different elements. I also wanted to make sure that there were visual metaphors using representational icons that would allow the customer to link certain titles with every day images. Furthermore, I also aim to implement visual confirmation an action or task is completed on any of the forms or inquiry boxes. This would give the user a visual cue to confirm that their action has been processed by my website.
Wireframes
I used Balsamiq to create some wireframes. My understanding of wireframes it allows me as the developer; to create a mock-up of the website and give the Owner a visual representation of what the website will look like.
I have attached my First Draft as this was my initial vision for the website and after some research I decided to elaborate on my design which is shown below.
- Home - Desktop | Mobile
- About Us - Desktop | Mobile
- Prices & Schedules - Desktop | Mobile
- Meet the Team - Desktop | Mobile
Surface
Design
- Colour Scheme
The colour scheme was chosen from the website Coolors. Initially a shade of purple and two seperate shades of grey were chosen. However I ran into some issues where tej text couldn't be read very well. So decided to change this. This will be outlined in the Testing section.
- Typography
The Righteous and Montserrat font were the primary fonts used for the site. The fonts were sourced from Google Fonts.
- Images
All images for the website were downloaded from Pexels.
Font Awesome was also used for icons on the pages for styling purposes.
Features
- Content with text information to maximizing intuitive learning
- Images to compliment the content to minimize cognitive overload.
- Responsive design for various devices allowing visual balance.
- Interactive map for location information.
Technologies Used
- HTML5
- CSS
- BootStrap v 4.5.3
- JQuery
- JavaScript
- Git and GitHub
- Balsamiq
- Firefox Developer tools
Testing
A Test file was created to debug and fix some issues with code. Sometimes this didn't behave as I wanted it to, however it gave me a clean slate to work on without any distractions. The majority iof the test was done Mozilla firefox using the developer tools. I also used the Peer Code review Channel to get any additional tips.
Devices tested on:
- Galaxy S 20 Ultra
- iPhone 12/13 + Pro
- iPhone 12/13 Pro Max
- iPhone SE 2nd gen
- iPad
- Laptop with HiDPI screen
- iPhon 5/SE 1st Gen
W3c Validator was used to check my code and clear any errors with it. This site allowed me to see any stray and unclosed tags and remove them as needed.
Results:
Deployment
This project was developed on GitPod. Once this was done a repository was made in Github. This then allowed me to publish a live site for my project. I followed this guide to ensure that this was done correctly.
Credits
The following people helped me finish my project buy offering me advice and guidance
- Abi Harrison - Peer & lead
- Harry Dhillon - Peer
- Mo Shami - Mentor
- Suzy Bennett - Peer & Lead
- Yigit - Peer
- Matt Rudge - Code Institute
Additional Credits
- Stack Overflow
- Youtube
- GeeksforGeeks
- Tara Rhoesyn - Peer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
