COZY CABINS

Adobe XD | Photoshop | WordPress | WooCommerce | Google API

Cozycabins is a multi-page e-commerce website built for a renting cabins that offers online booking. I worked in a team of four to build a WordPress custom theme for this website. I took on the roles of project manager, UX designer, production artist, and front-end developer.

PROJECT GOALS AND REQUIREMENTS

The primary goal for this project was to provide a seamless and automated online booking functionality online for the booking cabins. Online booking is the primary CTA, to include testimonials from past customers, and to display different tour packages and highlight their differences. From a technical standpoint, the website needed to be built using WordPress so that the client could easily update the site as needed after delivery.

    Research

    After receiving the brief, my teammates and I began by researching other rental cabins with a similar homey, friendly, welcoming vision. Once we collectively decided on our top five websites, we prepared our website needs analysis with questions to ask our client during the discovery meeting.

    Planning

    After the disovery meeting and further market research, we moved onto the content planning phase. Once we decided on what content would go on each page, we created the wireframes.

    Wireframes

    Wireframes were created in Figma. The wireframes are based off of what was created in the site architecture and content plan. First we created the mobile wireframes and then went to desktop. After the completion of the wireframes we found what WordPress pages would correlate to each section of the wireframe page

    Home Page

    wireframe of home page

    Booking Page

    wireframe of home page

    Booking Page Continue

    wireframe of home page

    FAQ and Contact Page

    wireframe of home page

    Gift Card Page

    wireframe of home page

    Cabins Page

    wireframe of home page

    Single Cabins Page

    wireframe of home page

    Our Friends Pages

    wireframe of home page


The design of the website has a friendly and home-made baking feel, while still remaining clean and modern. Colours have a balance of warm and cool tones. Teal adds a pop of contrast against the neutral and subdued colours.

ACF fields were created to take full control of the WordPress back-end and tailor the content editing experience around the website's needs.ptions pages were created to dynamically output global, header and footer content not attached to a particular post or page.Through media queries and a mobile-first approach, the website is responsive for desktop, tablet and mobile devices.

As with most collaborative projects, communication and team work was key to our ability to stay on track and work efficiently. We were able to settle into a work routine that worked for all team members: our daily morning check-ins ensured we were able to help each other if needed and working together over Zoom call allowed us to communicate any changes that were necessary immediately. This meant we spent very little time stuck on issues and were able to keep up to pace with our schedule. Having a solid and thorough development plan also played a large role in streamlining our process. It took some time to put together, but the result was a clearly laid-out and reliable plan we could refer to at any point during the development process. This saved us a lot of back-and-forth and was absolutely integral to our process, and is something I will refer back to in future projects

Back to all Projects