Kevin Powell Design

The BeerBug Website Redesign

Click here to see the live site

 

A look into my approach

beerbug-casestudy-mockup

The old site

The BeerBug’s old website had the right idea. The laptop showcasing important info was a nice touch, and the two important steps (order now and sign up for the newsletter), stood out. Sadly, they were bogged down by hard to use navigation, and a lack of overall direction.

Instead of being told what the product is, the most prominent message on the landing page was that a new version of the product was out, with a link to another page. For someone new to the page, they aren’t likely to click a link to another page before they find out what’s going on, and at this point, they might have already given up.

Old and new versions of the beerbug website

If they hadn’t given up, they would reach the picture of a laptop, which was great, but the text next to it was way too much. The message needed to be condensed down.

Also, if a user had decided to dig a bit deeper and see what all of this was really about, they might have given up thanks to a frustrating navigation (why does the logo on the left link to the community, and not the homepage, and what the heck is the book next to the “order” button???)

The Hero Area

The BeerBug website redesign case study - header area

My main focus for this project was to make tell a user what the product does the second they land on the homepage. Any homebrewer would instantly know the value of this tool, if only they could easily find out what it actually does!

We went over a few different approaches on the visual that would accompany this text, and I was fairly adamant that they stick with something similar to what they already had. Some people on the team wanted to see a physical photograph of the product itself, but the value isn’t in the gadget, but the information that the gadget gives the users. On top of that, not only does give the user awesome information in real time, it also comes with very nice, easy to understand graphs. This was true value of the BeerBug.

Social Proof

The BeerBug website redesign case study - social proof

After this, I followed up quickly with two forms of social proof, first with logos of companies which had featured the product, followed by a quote from a user showcasing its value. I started with the logos, as gadgets can pop-up all the time, and it’s nice to know that this one has some real and trusted names behind it.

Updates & Brewing Right Now sections

beerbug-casestudy-03

I condensed the “Brewing right now” section, as it was taking up a lot of space for no good reason. We can see all the information very clearly at this smaller size, and if anyone is really interested, they can always click through to see more details.

The BeerBug website redesign case study - signup area

I added a section “order” and “find out more” buttons here to help lead users on to the next step, and followed all of that up with the newsletter subscription box, as it wasn’t of big importance to them anymore.

The Navigation

One of the most important things for me to tackle was the navigation. I simplified it, avoiding the use of icons and making it easy for users to follow and understand. I also highlighted the “order” button to help draw the eye, and make it easy for someone to order even once they’ve navigated away to another page.

The BeerBug website redesign case study - entire website

Click here to see the live site