Cedarside Coach House

A dynamic website built on wordpress for a cute and cozy vacation rental located on BC's very own Sunshine Coast

View Live
Image of cedarside responsive website displayed on desktop, tablet, and mobile view

The Project

In the TWD program at BCIT, the final project required working within a team of three others to create a website using wordpress for a real life external client. The business that we worked with was called Cedarside Coach House - a vacation rental located on the beautiful Sunshine Coast. Although they had an existing static website, it had not been updated for over a decade. Therefore, we decided to start from scratch and completely redesign the website into a fully functioning, responsive, and dynamic platform that would allow the client to change content by themselves whenever they needed to in the future. This project was a great opportunity for us to enhance the skills we already had from the past several months. It also pushed us beyond our comfort zones and helped us gain experience in dealing with both the client, and fellow workmates. Overall, at the end of the project I was much more confident with using content management systems like wordpress as well as coding in teams using version control systems such as GitHub.

Toolkit

  • HTML
  • SASS
  • JavaScript
  • Php
  • Wordpress
  • Illustrator
  • Photoshop
  • Github

The Process

Our challenge here was to take what content the website had now, and update it so it would be more clear, comprehensive, and ultimately user friendly. Using the UX design methods we had learned in class, we created content lists, an information architecture, and wireframes for both desktop and mobile. By organizing the content first it was easier to communicate with the client and discern what their needs were for the pages and content of their website.

brainstorming wireframes for Cedarside Coach House
wireframe sketch for Cedarside Coach House in BCIT tech hub

The Design

For Cedarside, the client wanted to have a clean, simple look, while maintaining a calming earthy vibe. We wanted to design something that would capture the charming feeling of Cedarside as well as the Sunshine Coast. By avoiding overly modern fonts, and choosing colors that reminded us of the natural surroundings that make up this area, we were able to successfully create an inviting atmosphere that would draw people in and give them a taste of what they could experience if they took a trip to Cedarside.

Colours

Logo

The Client wanted to keep their orgininal logo, as they felt it was suitable to their business and had sentimental value. They were willing to have adjustments made to the logo, however the only file available was a small jpeg file. Using illustrator we were able to trace the image and create a new svg file of the logo. Not only did this make the illustration much more crisp, but it also gave us the ability to change the shape and give the logo a new color, all while keeping the original look that the client wanted.

The Development

Since we were building a custom theme for our client on wordpress, we spent a lot of time working in functions.php creating custom post types and taxonomies as well as building other features such as adding image sizes.

code screenshot of a custom taxonomy

One of our custom taxonomies in functions.php

code screenshot of creating custom image sizes in wordpress functions code screenshot of displaying image as array in php

Creating custom image sizes and displaying them as a responsive image using the image as ID feature

The Result

In the end we were able to create a clean, responsive website that appropriately reflected the feeling of our client's business. Another advantage is that because we made the site dynamic, the client will have the ability to change content wherever needed or added images to the gallery.

Before

screenshot of cedarside.com before

After

screenshot of cedarside.com before