View the live project here.
The aim of this project was to create a user-friendly website for a scale modelling commission service, aimed at model railway builders, wargamers, boardgamers and roleplayers. With many years of experience within the tabletop hobby, I know there’s very little online presence for this service and yet it is one I am regularly asked about, so I wanted to create a site where users can quickly and easily gain all the information they need and arrange for projects to be commissioned.
I run a business selling scale modelling materials and hobby products aimed at wargamers, boardgamers and model railway builders, and have been asked many times whether I’m available for commissions. From my knowledge of the industry and experience talking with fellow modellers, although there are people out there who take on commission work, there is virtually no online presence for this aspect of the hobby which makes it incredibly difficult for people to find anything regarding commission services. This project aims to provide users with a website where they can quickly and easily find a reliable commission service for whatever scope of project they need, without having to hunt the internet for information.
This is a specialist commission service website intended to be accessible on all devices. My aim with the project was to present a clean, slick appearance that makes it easy for users to engage with the content, browse a gallery of previous work and book the commission service for their own projects.
Business Goals
-
To engage with potential clients and present examples of past work
-
To encourage users to book commission work and to buy products
-
To increase exposure and customer base through positive user experiences
User Stories
-
"As a busy parent with a full time job, I don't have time to build terrain for myself. I want to use what time I have playing the game, not building scenery."
-
"I wouldn't know where to start building my own scenery. I'd much rather get someone else to make whatever I need and buy it ready to game with."
-
"It costs just as much money to make my own terrain as to buy it ready-made, so it's just quicker to get it made for me."
-
"I'd love a full custom built gaming table, but wouldn't have a clue how to do it myself. Normally I'd buy scenery at shows but with Covid going round there are no shows happening, and it's really hard to find places to get custom boards made online."
The website is based on a MVP (Minimum Viable Product) methodology, for several reasons:
- Keeps the website uncluttered and minimalistic, avoiding information overload for users
- Makes site easier to navigate, with only key information displayed
- In line with my current abilities
- Meets the necessary needs of the user and business owner
The website is split into four sections - a home (landing) page, an about page, gallery page and contact page. The fixed navbar and footer allow the user to easily navigate the site and get in touch, and present a consistent layout. The Home page holds prominent site message and CTA button within the jumbotron and a summarised version of the key information for the user, with further information accessible on the About page.
The website follows my initial four section plan, and loosely follows the initial wireframes with slight changes to enable better mobile-first design e.g. removal of the carousel feature, and switching the planned header image to a jumbotron feature.
I wanted to maintain a clean and spartan presentation in order to avoid distraction for users and all the information presented to be the focus of attention. The high contrast of black/dark greys and white works to present a clean palette to users, while the bright blue spot colours serve to draw attention to key interactive elements (links, nav elements and social icons).
Each of the images selected presents an example of past work, thereby establishing what the user can expect should they book the commission service. These serve both as decoration and as functional examples to promote the commission work itself.
-
I wanted to present a clean and minimalistic colour palette to users, to keep the site free of too much distraction and also to evoke a blank canvas for users' project ideas. The bright spot colour, #46cde3, was introduced to present a sharp colour contrast and act as a spot colour for interactive elements.
-
The main colours are black #000000 and an offwhite, #fafafa, with a charcoal grey, #777777, used as a third complementary colour to differentiate between some elements. This is consistent across all pages, and ties in with the existing colour scheme associated with the 'brand' (used on my ecommerce site).
- I used Google Fonts to browse interesting fonts. 'Raleway' was used for headings and sub-headings, while the main content font was 'Open Sans', both with 'Sans-Serif' as the back-up font. 'Raleway' was chosen because of it's thin weight and elegant typeface, with 'Open Sans' recommended as a good paired font.
- Font Awesome was used extensively to provide appropriate icons, such as for social media icons in the footer, menu bar icons and accompanying much of the text content on pages.
- I wanted users to easily be able to navigate the site from every page.
- The navbar resizes responsively to still be visible on mobile devices, with the site logo disappearing to make room as the screen size reduces.
- The navbar uses a static colour change to indicate present site location, and colour change hover effect on the icons whilst navigating to a new page.
- The user can click on the logo or navbar to take the user back to the Home page.
- Contains animated jumbotron image to showcase an example of commission work.
- Text on top of jumbotron image draws attention to site's goal and the related call-to-action button, allowing users to quickly understand the site's purpose and get in touch.
- This page consists of four areas with key information on what the business sells, who we are and details of the commission process.
- Contains multiple responsive gallery sections divided by 'theme' (which can easily be added to as more work is completed).
- Number of images displayed responds to screen size so as to minimise scrolling on smaller devices.
- Allows users to get in touch and detail aspects of any work they'd like to commission.
- Includes social media clickable icons linking to respective social medias sites, opening in new tabs when clicked.
My website was designed to present key information quickly and easily, and make the booking process as simple as possible to avoid info overload for users. I designed it so that it was clear and consistent across all pages and is accessible on all devices.
- Home page: Fixed navbar allowing the user to easily navigate through the site. Multiple "Get in touch" buttons (one in jumbotron, one above footer) so the user could submit an enquiry from multiple points on the page.
- Gallery: Instead of using a carousel, for the Gallery page I used a multiple simple grid-based galleries as it was visually more appealing and better formatted on all devices.
- Contact: Multiple CTA buttons linking to Contact form to allow easy access to the form; form requires at least name and email address to be complete, to prevent submission of empty forms
- Footer: Spacious footer with clearly visible social media icons, with colour change and grow hover effects to really make them stand out. Ample space for more features to be added.
- Expansion of galleries: where users can click the 'theme' they're interested in to be taken to a full gallery page with a lot more images of that theme
- Expansion of footer: space has been left to add extra info in the footer, such as contact details, links to other relevant sites etc.
- Functionality of forms submitted: beyond the scope of the modules so far but will learn this in future modules.
- 'Scroll to Top' and internal navigation on Gallery page: a 'Scroll to Top' button would make navigating the gallery page much easier, especially on mobile devices. As the galleries expand, adding in internal navigation so users can jump to the gallery sections they're interested in would make the user experience much better.
- Bootstrap 4.5 - A mobile-first responsive library used to construct various parts of the project, including extensive use of the grid system for layout, the Nav Menu and Contact Form.
- GoogleFonts - Raleway, Open Sans and Sans-Serif fonts.
- FontAwesome - Used frequently for icons throughout the website.
- Balsamiq - used for the creation of wireframes.
- Github - Used to store the code and use of GitHub Pages to deploy the website.
- Gitpod - Used as the primary version control IDE for development to further push and commit code to GitHub.
- Code Institute Course Content - Primary source of learning code.
- ChromeDevTools - Used frequently to detect any issues/bugs or layout differences.
- CSS-Tricks - Used as a general resource for CSS tips and questions.
- W3Schools - Used for examples and tutorials.
- Hover.CSS - Used for button and icon hover effects.
- AmIResponsive - Used to check how the layout of the website looks across different devices (found at the top of this README).
- BrowserStack - Used to test website layout on multiple devices.
- Google Mobile Friendly Test - Used to test all pages on a mobile device
-
Forms testing: to ensure the website was functioning as it should, I tested each of the forms on different devices and browsers. This was done by clicking the 'Submit' button on the Contact Form without any text in inputs to make sure it resulted with the desired response of 'Please fill out this field'.
-
Links (Internal & External): Each of the links when clicked have been checked so that the user is directed to the desired location. For a better UX experience, I made sure each link has either a colour change or colour-changing icon when hovered (with exception of the logo when visible) and included a target="_blank" attribute so that a new browser tab is opened when clicked.
-
Testing across various devices: I used BrowserStack for this, in addition to feedback from my friends and peers. The devices on which the website was tested are as follows:
-
Android Mobile:
- Samsung: Galaxy S8, Galaxy S10, Galaxy S20, Galaxy S21, Note 8
- Google: Pixel 5
- OnePlus: 8
- Motorola: Moto G7 Play
-
Android Tablet:
- Samsung: Tab A6, Tab S4
-
IOS Mobile:
- iPhone: 11 Pro, 12
-
IOS Tablet:
- iPad: Pro 12.9 2020, Mini 2019
-
-
Tested on Chrome, Firefox, Safari and UC
-
Ensured the website was also responsive on all pages through Google Mobile Friendly Test.
-
- Home:
-
- About:
-
- Gallery:
-
- Contact:
HTML - W3C - Markup Validation
- Errors on Contact form: I'd missed out the ID for the 'Timeframe' field, and there was a typo in the 'Project Description' ID value (an extra 'r' on the end). I simply entered the correct ID value for the 'Timeframe' label, and deleted the typo for the 'Project Description' ID.
- Validation flagged up possible warning around the use of semantic elements. This was corrected simply by changing the elements in question to more appropriate ones.
CSS - W3C - CSS Validation
-
Social icons in footer would wrap onto two lines on screens between 564px and 664px. Solved by reducing padding of icons to 5px instead of 10px to keep icons on single line on all screen sizes
-
H1 title would wrap onto two and then three lines as screen size reduced, expanding header and taking up too much screen space. Changed font size to use 'vh' instead of absolute size so that text would scale better with screen size; this worked to make the font size more responsive for smaller devices, but made it too small for screens with greater width than height (i.e. desktops and any device in a landscape position). Finally changed to 4vmax to use the larger of vw or vh, which allowed a responsive one-line title size across all devices.
-
Google Mobile Friendly Test highlighted page loading issues with the Gallery page but couldn't identify what the cause of the error was. Presumably this is down to the size and quantity of images being loaded; so far, there have been no loading errors for the gallery whilst testing on actual devices and the page passed as mobile friendly so I don't believe there is cause for concern.
-
Testing on IOS devices caused gallery images to stretch massively; after some reading, this appears to be a known bug with no definitive fix. Tried several suggested solutions including setting height: max-content, using Bootstrap .img-responsive, setting container to display: flex and using align-items: flex-start. Settled for simply setting fixed max-height of 350px for all images as a workaround for IOS devices as shown below:
"As a busy parent with a full time job, I don't have time to build terrain for myself. I want to use what time I have playing the game, not building scenery."
As the user enters the site, the site purpose is immediately presented to make it clear that this is where to get terrain built, and the 'Get in Touch' presents an immediate option to contact the business quickly and easily in order to book commission builds as speedily as possible.
"I wouldn't know where to start building my own scenery. I'd much rather get someone else to make whatever I need and buy it ready to game with."
The user has ample opportunity to view existing work across multiple locations on the website, making it much easier to find something they're interested in and see what's on offer. They can then easily access any of the available buttons and links to access the Contact Form and make a project request.
"It costs just as much money to make my own terrain as to buy it ready-made, so it's just quicker to get it made for me."
Users can see what work has been done in the past through the Gallery page and other locations, with any questions about materials used and build time found on the About page, before quickly and easily accessing the Contact form to book work
"I'd love a full custom built gaming table, but wouldn't have a clue how to do it myself. Normally I'd buy scenery at shows but with Covid going round there are no shows happening, and it's really hard to find places to get custom boards made online."
The website is cleanly presented and easily accessible to all users, as well as presenting clear information about what services are available firstly through the Home page hero image/jumbotron and with further in-depth information presented across the Home page and About page. The Gallery allows users to see past work in lieu of viewing in person, and the Contact page presents a simple method of getting in touch and enquiring about the services offered.
- Go to GitHub and sign in, or sign up for an account.
- Once a Github account was created, I opened a new repository by clicking the green button "new". To create this project, I used the Code Institute's student template.
- Click on the green "gitpod" button to open Gitpod, a cloud-based version control software or IDE, which was used to write all code for this project.
- It was then pushed or saved in the terminal to Github where it is stored in a repository
- Under "Settings", scroll down to Github Pages and select "Master Branch" in the Source section, to where the page was automated.
- Once this was selected, the project was pushed to Github pages and the URL is then displayed
- To access the code, it can be run locally by either selecting "clone" which provides a URL to use on a local machine or "download" to download the zip file on to a local machine.
- The ability to add partial borders to the navbar was made possible thanks to this guide from Daniel Sellers.
- 'Grow Shadow' and 'Icon Grow' hover effects courtesy of Hover.CSS by Ian Lunn.
- Favicon added with help from this article written by Erin Glass.
- My Mentor, Nishant Kumar, for his guidance throughout this project.
- The Slack Community for their help and support.
- My wife and son for their endless patience, support and lending of devices for testing!