Creative services for the design-challenged developer
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.
Hello, my name is…
Jesse Bennett-Chamberlain, a stay at home designer from Grimsby ON, Canada. To get in touch use the contact form.
Lovely work from 10am.
Terminal method to disable shadows in os x screen window captures.
Thanks for the interview Geof! Man I need haircut.
A New Day for Jason Santa Maria. Very very nice redesign rethinking.
Authentic Jobs has been donating 1% of their revenue to help entrepreneures throughout the world through Kiva. When the loans get paid back, they are re-invested back into more loans. Check out the Authentic Jobs overview page at Kiva... very inspiring.
Help Wanted
Recent openings posted at Authentic Jobs.
Idologic Hosting
I've been with Idologic since January 2006, and can vouch for their amazing support and reliablity.
ExpressionEngine
A feature-rich content management system that allows PHP illiterate folks like myself to create dynamic sites.
Basecamp Project Management
Basecamp is the smarter, easier, more elegant way to collaborate on your internal and client projects.
Phil Coffman
April 10, 2007
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!
greg wood
April 10, 2007
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!
Harold
April 10, 2007
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!
reese spykerman
April 10, 2007
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 :)
Christoph Seiler
April 10, 2007
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?
Joost
April 10, 2007
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 ;)
Ty Hatch
April 10, 2007
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…
Jesse Bennett-Chamberlain
April 11, 2007
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.
John
April 11, 2007
What program do you use to create your wireframes?
Patrick Haney
April 11, 2007
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.
Jesse Bennett-Chamberlain
April 12, 2007
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.
Chris Robinson
April 12, 2007
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!
Chris Robinson
April 16, 2007
Jesse,
I think you and Cameron need to collaborate on a book!
Ash
April 18, 2007
very nice indeed, look forward to the next write up
Ionut
April 19, 2007
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?
Jason
April 20, 2007
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.
Jesse Bennett-Chamberlain
April 23, 2007
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.
R.Bhavesh
April 28, 2007
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 )
Jesse Bennett-Chamberlain
April 30, 2007
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 :)
R.Bhavesh
April 30, 2007
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 :).
Jesse Bennett-Chamberlain
May 03, 2007
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.
Michael
May 09, 2007
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?
Evan Barash
May 09, 2007
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).
Tomasz Gorski
May 14, 2007
Thanks for very interesting article Jesse. btw. I really enjoyed reading all of your posts. Its interesting to read ideas, and observations from someone elses point of view makes you think more. So please keep up the great work. Greetings
Shawn
May 23, 2007
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?