WHO GIVES A CRAP | TOILET PAPER PRODUCT PAGE

I began by taking a look at your page's information architecture. I didn't think it was bad, so I decided to run with it. However, I did condense some parts that I thought were redundant. For example, at the very bottom of your current page, you have a graphic that tells the buyer they can buy in bulk and save money. But it is also listed under "Our Other Feel-Good Products" just above it. So, I combined both into one big "Buy In Bulk" option. I also combined the icons right above the "Our Other Feel-Good Products" that detail all the cool things you do with the larger section at the top where you had short paragraphs on how you do good for the earth, people and bums. I also noticed you had an email running up top for support. I created a link in the nav bar to account for it. 

I wanted to create a very visual experience, packed with beautiful imagery and video, detailed in the wireframes below. Naturally, big boxes with a large X represent images or places for video, long gray rectangles places for copy, and all blue items are actionable. It's a bit of a scroll, sorry! Your nav bar looks like a sea of links in the wireframes, right? No worries, this all condenses and comes together during the design phase. 

 
 

So, what's up with the little shipping and guarantee boxes to the left of some sections? These are controls on demand and expand to share more info. Personally, Im a bit annoyed to wait until checkout to calculate the cost of my shipping. So, I figured the little shipping box on the product currently being viewed can expand, provide a field for users to key in their post code, and let them know what's up right there. Naturally, the result will stick around right next to the product info.

I condensed both of these actions, how the guarantee and shipping options expand, into one image displayed below. For both controls, clicking anywhere outside will naturally collapse them again into their initial state. 

 

I also noticed your floating social media widget. I placed it up top and turned it into an on demand control as well. When a user wants to share, it expands to provide your social media outlet options. Once the user clicks on the one he/she wishes to use, it lets them fill it in up above. These actions are represented in the wireframe image below. You'll also notice that the shipping control condensed back to display the shipping cost, in this case, free. 

 
 

I noticed you offer a subscription option. Instead of a drop down, I turned all of the options into big, easy to click buttons. After buyers decide they wish to subscribe and click on the subscribe button, they'll see the 3 options you offer displayed as large buttons up above. After they make a selection, the subscribe button changes to display their selection. 

 
WGAC_04.png
 

After a bit of noodling around with my pen in my beat up sketch book, I realized that even thought I thought the page would look pretty good, it could use a bit more "fun." It would be easy to use, inline with all usability heuristics, etc., etc.. But would still be, pretty similar to other shopping experiences. I noticed the face of your products is characterized by fun patterns. Can users pick and choose from them? Maybe they want all sprinkles and no dots? So, I reimagined the top segment of the page and arrived at what the image below reflects. It's a bit more dynamic and fun.

Each button houses the different options users can tweak, like how many, what kind, and how often. I like big buttons and think they scale beautifully on mobile, so I created a big, chunky buy button to complete the purchasing process. 

 


Mobile is king these days, so I built both versions to scale down easily. They are primarily made of big blocks, making it easy to turn them into responsive sites. What I have in mind for mobile is displayed in the wireframes images below. 

 
 

I know wireframes can be a bit abstract and can easily turn into different directions in each individuals head. So I put together a quick mockup of what the first iteration would look like on an iPad, to give you an idea of whats going on visually in my head. The design banks heavily on imagery so I was going to need a few, even for a quick mockup. I used some of the product shots Danny sent over and looked for a few more shots on the WGAC website. But, since they had text combined into them, I decided to just build a couple placeholders instead. None of my sketches seemed to be just right and it didn't make sense to continue building them since imagery ties so strongly into branding and I was steering away without having the right conversation first, so I dropped in what I had. We probably need to say something other than "48 ROLLS" up top. But you get the idea. You can see some of the sketches of the placeholder images below too, of toilet paper type and patterns, which were fun to build. 

I needed icons for all the different options built, like shipping and the guarantee, so I made a few quick sketches too. Because the brand copy is kinda funny, I decided to go with something quirky and arrived at the characters below. I played around with brightening up your color palette too and arrived at a couple solutions too, like the brighter purple-blue and blue hue used is some of the sketches. 

 
 
 
 
 
Mockup_Ipad.png

And that was about a day of brainstorming! However, my friend was passing by and looked at the toilet paper king and mentioned a plunger staff would have been a cool addition. Lol. Cheers!