Project 1

UX User Stories

The user will be a woman in Cardiff looking for a female only gym. This will be mobile first focus as most women who use the gym are in a younger age group of 18-44.

The new female gym website should allow women to sign up to receive updates of the gym opening, view packages, view amenities, view personal trainers, contact the gym, and find its location.

The user will be able to sign up to opening updates The user will be able to find the address and gym location via the map The user will be able to contact the gym The user will be able to view the amenities The user will be able to view the personal trainers The user will be able to view the page on any device The user will be able to navigate the site easily

User Strategy The user can expect to use this application on mobile, tablet, and desktop devices, easily and sign up with the least amount of steps.

Business Strategy This project was created to inform women in the Cardiff area of a female only gym which will be opening. It’s purpose it to inform the user on what the gym has to offer, sign up to updates, contact the gym and find it’s location.

Scope

The user will be able to view all the information necessary on the gym’s equipments, classes, and trainers. If the user is interested in joining the gym or getting further updates they can sign up to receive emails. The user will also have our contact tel and email to contact the gym if need be.

Structure

One page multi section giving all the information is an informative and linear flow leading to the main objective, the sign up. When first visiting the page you're greeted by our hero image, followed by the contained title (Ladies Fitness Cardiff), and a call to action button to sign up. This also include a standard header bar for the four sections; amenities, packages, personal trainers, and sign up. The header compacts down into a burger menu with lower media screens to prevent a chunky header. Below the hero image is the "A safe space for women to workout" section, this gives a brief description of the gym and it's future amenities. Amenities is the next section which currently lists the four main sections of the gym. Below shows our personal trainers cards which includes; their images, names, and speciality. Packages follows which outlines the prices, inclusion, followed by a call to action sign up button. THen the Cardiff Map for location and the sign up sheet. The sign upsheet requires all sections tobe filled out before submit button can be selected. Below then is my basic footer including links to the sections above, copyright, and a notice advising this is strictly for educational purposes only.

Skeleton

For the skeleton design I used Balsamiq Wireframes. This allowed me to plan and envision my mobile and desktop design before beginning to code.

Features

The landing page which is currently the only page will allow the user to scrol freely and find everything they need.

About:

Describes the gym's primary purpose with a brief overview of what it has to offer.

Amenities:

Four boxes outlining the different amenities with a brief description.

Personal Trainers:

Three cards which outlines the PT's images and names, along with their specialist field.

Packages:

Three cards which show the packages; bronze, silver, and gold. They also outline what's included in each package, pricing, and a sign up button.

Map / Sign up page:

A map of the area the gym will be located. Below is the sign up sheet which requires users to input their information to sign up for the newsletter, and tick the T&C box, before submitting.

Existing Features

Navbar collapses into a burger icon Smooth scrolling implemented to better user experiance Call to sign buttons throughout which lead to sign up form- sign up form currently not linked to any data stoage.

Feature to implement in the future

• data storage for the sign up for mailing form
• Ability to create an account and log in
• Further information to create a multipage website for each section, instead of a single scrolling page.
• Contact section which with have the business contact information, direct Google maps link which can direct to the location, and a box to fill any questions and be sent.

Technologies Used

• CSS3
• HTML 5
• Bootstrap v4.1.3
• Balsamiq for wireframes
• Google chrome developer tools to check changed before implementing and debugging
• W3schools for checking code

Testing

-for testing I used various device sizes of chrome dev tools including the responsive setting to allow for quick checks. The device sizes I checked on dev tools are as followed;

• iPhone X 375x812
• Galaxy pixel 411x731
• Galaxy pixel xl 411x823
• Surface duo 540x720
• Laptop 1366x767
• Desktop 1920x1080