Take a Hike Outfitters

Multiple device mockup of Take a Hike Outfitters site

Overview

An e-commerce site for an outdoor gear store built using WordPress and the WooCommerce plugin.

Collaborators

Natalie Ratayczak, Jessica Laporte, Marko Vukmirovic & Adam Hauck

Tech Stack

WordPress iconWooStore iconPHP iconjQuery iconSASS iconAdobe XD iconGitHub icon

Role

Web Designer & Developer

My team developed desktop wireframes in Adobe XD focusing on a clean design with ample whitespace and feature images promoting a fun, active, outdoor lifestyle and the products to help you live it.

screenshot of site

I created a mini style guide detailing an earthy, deep green and rust colour palette that complimented the company logo.

screenshot of site

We decided on the font combination of Teko and Montserrat as it perfectly represented this outdoorsy brand.

screenshot of site

Using the Advanced Custom Fields PRO plugin, I created ACF fields to output the content on the Home and About page. All products are classified by category of Camping, Climbing, Hiking, Watersports, Featured Products, Bundles and Workshops and I linked the images on the Home and About Page to the products page displaying all items within that corresponding category.

screenshot of site

Using The Events Calendar plugin I created four free weekly workshops teaching people essential skills to thrive in the great outdoors.

screenshot of site

I styled the Home and About Page using CSS grid layout and made it fully responsive from mobile to desktop.

screenshot of site

Reflection

Working as a team with multiple developers was excellent practice in consistent, clear communication, time management and organization. My team diligently used Asana to track our tasks and deadlines, Slack to regularly communicate with each other since we worked on our respective tasks remotely, and Git for version control. Rather than divide up the tasks between design and development, each team member was responsible for both design and development elements which allowed us to further develop our skills in both disciplines and gain valuable experience working on all aspects of the build process as a team. We overcame the challenge of 4 developers styling a single site through clear communication and dividing up our respective components into SASS partials to minimize merge conflicts.