Aviation Consultancy LLC is (fictitious) consultancy business specialising in aircraft maintenance data and regulatory compliance, based at London Heathrow Airport. I designed the website to be a showcase of the available services and a means for new customers to make contact with the business allowing project and service requests to be submitted. It's services are B2B so not required to sell any products directly via the site.
I created the Aviation Consultancy LLC logo to present a professional, trustworthy image based on research of similar contemporary consultancy service websites (details of these websites can be found in the Credits section). The colour scheme was chosen from the Blue / Green colours to reflect a calm balanced approach as well as to blend well with the aviation and sky themes.
- Contents
- UX (User Experience)
- Design Choices
- Technologies
- Features
- SEO
- Version Control
- Project Management
- Testing
- Bugs
- Deployment
- Credits
The goal of this project is to build a website which allows Aviation Consultancy LLC to showcase its B2B services to potential business customers.
The features on the website will:
- Give business customers more ways to interact with Aviation Consultancy LLC (contact form, social media, phone, email).
- Enable the business to showcase their services and key staff members.
I achieve this by:
- Providing contact details and social media links in the footer section of each page.
- Providing an option to the customers to submit their contact and request details in a form.
- Providing a summary of the consultancy services provided by Aviation Consultancy LLC
- Providing an option to the customers to see staff member biographies and links to social media to find out more.
- Understand whether the provided services solve their problems or pain points.
- Contact the business to submit a project proposal.
- As a user, I want to see a navigation bar at the top of the page where I can navigate to each of the different site pages.
- As a user, I can see a collapsed navigation bar icon on mobile devices that opens up to give access to the site navigation links when clicked.
- As a user, I can see a company logo or name in the navigation bar.
- As a user, I can see a hero image welcoming the user to the site.
- As a user, I can see Call To Actions (CTA) to learn more about the business and to make contact with the business.
- As a user, I can see a carousel containing customer testimonials or inspirational quotes.
- As a user, I can see a page describing the services provided by the business.
- As a user, I can see a page describing the company values.
- As a user, I can read a biography of key personnel in the company.
- As a user, I can contact the business by submitting my details with a message.
- As a user, I want to know where the business is located on a map.
- As a user, I can see the website privacy policy and terms and conditions.
- As a user, I can see a site map with links to all the site pages.
- As a user, I can contact the business using their social media channels, call them or email.
- As a site owner, I want to create an interactive website allowing the user to easily understand the services available
- As a site owner, I want the user to be able to see a location of the business on the google maps.
- As a site owner, I want the user to be able to submit a contact request with additional text.
- As a site owner, I want the user to see the unique selling points of the business
- As a site owner, I want the user to be able to understand the company values.
- As a site owner, I want the user to be able to the understand the purpose of the business.
I have chosen Oswald for all of the headers and Roboto the rest of the text.
I have chosen the colours that say 'trust' and 'dependable' buy using light blue, white and black to compliment the aviation theme. The images used in the site display a range of blue tones and so the palette choice also compliments the design of the project.
- Black (000000) - Black
- Onyx (444444) - Dark Grey
- Light Blue (ADD8E6) - Sky blue
- White (FFFFFF) - White
These colours will compliment each other well when used across the site creating a professional, clean website.
I designed the site mock-ups originally using pen and paper and then developing the designs further using Balsamiq wireframes.
I'm focusing on defining the basic layout structure of the site and identifying how displays would change on different screen sizes such as mobile, tablet and desktop for each page.
The original hand drawn sketch wireframes were created as quick and rough method to try out page formatting ideas to form a basis for creating the wireframe within balsamic.
They represent the early stages of the design process for the website as ideas started to form and the flow of the design process from idea to finished website.
The final wireframes were created using Balsamiq adapted from the original hand drawn wireframe concepts. Each image shows a page from the site in three display sizes to demonstrate the page design and layout.
- HTML5
- Used as the main markup language for the website content.
- CSS3
- Used to style the individual webpages.
- Bootstrap
- Used to design a mobile-first responsive website layout.
- jQuery
- Loaded as part of the Bootstrap CDN starter template
- Popper
- Loaded as part of the Bootstrap CDN starter template
- Git
- Git was used for version control by utilising the Gitpod terminal to commit to Git and push to GitHub.
- GitHub
- Used to store, host and deploy the project files and source code after being pushed from Git.
- Gitpod
- An online IDE linked to the GitHub repository used for the majority of the code development.
- CodePen
- An online code editor and open-source learning environment used to test small sections of code quickly and easily.
- Visual Studio Code
- A locally installed IDE connected to the GitHub repository for when there was no internet connection to use Gitpod.
- Font-Awesome
- Used for icons to enhance headings and add emphasis to text.
- Google fonts
- Used for the website fonts.
- Coolors
- An online tool used to choose the website colour scheme.
- Birme
- An online bulk image resizing tool.
- Favicons
- Used to generate a favicon for the website title.
- Am I Responsive?
- A tool for taking a quick snapshot of the responsive breakpoints of the website to visualise how the site will look on different device screen sizes in one place. The resulting screenshot is also used as the README.md logo image.
- Microsoft Visio
- A software tool for drawing diagrams and flowcharts which is part of the Microsoft Office365 suite used to create the website topology chart.
- XML-Sitemaps.com
- An online .xml sitemap generator.
- What is my Screen Resolution
- An online tool to find out the screen resolution on your device used for CSS @media queries
- Random Name Generator
- An online tool to generate random names for the team members in the About Us page.
- Microsoft Office365
- A suite of productivity apps used to design the Aviation Consultancy LLC logo
- Responsive mobile first design using a Bootstrap framework.
- User friendly display with lots of images
- A Navbar with easy navigation that collapses on mobile displays
- CTAs to encourage customers to make contact
- A Contact Us pop-up modal with a form to submit user details and a message
- A confirmation page after form submission allowing the user to return to the homepage.
- Contact Us page with an embedded Google Maps to show the business location
- Social media links
- Bootstrap accordions to assist with readability of large amounts of text on mobile displays
- Sitemap features for SEO enhancement
- Blog / news page
- Case studies page
- How We Work page
- Scroll-back-to-top button
- Full form submission linked with email
Search Engine Optimisation for the site was provided in three complementary ways:
- HTML Sitemap links
- XML sitemap file saved in the root directory
- Google Search Console
- Secondary HTML links to each page in the website were added to the footer section of each site page to allow users an alternative means of navigating the site easily.
-
A sitemap.xml file was created to help search engines find, crawl and index the website more easily. It was created by using XML-Sitemaps.com and entering the URL for the deployed website and letting it automatically generate the required xml data for the whole site. The file was then saved in the GitHub repository root directory.
-
The following steps were used to generate the sitemap.xml file:
- Visit XML-Sitemaps.com and enter the URL of the website https://simonjvardy.github.io/Aviation-Consultancy/
- Click Start
- The site pages will automatically be scanned
- Click View Sitemap Details
- Download the XML sitemap file
- Save the sitemap.xml file in the root directory of the GitHub repository
-
Google Search Console was used to assist with testing and indexing issues with the website and to see how the site performs in Google search results.
-
The following steps were used to perform the indexing tests:
- Visit Google Search Console
- Click Add Property in the menu bar
- Enter the website URL https://simonjvardy.github.io/Aviation-Consultancy/
- Click Continue
- Download the unique verification file created by Google
- Save the verification file in the root directory of the GitHub repository
- On Google Search Console, click Verify
- Once the verification passes, the site is available in the Google Search COnsole dashboard.
Even though this website has a small number of pages and have navigation links on each page making the Sitemap largely unnecessary, I felt is was a good experience and good practice to add these features in. Note: I haven't added a robots.txt file yet but may add this in the future when I understand more about search engine optimisation techniques.
Version control for this repository is managed within GitHub and Gitpod using separate branches used to work on specific aspects of the project. The following describes the repository branch structure:
- Master - this is the default branch and the source for the repository deployment.
- Documentation - this branch is used for updating the README.md and testing.md documentation only.
- Development - this branch is used as the main working branch for the website development
- Each individual bug fixes are raised within their own separate branches using the naming convention <GitHub Issue ID Number>-<bug fix description> e.g. branch name 12-correct-navbar-links
The following workflow steps are used to create and update branches within Gitpod and to push changes back to GitHub.
- Open Gitpod from Github using the Gitpod button. This needs to only be done once at the start of the project.
- Start the Gitpod Workspace which opens an online IDE editor window.
- For changes to be made to any documentation files, the git command
git checkout documentationis used to checkout and switch to the documentation branch. - For changes to be made to other files under normal site development, the git command
git checkout developmentis used to checkout and switch to the development branch. - To create a new branch for bug fixes, use the git command
git checkout -b <branch-name>to create and switch to the new branch.
- New or modified files are staged using the
git add .command - The changes are committed using
git commit -m "<commit message>"command. - If the changes are in a newly created branch, the committed changes are pushed from Gitpod to GitHub using the
git push --set-upstream origin <branch-name>command as there is currently no upstream branch in the remote repository. - For branches that have already been synchronised, the committed changes are pushed from Gitpod to GitHub using the
git pushcommand.
- Opening the repository in Github, a new pull request is created for the updated branch and assigned to the Development project.
- The changes are reviewed to ensure there are no conflicts between the updated branch and the Master branch.
- The changes are then merged into the Master branch and the merge request is closed. The Project entry is automatically moved to the Done card.
- To update Gitpod with the latest commits From GitHub, the
git checkout mastercommand is used to checkout and switch to the master branch. - Use the
git pullcommand to update the master branch and reset the pointer. - Now switch to the other branches in Gitpod using the
git checkout <branch-name>command and use thegit merge origin/mastercommand to update each branch in turn. - Use the
git pushon each branch to update the relevant GiHub Branches to the same commit as the Master branch. - Repeat steps 3 - 17 regularly to ensure updates are saved and correctly version controlled in GitHub.
GitHub Projects are used to organise the planning and development of the website using the Automated kanban template. The following project cards are used to manage the tasks:
- Backlog - this card is used to capture ideas for project tasks.
- To Do - this is the current work queue for the project.
- In Progress - this is the list of tasks currently in work.
- New issues and pull requests are automatically added to this column using project card automation options.
- Review in progress - Pull requests are automatically moved here by project automation options when the reviewer requests any changes to be carried out.
- As there is only one contributor on this project currently, most pull requests bypass this card as the request is usually reviewed and merged in the same step.
- Reviewer approved - Pull requests are automatically moved here by project automation options when they meet the minimum number of required reviews.
- As there is only one contributor currently, most pull requests bypass this card as the request is usually reviewed and merged in the same step.
- Testing - Testing tasks list
- Done - completed tasks
Markdown syntax is used to create "To-Do" list style checkboxes by adding - [ ] for an un-ticked checkbox and - [x] for a ticked checkbox on cards as a way of splitting a single complex task into a list of steps to be completed.
- Testing information can be found in a separate testing.md file.
To manage bugs and issues tracking, the default GitHub bug_report.md template has been created and activated within the repository settings Features > Issues section. All new bugs and issues are tracked within the GitHub repository Issues section . Open issues are managed within the GitHub Projects section
Each branch is then merged into the master branch using a pull request that is linked to the open issue. Once merged, and the bug report closed, the branch is deleted.
Fixed bugs and issues are marked as closed.
The website was developed using both Gitpod and Visual Studio Code and using Git pushed to GitHub, which hosts the repository. I made the following steps to deploy the site using GitHub Pages:
- Opened up GitHub in the browser.
- Signed in with my username and password.
- Selected my repositories.
- Navigated to simonjvardy/Aviation-Consultancy.
- In the top navigation clicked settings.
- Scrolled down to the GitHub Pages area.
- Selected Master Branch from the Source dropdown menu.
- Clicked to confirm my selection.
- Aviation-Consultancy is now live on GitHub Pages.
Cloning Aviation-Consultancy from GitHub:
- Navigate to simonjvardy/Aviation-Consultancy.
- Click the green Code button.
- Copy the url in the dropdown box.
- Using your favourite IDE open up your preferred terminal.
- Navigate to your desired file location.
Copy the following code and input it into your terminal to clone Aviation-Consultancy:
git clone https://github.com/simonjvardy/Aviation-Consultancy.git
You can find the images used for the site here. I have sourced them through various websites, which are either free to use or used under license:
-
Homepage
- The Callout Hero Image was sourced and used under license from Shutterstock.com
- The card deck image caps:
- Our Services image was sourced and used under license from Shutterstock.com
- About Us image is used courtesy of Jetstar Airways sourced from Flickr.com
- TBC image was sourced as a free to use image from Pikrepo.com
- The Testimonials carousel background image was used with kind permission by Arun Kulshreshtha - Own work, CC BY 3.0 us, https://commons.wikimedia.org/w/index.php?curid=1902748
-
Our Services
- The Hero Image was sourced as a free to use image from Pexels.com
- The card deck image caps:
- Data Analysis image was sourced as a free to use image from Pikist.com
- Data Migration image was sourced as a free to use image from Pikist.com
- Data Integrity image was sourced as a free to use image from Pikist.com
- The Testimonials carousel background image was used with kind permission by Arun Kulshreshtha - Own work, CC BY 3.0 us, https://commons.wikimedia.org/w/index.php?curid=1902748
-
About Us
- The Hero Image image is used courtesy of Jetstar Airways sourced from Flickr.com
- The card deck image caps:
- Expertise image was sourced as a free to use image from Pikrepo.com
- Integrity image was sourced as a free to use image from Pxfuel.com
- Innovation image was sourced as a free to use image from pixabay.com
- The fictitious Meet The Team portrait images:
- 'Thomas Brooks' was sourced and used under license from Shutterstock.com
- 'Dr. Mary Hoffman' was sourced and used under license from Shutterstock.com
- 'Elizabeth Ward' was sourced and used under license from Shutterstock.com
- 'Michael Lawson' was sourced and used under license from Shutterstock.com
- The Testimonials carousel background image was used with kind permission by Arun Kulshreshtha - Own work, CC BY 3.0 us, https://commons.wikimedia.org/w/index.php?curid=1902748
-
Contact Us
- The Hero Image image was sourced as a free to use image from Pikrepo.com
- The Testimonials carousel background image was used with kind permission by Arun Kulshreshtha - Own work, CC BY 3.0 us, https://commons.wikimedia.org/w/index.php?curid=1902748
-
Confirmation
- The background image was sourced as a free to use image from Unsplash.com credit: Lukas Souza
The colour palette was identified on Coolors
- Microsoft snipping tool was used for capturing screengrabs which are saved as images.
- A handy Birme site allowed me to resize the images all at once.
The following websites were used for design and image ideas based on similar business sectors:
- Osprey Consulting Services
- IAG The International Aviation Group
- Aviation Analysts International
- Aviation Consulting Services
- ICF
- Alton Aviation Consultants
- VJL Consulting Ltd
The following website was used for design ideas and a clean modern look:
- W3Schools for just being a constant source of help and inspiration!
- Code Institute Course material for the inspiration from code-along challenges.
- San Francisco State Univerity PMO Resources webpage where the original Unit Testing and UAT Testing Plan documents were sourced
- usersnap.com blog which was the inspiration for the modified UAT Testing document and wording.
- Neringa Bickmore for her guidance and advice on the README.md and testing.md document content and layout.
- Frozenaught for further README.md content ideas.
- Gary Simons for further README.md content ideas.
- Software Testing Fundamentals (STF) for an excellent guide on building testing processes.
- CoSchedule Blog Post for help with colour psychology in marketing.
- Git - Branching and Merging documentation for help understanding how to manage branches in GitHub / Gitpod.
- Stack Overflow for ideas and help with GitHub branch naming conventions.
- digitaljhelms for ideas and help with GitHub branch naming conventions.
- Code Institute July 2020 Hackathon BI Team 5 who gave me the motivation, tools and experience to start this Milestone Project 1 - Cian, Neringa, Micke and Dermot you are awesome; thank you!
- GDPR.EU Privacy Notice Template was used to create the content for the Privacy Policy page.
- TutorialRepublic for Boostrap help and tutorials.
- Rocket Lawyer for the use of their free Terms and Conditions template text.
- XML-Sitemaps.com for the generated sitemaps.xml file.
- Backlinko for SEO Sitemaps help and ideas.
- Google Search Console Help on how to use Google Search Console and troubleshooting techniques.
- Stack Overflow for fixing the Jumbotron background problem.
- Lost TV Series fictitious character and airline names used in the testimonials are owned by ABC.com / ABC Studios and are used purely for light-hearted "easter eggs" on the website by a diehard fan of the long-running TV series.
- Bootstrap
- Accordion example code was copied and adapted for the Privacy Policy and Terms and Conditions pages
- Jumbotron example code was copied and adapted for the Home page CTA / Hero image.
- Cards example code was copied and adapted for the Home page features section.
- Modal example code was copied and adapted for the Contact Us form.
- Forms example code was copied and adapted for the Contact Us form.
- Carousel example code was copied and adapted for the testimonials carousel.
- Embeds example code was copied and adapted for the Google Maps embedded iframe
- Icon Library icon HTML SVG tag code copied for the Contact Us modals form input fields