Wawas Woods is a small business set up to create custom made wooden items. The site is targeted at the prospective buyer who is in the market for something tailored to their exacting requirements. Wawas Woods will be useful to help guide people through from project inception to delivery.

Welcome to the journey through Wawas Woods

• User Experience UX
  • User Stories
  • Wireframes
  • Site Structure
  • Design Choices
  • Typography
  • Colour Scheme
• Features
  • Home
    • Navigation menu
    • Gallery
    • About-us
    • Testimonials
    • Footer
  • Projects
    • Dolls Cots
    • Height Chart
    • Walker
  • Inspiration
    • Elm
    • Oak
    • Elm
  • Contact Us
    • Contact details
    • Location map
    • Design Query form
  • Form Confirmation
  • Future Features
• Technologies Used
• Testing
• Deployment
• Credits
  • Content
  • Media
• Acknowledgements

• As a user I want to be able to navigate through the whole site smoothly.
• As a user I want to understand the purpose of the site upon loading it.
• As a user I want to easily be able to contact Wawas Woods for more information.
• As a user I want to see existing pieces of Wawas Woods' work.
• As a user I want to know more about Wawas Woods.
• As a user I want to know how other peoples' experiences with Wawas Woods has been.
• As a user I want to connect with Wawas Woods on social media.
• As a user I want to know the process of converting some wood into a finished project.

Back to top

The wireframes for Wawas Woods were produced in Balsamiq. There are frames for a full width display and a small mobile device. The final site varies slightly from the wireframes due to developments that occured during the creation process.

Back to top

Wawas Woods website has four pages. The home page is the default loading page, projects, inspiration and contact pages are all accessible primarily from the navigation menu. There is another link to the contact page in the 'About-us' section to give the user some guidance to the next step of the journey. On every page there is also a 'back to the top arrow' in the bottom left corner.

Back to top

• Typography

  The fonts chosen were 'Caveat' for the headings and 'Lato' for the body text. They fall back to cursive and sans-serif respectively.

  • 'Caveat' was chosen for the headings to give the user an inital welcoming feel. The cursive style generally feels more inviting and less intimidating for the user than others.
  • 'Lato' is used for the body text as it provides a nice contrast to the cursive whilst being easy to read for all.

• Colour Scheme

  The colour scheme eventually chosen is one based on green and off-white. The colour contrasts with the wood colour in many of the images. Green traditionally gives the impression of energy, safety and growth. This is something that Wawas Woods can hopefully pass onto the user.

Back to top

Wawas Woods site is set up to be welcoming and easy to use. It contains many features that the user would probably be familiar with, such as a navigation bar and contact form. The overall feel of the website is intended to be inviting and not intimidating to encourage the user to explore further.

• Navigation Menu

  • Sited at the top of all the pages in the site, it is fully responsive and contains links to all the pages of the site to enable ease of navigation in one convenient location.
  • The logo is clickable with a link back to the home page for enhanced UX.

Back to top

• Gallery

  • Located on the home page beneath the title section. It was intended to make the title section relatively plain to enable a focus on the images in the gallery.
  • A responsively styled grid of images of past projects to give the user an idea of what is possible.

Back to top

• About-Us

  • The About Us section lets the user know what Wawas Woods is and who we are.
  • The combination of a family picture and the text will draw the user in further by instilling a confidence that the project will be taken care of by a small family business.
  • An inbedded link to the contact section in the text will help the user navigate quickly to the next step of the project process.

Back to top

• Testimonials

  • The testimonials section provides the user with some feedback from previous clients. There are three testimonials displayed giving a name, project name and some text.
  • They are styled with a box shadow to 'detach' them from the site to instill a sense of impartiality in the user.
  • The testimonals will be updated as more recent testimonials become available.

Back to top

• Footer

  • Contains social media links. To enhance the UX the links open in other tabs.
  • The social media presence will help the user with their research into Wawas Woods and will also encourage them to connect with Wawas Woods.
  • To help the user with navigation on all devices a 'scroll to the top' arrow was added. It sticks to the bottom left of the screen at all times to give the user a quick and unobstructed way to the navigation bar. The arrow is semi-transparent with a light/dark contrasting border for use against all background colours.
  • The GitHub and LinkedIn social links are there for the educational side of this project. They would be removed if this site was deployed outside of this project.

