Murdoch's Ranch & Home

Murdoch’s is in a transitional period with their website. They know there is room for improvement on their site, but they are also trying to live within a budget that allows them to keep the business running. A few of the projects they tasked me with was to help transition the site to a simplified smoother UI/UX for their customers as well as help draft up the first attempt at a Design Guide (so their design elements are consistent sitewide).

  • Role Web Development | Content Page Creation
  • Date September 2016 – March 2017
  • Type HTML, CSS, JS, UI/UX Design | Development
  • URL www.Murdochs.com
Tasked with redesigning the Murdoch's Jean page, I decided that a block design with the jean logo's was the best way to present multiple logos in a small area. Because this page has the Blog articles attached to it, the men's and women's jeans pages went without the articles. I combined the bold section headers with the lifestyle imagery which I felt represented each section well.

View Page
This time I was to redesign the men’s jeans page. The page wound up getting fairly long because of the headers and individual jeans options. I went with a header that smooth scrolls down to each section. I used a few of the elements from the old page to give it that familiar feeling but updated it with some hover over effects and updated the button interactions.

View Page
Following the men’s jean page redesign it made sense to redesign the women’s page with some of the interaction elements that I used on the men’s jeans page. I didn’t want to loose the softer feeling of the original page so I kept some of the header elements and the softer color palette.

View Page
This project from beginning to end was exciting; I went into the project with this concept of sliders that would reveal each layer of clothing. I started with the bottom layer, and each image layered on the covering layer until I had built up the entire outfit. By the time I was finished with the campaign I showed it to the rest of the team and got very positive feedback about the sliders.

View Page
The frequent buyer page wound up very different from my original mock ups. I started to build the project, then gathered team feedback. My original idea's for the sections were confusing. My second iteration of the section headers cleared everything up. I had a very specific idea for the header, I wanted a line of pets looking at the "Get The Scoop" logo we were using as the tagline for the campaign. I was happy with the end result of this project.

View Page
I was looking at the DeWalt's homepage for idea's to use for this campaign. I noticed that they used quite a bit of angles for each section on their page. I decided that carrying over the look and feel of the DeWalt pages on our campaign would help support DeWalt branding as well as help our campaign feel familiar

View Page
I wanted to add some fun to our 404 page. The original 404 page was a droopy eyed hound dog picture that just said sorry we are unable to find your page. I found a picture of the Murdochs mascot and couldn't believe nobody had tried to animate her. I jumped into Sketch and drew up Norma, the cow, I coupled that with a CSS animation that made Norma bounce giving the sense that the would giggle as you hover over her. I noticed that nobody had utilized the space to try and redirect anyone once they found the page, so I added links for Home, Contact Us, and find a store as well as some popular categories on the site.

View Page