In June & July 2015, between my university graduation and an extended trip to Europe, I had time to take on a freelance project. I approached Tink & Tank Coolers, a student-run startup out of Missouri. After seeing their website, I knew I had a lot of help to offer them. I took on the challenge of completely rebranding the company and redesigning their website in just under two months.
First, I'll show you some before-and-afters. Then, we'll dive deeper into what I did and how I did it.
(Click the images below to enlarge.)
I also improved their website's SEO, which moved the them from the bottom of page 1 in Google search results to the top of page 1 in just a few weeks.
The first steps I took to achieve this transformation were to conduct research and complete brand analysis.
First, I went through each and every page of Tink & Tank's website and recorded what they were doing well and where opportunities for improvement existed. I analyzed each competitor's website and social media profiles to see what competitors might be doing better and to see where the client's strengths were.
Next, I immersed myself in the mind of the target audience. I joined several Facebook groups about cooler painting and the cooler painting process. This allowed me to see what's important to a potential customer, how they use the product, what aspects of the product would be most appealing to them, and gave me an understanding of how they think in general.
I put all of my findings, suggestions, and questions into the document below. Then, in a quick call with the client, I was able to ask specific, key questions to fill in the blanks.
After I identified the target audience and the wants & needs of the client, the next step was to overhaul the visual identity and website design.
The existing website suffered from a lack of visual hierarchy and wasn’t visually linked to the brand. This caused confusion and mistrust from users. The solution was to visually connect the site to the brand by using one main color, as well as re-organizing the website structure.
Following my research on the target demographic for Tink & Tank, I decided to choose a soft, pastel salmon as the brand’s main color — appealing to the 18-24, female demographic who would be the typical customer, purchasing coolers to paint for fraternity formals.
Next up — the logo. The existing logo didn’t convey what Tink & Tank does. I updated the logo with the brand’s new main color, a cooler, and updated typography that appeals to the target demographic.
All these pieces added up to a more cohesive brand, a better user experience online, and more appeal to Tink & Tank’s target market.
To create a better user experience, I completed a website overhaul for Tink & Tank.
The first change I made was to fix their product pages. This is the most important part of the website because this directly affects sales. It has to be easy to navigate and visually appealing. They had a page for each product in the navigation bar, and these product pages were not connected. I consolidated this into one "shop" page, featuring all of their products in one place.
To accomplish a more professional look, I also had to clean up their product images. I did this by using Adobe Photoshop to remove the backdrop and correct the lighting in the photos. I also made all of the photos the same size so that alignment would stay consistent on the product page.
An example of a before-and-after can be seen below.
After updating the Shop page, I consolidated the rest of the navigation bar. I wanted to ensure a clean, professional experience for the user. I created a single page for the contests that the client offers, and I also created a single Frequently Asked Questions page that lists details about shipping, returns, production, and more in a Q&A format.
I modified the website HTML to move the utility navigation bar to the top right corner of the page, and added social icons so that customers can easily connect with Tink & Tank on social media. I also removed the visible code in the top left corner of the page.
Next, I turned my attention to the footer. The footer had a lot of unnecessary modules and took up a large portion of the page. I removed the newsletter sign-up module because Tink & Tank does not offer a newsletter. The rest was just placeholders and repetition of what was in the top navigation bar, so I removed it, leaving the secondary navigation and copyright information.