User Centric Frontend Web Development Project Submission
View the project live: here
View the Github repo: here
To increase the number of bookings
Prior to website creation, the primary method of booking was by phoning the number listed on social media.To provide key information all in one location
Until now, all information regarding location, phone number etc. was kept on directory websites like Tripadvisor/Yelp.To be able to control the branding of the business
The business can select which photos are to be seen by potential customers as opposed to user-submitted photos on social media.The project is for a fictional cattery business based in South West England. The website serves multiple purposes:
- Attract new customers by discovering the website via Google searches, review websites or social media.
- Facilitate customers making a booking request for a stay for their cat.
- Provide some background information on both the owners and the cattery.
- Exhibit multiple photos that convey what the cattery is like before a customer decide to book.
- Allow customers to contact the business for additional questions before they decide to book.
- Immersive photographic experience, allowing the photos to be a primary source of colour to the overall site design.
- Every photo is high resolution.
- Every photo is linked so the viewer can see it full-size.
- Booking form located at the top so it is immediately available upon arival.
- Booking form location and structure changes depending on the breakpoint for a better mobile experience.
- Navigation designed for both desktop and mobile experiences.
- When in mobile view, the navbar is fixed at the top for easy access.
- When in mobile view, a 'book' nav item appears for easy booking.
- Smooth-scrolling enabled (browser-compatability limited)
- Responsive 2 column grid detailing pricing and terms that stacks vertically when resized to a smaller screen size.
- Responsive grid of publications the cattery has been featured in to provide a sense of legitimacy and popularity to the business.
- Selected testimonial with link to source for customer verification
- Descriptive 'About' section with accompanying photographs showcasing the incredible surrounding garden.
- Photos in about section turn into a carousel for a better mobile experience.
- Responsive grid of products that business is partnered with to provide potential customers the knowledge of what products are used while the cat is in care.
- This also helps the customer understand the quality of the experience, that good well-known food brands are used.
- Gallery showcasing photos of both the exterior and environment of the cattery, but also some of the cats that have previously stayed.
- Gallery turns into a carousel in mobile view for a better mobile experience.
- Dedicated contact section that provides the customer with a map of the location, a contact form for questions and opening hours.
- This section of 3 column changes to a vertical stack when in mobile view to allow enough space for each sub-section.
- Footer contains up arrow to easily get back to the top of the site, especially useful on mobile as it saves the user continuinally scrolling up.
- Footer contains social media links for customers to subscribe or see user-generated content.
- The footer structure changes to be stacked vertically at different breakpoints.
- Dynamic testimonials. This could be done either by changing on each visit/time of day, using a carousel that continually scrolls through, or embedding an external review source such as Tripadvisor/Yelp.
- Using Javascript to have the fixed mobile nav highlight the section of the page the user is seeing based on their current scroll position.
- Having a dark-mode version of the site that automatically detects what mode the device is in.
- Including an AR experience - there are an increasing amount of web-based AR technologies available, which would offer a great immersive insight for the customer.
- Customer account system, this could allow:
- Loyalty discounting by keeping track of bookings
- See photos of your cat during its stay
- See log of previous bookings, retrieve invoices
- Booking calendar so the customer can see live availability without the need to 'request' a booking, they would receive an immediate confirmation
- Payment system so they can pay a deposit through the website as opposed to in-person on the premises
- Review system so the testimonials section can run independent of third party websites such as TripAdvisor/Yelp
- Improve Performance of load times, using Google Lighthouse as a metric to track any improvements. A few ways to approach this would be:
- To use Javascript to dynamically change the resolution of images to be appropriate for the screen size viewing them.
- To convert the images to a next-gen image format such as WebP, which is steadily gaining more browser support (Safari 14 just announced support). Until WebP gains complete cross-browser support, writing in a fallback image format would be ideal to avoid some users not being able to load any images.
I made the decision to have the site appear all on one page with clear sections for easy navigation.
This decision was partly influenced by design, as I felt having the section sit next to each other with photographs surrounding them was visually more appealing, but also because I felt it made for a better mobile experience as everything can be loaded in one instance and the user can access different sections without waiting.
The order of the sections was intentional, I wanted the ability to book to be the first container visible upon arrival so the user didn't have to spend time searching in order to book.
Rather than immediately going to About/Gallery/Contact, I wanted to include sub-sections that appear when the user is transitioning from one section to another. This took the form of a grid showcasing the publications that the business has been featured in, and a grid of products the cattery uses during its operation. Having this works very well with a one-page design as opposed to multiple pages as this content isn't worthy of a page of it's own, and will be more frequently seen when it appears between sections of importance.
I started the project by first creating a wireframe with Balsamiq, this helped me visualise how the structure of the page would look on all device sizes.
You can see how the final design retains a lot of the structure from the wireframe, but also how it has deviated in the way it responds at different breakpoints. This was as a result of learning and becoming more comfortable with Bootstrap and allowing it to influence the best structure based on its own grid system.
Click the image to see it full-size.
- Smooth scrolling enabled so the transition from clicking a link to the page arriving at the anchor isn't abrupt. This is unfortunately not compatible with Safari unless Javascript is applied.
- Applied an opacity filter to all links with a smooth fade (0.3s) to avoid an abrupt changing of hue.
There is a light accent colour of a gradiented-blue throughout the site found on the submit buttons, but primarily I wanted the colour to derive from the photos used extensively throughout rather than from text or icons.
#0B44EF 
#007dfa 
(-45 degree angle)
opacity: 0.9;
filter: saturate(4);
| Useage | Source |
|---|---|
| Logo Icon | FontAwesome |
| Booking button icon | FontAwesome |
| Contact button icon | FontAwesome |
| Facebook icon | FontAwesome |
| Yelp icon | FontAwesome |
| Instagram icon | FontAwesome |
| TripAdvisor icon | FontAwesome |
| Footer up icon | FontAwesome |
| Title | Roboto |
| Navigation | Roboto |
| Titles | Roboto |
| Content | Roboto |
As images make up a big portion of the design of the project, I wanted to ensure the equivilent experience to someone using a screen reader was of comparable quality by providing all images with descriptive alt tags.
Both forms featured on the site, Booking and Contact, have aria-labels so that screen readers read out what content belongs in each input field.
| Technology | Use |
|---|---|
| HTML | Content |
| CSS | Styling |
| Bootstrap | Responsive structure, carousels |
| FontAwesome | Logo and Submit button icons |
| Google Fonts | Importing of Web Fonts |
| Git & Github | Version Control & Deployment |
| Resource | Use |
|---|---|
| Shoelace.io | Visualising Bootstrap grids before coding |
| Balsamiq | Wireframing |
| VS Code | IDE and used for Git version control |
| Chrome Dev Tools | For debugging CSS issues |
| Notion | Notes & todo list, tracking progress |
| W3C HTML Validator | Validation of HTML code |
| W3C CSS Validator | Validation of CSS code |
To ensure the functionality of the project any time code is changed, I have written a series of test cases to be performed to thoroughly check every function remains working.
| Action/Item | Expected behaviour |
|---|---|
| Favicon | Appears correctly, easiest to test by looking at tab in Chome |
| Links | All links open in new tab |
| Design scales depending on sceen size | All elements are clearly visible on various sceen sizes, eg. form elements move to below hero carousel on mobile |
| Hero carousel image | Should rotate image every 4 seconds |
| Cursor over navigation item (desktop) | Should change font colour to white and show a semi-transparent rounded rectangle over the hovered item |
| Clicking on nav icon (mobile) | Drops down list of nav items |
| Booking form missing/incorrect data | Shows a message asking the user to fill in the missing/incorrect field |
| Booking form 'number of nights' | Should enforce a minimum of 1 night, 0 and minus numbers aren't accepted |
| Cursor over booking form submit button (desktop) | Changes brightness/contrast on hovered button |
| Clicking on nav icon (mobile) | Drops down list of nav items |
| Featured In and Testimonial icons (desktop) | Fade increase in brightness when hovered over |
| Photos in About section | Appear as carousel on mobile, static grid on desktop |
| Photos in About section | Fade increase in brightness when hovered over |
| Photos in Gallery section | Appear as carousel on mobile, static grid on desktop |
| Photos in Gallery section | Fade increase in brightness when hovered over |
| Google Maps embed | Appears correctly, showing location of Code Institute school |
| Contact form missing/incorrect data | Shows a message asking the user to fill in the missing/incorrect field |
| Cursor over contact form submit button (desktop) | Changes brightness/contrast on hovered button |
| Both forms 'phone number' field | Should only accept numbers, no letters |
| Footer social media icons | Changes colour to match companies branding when hovered |
| Up icon in footer | Takes user back to the top of the website |
Performance improvements detailed in Scope: Long Term Vision section.
After deployment, I found multiple bugs that needed addressing.
| Bug | Fix |
|---|---|
| Mobile nav didn't collapse after click | Found the appropriate collapse class from Bootstrap documentation. Resolved. |
| Links stop working after applying collapse code | Wrapped nav items in a <li> as advised (see Credits section) Resolved. |
| Footer social icons too small at mobile breakpoint | Changed font-size at various breakpoints to keep it responsive Resolved. |
| Gap of white space between mobile nav and hero image | Changed nav to be a fixed height and specified the top positioning to the hero image Resolved. |
| Indicators on carousel visible on top of mobile nav | Adjusted z-index for mobile navbar until it was on a higher level than the Bootstrap carousel indicators Resolved. |
| Mobile nav icon flickers when carousel slides | Changing container-fluid from 100% to 100vw resolves issue but breaks nav fixed positioning. Keeping flickering bug as it has less impact on the user experience. Outstanding. |
- Smooth Scrolling enabled, currently isn't supposed in Safari without additional Javascipt.
When the project was nearing completion, I enabled VoiceOver on my iPhone to ensure that it was able to select all of the elements without issue and that it read out the correct alt tags.
- I spent time studying how Git works for this project, in particular a workflow called Git Flow. This was beyond what was covered in our Code Institute module as I felt it was important to get used to the tools an everyday developer would use and I had an interest in how it worked. Rather than using GitPod, I used my own IDE and its built-in terminal to handle version control.
- I primarily worked on the master branch as I knew the project wouldn't be public until I pushed it to my remote repository on Github. Ordinarily, I would have worked on a develop branch and only push production-ready code to master.
- While working on this project, there were a few occasions where I wanted to try an implement a feature but wasn't sure the best approach. In these scenaros, I created a separate branch named after the feature and tested the code there before deciding whether I wanted to use this new method in my master branch.
- An example of this was with the hero image at the top of the site. I had created a static image, and a carousel version that scrolled through several images. I wasn't sure which would look better, on various device screen sizes, so I deployed both and spent time deciding which to use.
- Another example was with the booking form container. Initially this was a Bootstrap column, but it became difficult to work with at different breakpoints. I tried another way of doing this using CSS positioning and found it worked a lot better.
Initially I had completed around 70-80% of the project by writing it in vanilla HTML and CSS, primarily using CSS grids for structure. I decided to remake the project from scratch using Bootstrap as I felt it would produce a better experience for mobile users. It was also a useful exercise as it meant I became a lot more comfortable with using Bootstrap.
Below are examples of how it looked vs the end product:
- All photographs taken by me
- 'About' section text taken and lightly modified from Secret Garden Cattery (with permission)
- Bootstrap Documentation
- W3 Schools Documentation for HTML & CSS
- Carousel Source Code here
- Adding dark gradient filter on hero carousel image here
- Miklos
- Discussed my existing knowledge of how Git works to ensure I understood it properly and if I was missing anything from its basic usage
- I was unsure how to have a Bootstrap column push to a new line at a breakpoint, Miklos explained having a col-12 only appear at certain breakpoints will push subsequent columns to a new line.
- Tim
- Recommended Shoelace.io to me which helps visualise Bootstrap grid's and how they look at different breakpoints
- Johann
- I wanted to have my booking container change width at a certain breakpoint. Up until this point my booking container was a column in Bootstrap. Johann suggested it might be better to have the container be outside of a grid system and instead use positioning to determine its location at various breakpoints.
- Cormac
- Helped me identify what elements was overflowing causing a horizontal scrollbar to appear. Talked me through ways of using Chrome Dev Tools to debug this type of issue.
- Jim Morel (JimLynx_Lead)
- After I implemented Bootstrap's mobile navigation bar collapse-after-click code my links suddenly stopped working. Jim advised me to wrap them in a
- to regain the functionality.
- The assessment guidebook indicated that students should "remove commented-out code before publishing final files to version control and deploying" and elsewhere in the guidebook asks to include comments with attributes and defining clear sections. To confirm whether these types of comments should stay I asked Jim. Message link here.