Back to top

• Projects

  • The projects page give the user an idea of the recent projects that have been worked on. It also shows a number of different wood working techniques and finishes to help inspire the user's design.
  • There are images of the recent projects. To help enhance the UX two slideshows have been added to allow the user to see more images of two of the pieces.
  • This section would be updated periodically to reflect new recently finished projects.

Back to top

• Inspiration

  • The inspiration page is mainly there to demonstrate how a project starts and what is required to transform it into a finished project. It should inspire the user with the images of unfinished wood and get the user to imagine how that would look as a finished product.
  • It also contains a brief description of how the project would be constructed to give the user a rough idea of what goes on behind the scenes.

Back to top

• Contact Us

  • This section should complete the online journey for the user. It has a map (location of real life workshop not shown due to privacy reasons), address, phone number and email address details.
  • In case the user would like to contact Wawas Woods directly there is an e-mail link icon. It opens the user's default email provider with an email addressed to Wawas Woods.
  • There is a form that the user can choose to fill in. It has 5 input fields, name, email, address, callback and a textarea. The call back button lets Wawas Woods know if the user would like a callback.

Back to top

• Form Confirmation

  • This page confirms for the user that their details have been sent to Wawas Woods. For this project it validates the form only.
  • It provides a direct link back to the contact page as well as the normal navigation menu links in the header and footer.

Back to top

• A 'Shop' section for projects that have been completed and are ready for purchasing.
  • This would incorporate an e-commerce platform and an enhanced gallery page.
• An option to live stream the workshop.
  • Particularly of interest to those whose projects are underway.
• Introduce swipe actions for use on mobile devices for the project sliders.

Back to top

• HTML5 - provides the content and structure for the website.
• CSS - provides the styling.
• Balsamiq - used to create the wireframes.
• Gitpod - used to deploy the website.
• Github - used to host and edit the website.

Back to top

Please refer to here for more information on testing Wawas Woods.

Back to top

The site was deployed to GitHub pages. The steps to deploy a site are as follows:

1. In the GitHub repository, navigate to the Settings tab.
2. Once in Settings, navigate to the Pages tab on the left hand side.
3. Under Source, select the branch to master, then click save.
4. Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link to the Github repository can be found here - https://github.com/EwanColquhoun/wawaswoods

A copy of the GitHub Repository can be made by forking the GitHub account. This copy can be viewed and changes can be made to the copy without affecting the original repository. Take the following steps to fork the repository;

1. Log in to GitHub and locate the repository.
2. On the right hand side of the page inline with the repository name is a button called 'Fork', click on the button to create a copy of the original repository in your GitHub Account.

The method from cloning a project from GitHub is below:

1. Under the repository’s name, click on the code tab.
2. In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
3. In your IDE of choice, open Git Bash.
4. Change the current working directory to the location where you want the cloned directory to be made.
5. Type git clone, and then paste the URL copied from GitHub.
6. Press enter and the local clone will be created.

Back to top

• The font came from Google Fonts.
• The map is embedded from Google Maps.
• The colour palate was compiled by Colormind.
• The icons came from Font Awesome.
• The form validation idea came from a YouTube tutorial.
• The code for the Safari specific styling was inspired by an example on Stack Overflow.
• The inspiration for the Project page sliders came from this repository on GitHub.
• Balsamiq was used to create the wireframes.

• The photos all came from the developer, Ewan Colquhoun.
• The photos were compressed using Compressor.

Back to top

The site was completed as a Portfolio 1 Project piece for the Full Stack Software Developer (e-Commerce) Diploma at the Code Institute. As such I would like to thank my mentor Precious Ijege, the Slack community, and all at the Code Institute for their help and support. Wawas Woods is a fictional company but it exists in everything but the business title. Currently it is more of a hobby!

Ewan Colquhoun 2021.

Back to top