The

Inspiration

I enjoy taking notes by hand, having sketch paper within reach, and letting my mind and hand explore a page while I think through ideas. Recently ran out of pages in my Action Method Dot Grid book, when I went to go re-order a new one I felt inspired to do an exercise in site design and revamp their site.

This is 100% concept/spec work that was not commissioned or asked for by anyone affiliated with Action Method.

The

Process

Since this was entirely speculative, I had no real world user data or site usage data to go off of. I followed my gut and made choices based off what I, a user of their product, would rather have as the shopping experience to be like.

Below I’m going to review two of the most important, in my opinion, pages of the site. I’ll break down what stands out to me as a user, and start addressing the underlying issues with the design.

The original content and design

Typography
The type of the word “SHOP” is large, really large. My first action was actually to check and make sure that i wasn’t zoomed into the page, but that was true for most of type on the site, really large and as such made it quite difficult to read or understand in which order I was to read information or infer what was important.¬†

Color
The blue color seemed off to me, in fact it was only used as a type color, not used in any of the marketing material, footer, or product itself.

Product Representation
The photos were very consistently photographed, and displayed, they did a good job here laying out the site for the most important thing, their product.

The original content and design

Typography
You can really see the struggles I had with the typography on the home page follow me into the product listing page here. the weight and size of the description makes me want to read it first instead of seeing other important information first. Personally I’d like to see more emphasis on the “Add to Cart” button and the product title, with all their products being so closely related i feel that it’s easy to land on a page for a product you didn’t intend to.

Color
here you can see the inconsistency in the coloring, the faded blue/grey for selected options, the black add to cart button and then the blue from the header in the body copy test. The is an issue of contrast in the text that will need to be addressed to ensure balance.

Products Representation
The photos are great here, each product has maybe 5 or 6 great consistent photos for each product that bring the whole site together. I’ll want to make sure that remains the same through the reworking of the site.

Redesigned Action Method Home Page

Content
Not every user that lands on the site is going to know 100% what they are experiencing or coming into, with this in mind I thought that instead of going straight into the “shop” feature of the site I could spend a portion of the page converting or educating the user base to decrease bounce rates on the site. I also wanted to display the entire product line up, since the products are so similar it can be difficult grasp the subtle differences between the products in terms of style or size. I didn’t want to cut the sales experience on the home page out entirely so I included a featured/popular product call out with a direct “add to cart” feature.

Typography
I spent a bit of time here really wanting to make sure you read items in the correct order, you felt compelled and lead to each section based on weight, size, and the treatment of the type. This is especially true since I added more context and information on the home page than was originally there.

Color
I ditched the blue entirely, I felt that it distracted from the product as well as didn’t create enough contrast in color to allow the user to infer what each color meant. I also ditched the blue undertones from the grey to create a true neutral grey that also for the user to know what is secondary.

Products
I did decide to group all of the products together into a hero shot, this allows all the of the products to have a little bit of the lime light all landing above the fold and making sure that the user gets a full look at the variety of products that the brand offers.

Redesigned Action Method Product Listing Page

Content
For this I kept it more true to the original, I wanted to restructure and rearrange just a few things, like the social share, I wanted the share button to be pretty high up for those interested in sharing a link to this product. I also separated out the “details” and “product specifications” into a tabulated experience to keep everything above the fold. I wanted the “Add to Cart” button and the product title to be more prominent.¬†

Typography
Same as the homepage I spent time reworking the visual and functional hierarchy of the page to ensure that the user read what they needed to at the appropriate time

Redesigned Action Method Homepage - Add to Cart Button Animation