Embrace Pet Insurace Process
A few weeks ago I gave a behind the scenes look at a project called Embrace Pet Community. What I didn’t mention then was that this particular project actually involved two different websites, and also marked the first (and hopefully not last) time that I was able to collaborate on a project with Cameron Moll.
View Embrace Pet Insurance Process
The wireframe portion of this site went fairly quickly. Embrace wanted a simple three step process (Learn, Compare, Get a Quote) to be used, as well as a few other standard items. The first wireframe was a bit visually awkward, but the other two had enough good things going for them that we felt comfortable moving into the design phase.
The design phase of this project proved to be a bit difficult for me. The branding guideline document I was working with felt a bit restrictive at times and clashed with my own design instincts, and left each revision feeling “not quite right”. For instance,my first concept didn’t fly because the guidelines stated that all photos should be in sepia, and the only other colours to be used were black, red and white. When I changed this mockup to fit the guidelines, the design ended up falling flat and looking rather bland.
Revisions 2a/b used client supplied photos that fit the description of the branding guidelines, but didn’t quite have the spark needed to carry the design. Concepts 3 and 4 were an attempt to insert some colour into the design, but again… the photos just weren’t doing it and didn’t fit the guidelines. I still kinda like version 5, if only the puppy didn’t look so darn scared!
Thankfully I had some help on this one. I asked Cameron to come up with a single mockup to act as a “wildcard” which would give the client a slightly different design perspective besides my own. I’m glad I did. After getting him up to speed on the branding guidelines and client feedback, Cameron suggested that he should break some of the “rules” in order to make sure that Embrace would be truly getting some different ideas.
The first client “rule” that Cameron broke was that the home page needed to have 3 evenly weighted sections for “learn, compare, and get a quote”. By placing the compare info onto a separate tab, and summing up the “learn” section with a single button, he was able to open up the layout quite a bit. This made room for a generously sized image and quote. The second rule broken was the colour photograph he used. Unfortunately, I can’t find his original mockup with the colour photo, so you’ll just have to take my word that it was his idea to push this through. The photo itself was absolutely perfect, and ended up being the one that Embrace decided to go with.
After Cameron had successfully injected new life into the site by finding the perfect photo and opening up the layout, I simply made some final tweaks that mixed a little bit from each of our layouts into one. After a few small revisions, this design got the stamp of approval.
