Embrace Pet Insurance 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.
Comments
I love reading about the thought processes of more experienced designers and how they affect the final result. So for this and your Digital Web article, thanks!
Jesse: thanks for another great post. I’ve noticed that you choose to do a decent number of design concepts, sometimes up to 6. I was wondering if this is something you choose to do on your own or due to client input on early comps?
I’m always amazed on how different you make each of your comps and how well executed they are…. great job!
I always enjoy checking out your wireframes process. I found your insight on the client and process issues you faced particularly insightful—it’s always interesting to learn how another designer handles restrictions or solves problems. Embrace ultimately got a fantastic and highly usable site :)
Thanks, that you are sharing your design processes, respect. I could learn a lot. They are structured and comprehensible, I think the clients like to play with you.
Do you get a dog now?
Hi, I like this design. I like the way you play with those dropshadows. Your style is exactly the style I like. That’s why your work helps me to get inspiration sometimes (no – I’m not ripping/copying, just being inspired by the professional way you use things).
I think the Embrace website is going to be on of the nicest pets-site on the web ;)
Great work. What typeface are you using for your headline? It looks similar to Proxima Nova, one of my current favs, but something tells me it might not be…
Harold: This particular project had a fairly healthy budget, so I didn’t feel constrained to just do a couple of comps. And yes, they were implemented because of client feedback. What I’ve show here is just a sample as well… I think the wireframe 2 “series” ended up ending at the letter g!
Christoph: No free dogs with this project. My cat is thankful about that.
Joost: That’s the way I learn as well… totally understood.
Ty: You’re right. It’s called Gotham, and you can find it here.
What program do you use to create your wireframes?
Great work, Jesse. You and Cameron really knocked out a great design for this site, and I really enjoyed looking through your wireframes and mockups to get an idea of how you went about building the final product.
I love the way you did the navigation. Rather than hide secondary links under a drop-down menu hierarchy, you’ve got all the links right there, but in a very nicely organized manner.
I’m definitely going to keep an eye out for more insight into your design process, as I really enjoyed this one.
Patrick: I used to use Illustrator for wireframes, but have been moving to InDesign, as it’s got quite a few nifty features for larger projects. I’ll hopefully post on that someday.
Great Writeup! I love the grid, and I particulairy like the Quote pages step graphics with the dog running and jumping with the final step catching the toy. It’s the little details in your designs I strive to achieve in my own, I’ll get there someday.
Thanks for the always inspiring work and insight!
Jesse,
I think you and Cameron need to collaborate on a book!
very nice indeed, look forward to the next write up
Hello Jesse nice job you did on the embrace project, same as the ellislab project, i love them both. I try educate myself on your design process. I once (long time a go) designed a layout for an animal themed website, of course the design process used was let’s call it primitive. What do you think about the layout?
Hi!
Can I post the comments in this site?
Thanks!
Hello,
What program do you use to create your wireframes?
Hi Jesse, I love how you show the steps you take to get to a finish project. It has taught me so much as a young designer. If I may impose on you for some advice I would apperciate it.
My job constantly ask me to design/layout web sites without hardly or any content. I tried to explain to them that is a backward approach that content drives the design but they do not seem to get it. What is the bet way to explain to them why content is needed to begin the design process? Or am I wrong with my approach? Thanks for your thoughts.
Hey Jason, I think there needs to be a good balance between content and design. I think you’re right that content needs to drive the design… but often I’ll find that even when the content is sent to me first, I’ll sometimes ask that it be refined or tweaked so that it fits into a design. Seems a bit backwards of me, but I think the best results happen when there is a good relationship between the content creator and the designer.
A new blog entry from you about your work and it always amaze me. Ofcourse, you and cameron have done FANTASTIC job together. I love the small and big ideas in the mockup and how nicely they are placed together.
I am eagerly waiting for the Expression Engine process though. (especially i wish to have a peek at the full size screen shots of the whole process )
Hey R.Bhavesh… did you see the EE process article at Digital-Web? I’m afraid that’s as detailed as it’s going to get :)
Ofcource i’ve studied the EE process thoroughly at Digital-web. What i actually meant is.. the process of EE in your usual style on this – 31three – website with the Full size Screenshots of the process. (it reads process coming soon ) so i thought.. its coming soon :).
Ah… sorry R.Bhavesh. I had forgotten that I had even put that on the home page. I’m going to link that over to digital web.
Sorry… The article for digital web is all I have time for at the moment, I’ll see if I can put together something more through in the future.
Great design! I really enjoy your work and processes you have put together. I was wondering how long it takes you to build a wireframe and also a design direction?
Great work Jesse, truly another example of fine craftsmanship. I am interested to know how you handle the initial seedlings of a project, more specifically, the proposal (or quote, if you will), and how you proceed from that point to the Wireframe process (and beyond).
Thanks for very interesting article Jesse. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings
Great work Jesse! Very informative post. Just one question though. On the launched site did you (or they?) use flash? Just wondering why you went that route?
“A like-able Miami police forensics expert moonlights as a serial killer of criminals who he believes have escaped justice.” More info: http://www.imdb.com/title/tt0773262/
Download Dexter Season 4 Episode 12 http://rapidshare.com/files/316306647/173518931.rar S04E12
Very good concept, I like how you convey the message.
The information here is great. I will invite my friends here.
Thanks
Help Wanted
Nicely done! It can be tough working with a client who has certain ideas already set in their mind and you as a designer know that some of those ideas need to either be rethought or completely thrown out. It’s great to see that the client trusted you and went against some of their “rules” because the final layout looks great! I especially like the quote pages and the dog illustrations in the step arrows. I love little touches like that!
Phil Coffman - April 10, 2007