This is an information-based website for an Accounting Firm based in Staffordshire, UK. The website features include a home page with a banner (the hero image), an 'About Us' page, the 'Services' page and a 'Contact Us' page. The main aim of the website is to provide information on the Accountancy Firm’s Services and to generate potential client leads – which is done through the ‘Contact Us’ call to action button available on the 'Home' and 'Contact Us' pages.
• Increase brand awareness.
• Direct more traffic to Website.
• Provide richer customer experiences to build trust with new and existing clients via the About Us/Services pages.
• Provide an exemplary UX to keep potential clients interested in Services and fill out Contact Us form.
• Increase client base.
• Clear information on the services provided by the Accounting Firm
• Clear information on how to contact the Accounting Firm
• Understand why they need an Accountant for their business or personal use
• Provide customers with up-to-date information on all things tax via newsletters
• UK Based
• Business owners – Private/Public Limited
• Sole traders
• Influencers
• Self-Employed
• Interested in setting up a business
• Accountancy Firm in the Midlands/Staffordshire/UK
• Accounting Firms Near Me
• Tax Deadlines
• How to submit taxes online
• Bookkeeping/bookkeepers
• Keep on top of expenses
• VAT
• Payroll
• Do I need to pay Tax?
• Clear, concise information to help them with their queries
• Not overload them with information as most accounting websites do
• Guide them to the right service needed for their business needs
• Help potential clients to understand why they need an accountant and encourage them to get in touch via the Contact Us form
-
-
As a new visitor to the website, I want to easily navigate to the site to get the information that I need.
-
As a new visitor to the website, I want to know the precise service I need for my business needs.
-
As a new visitor to the website, I want to be able to contact the accounting firm and have that information readily available to access.
-
As a new visitor to the website, I want to be able to find the firm's address details and use Google maps to locate the firm easily.
-
As a potential client, I want to know about the Accounting Firm and its values, so I know I will be in safe hands when I commission their services.
-
As a potential client, I want to be clear on the type of service they offer.
-
As a potential client, I want to be able to fill in the Contact Us form easily and not find it time consuming.
-
As a potential client, I want to be able to access the firms social media to see how they come across.
-
As a regular user, I want to be able to follow the Accounting Firm on social media, to get latest updates and useful hints and tips.
-
As a regular user, I want to be able to sign up to the Accounting Firm’s newsletter to keep up to date with any special offers or any useful pieces of information relating to my business.
-
As a regular user, I want to be able to find the firm's contact details and call the firm or message the firm via the website easily.
-
As a regular user, I want to be able to find the firm's address details and use Google maps to locate the firm easily.
-
As a regular user, I want to be able to find the firm's opening times easily.
Each page of the website has a responsive navigation bar, both across the top and the bottom. All the pages feature the company logo on the top left-hand side of the page, as well as featuring a hero image. The hero images are all relevant to the firm and the values they want to get across i.e., professionalism, clean, clear images. The footer of each page also has the company’s contact details (phone number & address), as well as links to the social media handles (LinkedIn & Instagram).
Home Page: the homepage of the website contains a hero image, which is a reflection of the company and gives the vibe of being a professional, clean business. The logo is clear and concise, it states exactly what the company is about (UA Accountancy). Just below the logo there is the company’s tag line (Where Service Meets Value) and a small ‘Contact Us’ button, when clicked takes the customer straight to the 'Contact Us' form. The hero image is the background image, with the logo, company tagline and the nav bar overlapping it. The nav bar runs across the top with each button linking to a different page of the website and is fully responsive on both desktop mobile/tablet devices.
The homepage has a brief overview of the company, services provided and its business values. When clicking on the ‘Read More’ button, it will take the customer to the ‘About Us’ page. The homepage also features some icons, for customers who are more visually inclined, with an overview of all the services provided by the company.
At the bottom of the page, there is a get in touch form that the customers can fill out, which asks for their name, email address, phone number and a box to input their message.
The footer of the page has the company’s contact details (phone number & address), as well as links to the social media handles (LinkedIn & Instagram).
About Us Page: The hero image on this page is of the client in a business meeting, which overlaps the logo, header and the nav bar. This page contains some information about the company, the firm, and their values. Footer has the logo, and the following call to action buttons: Contact number, link to social media handles.
Services Page: This page features another hero image, which overlaps the logo, header and the nav bar. On this page there is a list of the services provided by the company and logos of all the institutes that company is registered or associated with, giving it that professional vibe. As these institutes are well known in the accounting industry, it will give any potential clients confidence in the company’s services. The footer of the page has the company’s contact details (phone number & address), as well as links to the social media handles (LinkedIn & Instagram).
Contact Us Page: This page, again, has a hero image, which overlaps the logo, header and the nav bar. This page has a more enhanced contact us form, to allow the customer to input more data about what organisation they have and what kind of services they are looking for. This will make it easier for the company to better understand the customers’ needs and when responding they can tailor their response to suit the customer. Also the number and google map image to show location of office for new and potential customers.
This page also has an iframe of google maps, showing the exact location of the company’s offices, as well as the company’s contact number and the footer has links to the social media handles (LinkedIn & Instagram).
New and existing clients are able to find the services the business offers. The address and contact details are available on every page for customers use, making it easier for customers to get in touch. All customers users requirements in terms of following them on social media and contacting the business were fulfilled.
The website has a contact page for new cvisitors or potential clients to easily ask questions or contact the firm.
Existing Features
• Header Logo - Exists on every page and allows all users to easily navigate back to the home page by clicking on it
• Header Navigation Bar – Visible on every page and allows all users to easily navigate from page to page on the website and find what they are looking for quickly
• Footer Contact Details – Each page has phone contact details and company address
• Footer Social Icons - Exist on every page and allows all users to access the social platforms that the company uses by clicking the icons
• Call to Action Buttons - This feature is available on the Homepage and the Contact Us page, where potential clients are able to fill out a contact form to get in touch with the accounting company to start the process of hiring them or finding out more information about the services
• About Us Page - Allows potential clients to quickly get an overview of the company and its values; a small About Us section is also visible on the Homepage of the website
• Contact Form - Allows potential clients to ask questions, and/or make the first step in hiring the Accounting Firm. The detailed form on the Contact Us page also allows potential clients to add additional information on what services they are looking for based on what kind of organisation they are running
• The services offered are listed out on the homepage for ease aswell as the credentials from authorised bodies to show they are good and genuine. This would be something anew user or a potential client would be interested in.
• Companies values have been added to the website for customers peace of mind, especially new clients who do not know the business
Features to Implement in the future
• GDPR Compliant Pop-Up Screen – this will ensure that the company complies with the EU data protection laws, by enabling visitors to the website to approve or deny the processing of their personal data
• Testimonials – this will give any potential customers the confidence to hire the company
• Collapsible Buttons on Services Page – this will allow any potential to get more information on the services that the company provides (requires JavaScript)
• Add CAPTCHA to Contact Form – this will protect the company from being spammed (requires JavaScript)
• Useful Forms/Documents Downloads – this will increase traffic to website and give any visitors additional resources to Tax Return/VAT/How To forms & documents, that they may find hard to locate otherwise
• Pricing Information – this could be set up as a separate page or part of the Services page as an additional form with drop down options. This will allow any potential clients to input the exact nature of their organisation/business and give an estimated price of the services based on their answers (will need JavaScript for pop-ups, animations, and the ability to select packages and register details or sign up)
• Contact Form Send Button – currently the Send button options sends the form to a dump site- JavaScript is needed to send directly to company inbox
• VAT Calculator – this will be useful for potential/existing clients who are looking for a quick method of working out the tax owed in line with government policies (this will require JavaScript/Python)
• FAQ Page – this will give potential clients answers to the most asked questions via a table with FAQs and dropdown buttons to view answers (JavaScript required for dropdown functionality)
• Company Blog – this will be an avenue for potential/existing clients to discover the website through articles and keyword searches, will provide information on latest news, hints/tips and answer FAQs. Company is looking to set this up soon.
• Opening times need to be added once the firm finalises their opening times. This can be added in the footer or the contact page.
• Subscribe option will be added once the owners have decided who will be updating or sending out the onformation for the newsletter.
•. A dropdown with all the services offered under the services button will be added for the ease and convenience of the client to allow then to get to the information required quickly.
The hero image and the other banner images have been chosen by the client. The colour scheme follows the theme of the logo. The colours make the make the website look clean and professional. The Hero image shows a working environment. The feel of professionalism and business is depicted in the hero image.
Colour Scheme A black and white theme refelcts a clean and professional look. The colour theme is also a preference of the client as he loves these colours.
Typography Google Fonts were used to import Montserrat fonts into styles.css. This were chosen as they are simple yet professional looking, it also gives a modern feel that is easy to read.
Homepage Wireframe
About Page Wireframe
Services Page Wireframe
Contact Page Wireframe
Tablet Wireframe of Landing Page
Mobile Wireframe of Landing Page
- HTML5 - Mark-up language using semantic structure for the website.
- CCS3 - Cascading style sheet was used to style the website.
- Gitpod.io - for writing the code and used the command line for committing and pushing to Git Hub
- GitHub - Used to host repository
- GIT - for version control of the project.
- Google Fonts: was used to import the Montserrat font into the style.css file which was used on all pages of the project.
- Font Awesome: was used to add icons which this website uses a lot of for aesthetic and UX purposes.
- Git: was used for version control by using the Gitpod platform terminal to commit changes to Git and Push those changes to GitHub.
- GitHub: is used as the platform for respository for this projects code once it was pushed from Git.
- Adobe Illustrator: was used for designing the website, editing the icons and resizing images for the website.
- Balsamiq: was used to create the wireframes during the design process.
- Bootstrap - For responsive design/carousel - overwritten some of the code in the bootstrap.css
- Google fonts - For styling the typography
- Balsamiq wireframe - To do the initial wireframe
- Font Awesome - for icons
- Adobe Illustrator – changing some images to smaller sizes, editing icons, and designing the web site.
HTML Validator - Testing validity of HTML
!
- There were no errors on the HTML, however, three of the same warnings which could not be changed.
CSS Validator -Testing validity of CSS
- There were no errors in the CSS
LightHouse Report
- Homepage
- About Page
- Services Page
- Contact Page
Browser Compatibility
- Firefox
- Safari
- Chrome
- Internet Explorer (Edge)
Am I Responsive - Checking the responsive nature
- Desktop
- Tablet
- Mobile
This project was built using Gitpod and pushed to GitHub using the in-built functionality to commit and push.
To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub.
- From the list of repositories on the screen, select NaziaSiddique/milestone.
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Main
- By selecting Main the page is automatically refreshed and the website is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
How to run this project locally
*To clone this project into Gitpod you will need:
- A Github account. Create a Github account
- Use the Chrome browser
*Then follow these steps:
- Install the Gitpod Browser Extentions for Chrome
- After installation, restart the browser
- Log into Gitpod with your gitpod account.
- Navigate to the Project GitHub repository
- Click the green "Gitpod" button in the top right corner of the respository
- This will trigger a new gitpod workspace to be created from the code in github where you can work locally.
*To work on the project code within a local IDE such as VSCode, Pycharm etc:
- Follow this link to the Project GitHub repository.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open the terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 3. git clone https://github.com/USERNAME/REPOSITORY
- Press Enter. Your local clone will be created.
Content • The text for all the pages of the website was provided by Usman Ali
• The text was proof-read/edited by Usman Ali
Media • All the photos used in this site were obtained from the company director – Usman Ali
Code • All code on this website is my own
Acknowledgements • My inspiration for this website was from my own experience of building and maintaining a WordPress website for this business in the past couple of months which, recently went live
• My mentor Brian Macharia helped and supported me by suggesting the following amendments: using better semantics for the website, how to markdown the Readme and advised me to be consistent in my code by using either hyphen_case or snake_case and more.
Disclaimer
• The content of this website is for educational purposes only