Web Design for Warranty Protection Plan Company

We wanted to share with you some background on a branding and web design project we completed for Protect-O, a specialist warranty protection plan provider.

Branding

We started off by looking at a logo for the business. Joel, the company director, wanted a simple logo that was as clean as possible. They really liked the Amazon arrow logo, which for them provided a clear message that whatever you order from them you’d get ‘fast’. The company name ‘Protect-O’ was inspired by their copywriter, who devised the copy around a kind of ‘super-hero’ idea conveying that they could ‘Protect-O’ all your gadgets! We incorporated the moving arrow idea into our initial designs for the logo and came up with 6 initial concepts for the client’s review (see below). logo-design-warranty-protection-company From these first designs they selected one to proceed with, but just wanted us to make some changes to the font and experiment a bit with capitalisation and try out some different ‘green’ colour options. They also wanted us to integrate the ‘O’ of Protect-O into the first part of the name so the words joined up more. We produced some more variations and this was the final logo Protect-O selected. logo-design-insurance-company

Website Planning / Design

Once the logo was signed off we had a clear direction in place to move ahead with the website. From the client’s brief, we established that they wanted their site to be clean and sharp with a ‘neat and tidy’ layout – but they gave us quite a bit of freedom with the design. The client’s completed brief questionnaire gave us most of the information we needed for the site but we needed to clarify the sitemap and a few things to include in the site (see below). The agreed sitemap consisted of:

  • Home
  • About
  • How does it work
  • What we hear
  • Category pages for all the items they offer warranties for
  • Shopping cart
  • Checkout
  • Track your claim / Report a claim Area

We clarified a few ideas for other things they wanted to include:

  • carousel style navigation with iconography to represent various categories they offer warranties for
  • the ability for videos to be included easily on various pages
  • a live chat area
  • inclusion of a phone number for visitors
  • social media (Facebook, Twitter, YouTube)
  • legal notices, privacy & terms

Before we started work on designs for their website though, we created wireframes for the main site pages – we do this for all of our projects. We started by producing wireframes for the ‘Home’ and ‘Category’ pages, followed by the ‘About’ and ‘Checkout/Thank you’ and ‘Track / Report Your Claim’ pages. After just a few revisions the wireframes were signed off by the client. Here’s the wireframe for the homepage and the category page. warranty-protection-company-wireframes-2 warranty-protection-company-wireframes-1 We were then able to move on to the design phase.

Creating the web design concepts

We began by creating the ‘homepage’ design, which set the tone for everything that was to follow. The client REALLY liked it, which was great! They just thought that the text and icons for the categories in the top bar should be more contrasted. We tweaked this and the homepage was finalised (see below). web-design-warranty-protection-company The design phase as a whole moved really quickly as we produced more concepts for the About, Category, and Checkout pages. We also looked at some of the logged in pages, like the area to view the details of your protection plan shown below. web-design-warranty-protection-company-2

Web development

From the start the client didn’t want this site to be responsive (responsive design was in it’s infancy and Protect-O were keen to get the site live as quickly as possible). Having said that, we knew they were likely to need a responsive site in the future, so we made sure to build the site on a framework that would enable us to make it responsive relatively easily in the future. As predicted we got the go ahead to make the site responsive recently (March 2015). After the initial build the client subsequently needed to make a few more changes to the site, so we worked with them to add in a few new minor elements to the pages. You can take a look for yourself at the completed Protect-O website by clicking the button below. We hope you like it! Visit the Protect-O Website

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?