Treating your clients like they’re your close personal friends is always a smart idea. It helps build trust and essentially garners the relationship required to produce awesome work. But what if the client is already your close personal friend? Bonus! All of that time you would have normally invested to earn their trust is already in place. The only thing left to do is the work – and when trust is securely in place, the chances of hitting a home run are much greater.
This was the topic of discussion with our friends Packet Tide as we were all hanging out at Iron to Iron headquarters. We had just finished collaborating on a project when they mentioned that they were interested in having us re-design their ExpressionEngine add-ons storefront; EEHarbor. I was beyond pumped when the request came up. Not only would EEHarbor be an awesome project in itself, but I knew that since we already had a good level of trust established within our relationship, this project would have tons of potential. We concluded our meeting with the confirmation that the ball was in my court: Structure, concepts, design direction, it was all my call… That said, I got to work.
Freedom Equals Pressure
Though having free-reign to design however I see fit opens a lot doors, it also adds a lot of pressure. The final results would be completely on me. They would be my ideas from conception that I would have to see through to the end. So being sensitive to the needs of the end user was certainly on the forefront of my mind. These products are almost exclusively for EE developers / users. This was my focus.
After I had established this seemingly obvious revelation about the target audience, I had quickly concluded that I wanted this storefront to feel different. The easy answer would be to have this site feel familiar to the end user by mimicking all of the other typical software sites out there (add glossy buttons, use subtle gradations & soft shadows, you know… all that web 2.0 stuff). I wanted this site to stand out amongst the crowd though. Why blend in, anyway? What real benefits are there?
With that logic in place I started establishing the overall structure. I wanted these products to be center stage – showcasing a lot of detail up front. After all, that’s what this is all about. Find the product that you need, get the details, buy the product, get out. There were a few more layers of complication that were necessary to address though. I wanted the transition between product listing to product details to feel seamless. So I came up with some transition ideas that would not only provide a quick and easy user experience, but also create a level of excitement and creativity.
Once this structure was mapped out, it was time to start adding some styles. The only facet which gave direction was the name: EEHarbor – specifically the “Harbor” part. I toyed with the ideas of creating an oceanic theme, but found myself feeling more at ease with using nautical hints rather than going full-fledged with a water concept. Using a grey, blue and yellow palette not only helped establish the nautical feel, but also matched the EE interface nicely. After settling on that, I circled back to my anti-web 2.0 commitment and made some buttons that felt nice and flat. These buttons will be screaming “click me”, but not because they’ve got a mile high bevel on them. Nope, I’m just relying on stark color contrast combined with some straight forward verbiage to do that trick.
Sweat the Small Stuff
Though it might not be super noticeable at first glance, I added a light layer of texture to almost every element on the site. The background, buttons, icons, you name it – they’re all rocking some subtle texture. Regardless of their simplicity, however, I do feel that they add a level of depth that went missing when I removed them. So, around they stuck. It’s details like this that I love. Subtle details are what take a design from good to great.
This may go without saying (and probably should have been mentioned at the begging of this article), but EEHarbor did not have any sort of logo, brand or any other element to work with. This project was truly a start from scratch. Part of the deal we cooked up was that I would create some sort of simple, text based, logo after the design was established. This felt liberating. Normally, the direction of a site design would be dictated by the pre-established brand of the company. In this case, however, I worked backwards. It was a nice change of pace and I was happy with the end results. The “logo” which I created was a simple wordmark that was born as a product of the typeface I chose for the main headline copy. It seemed to be a good cohesive fit that stood tall on it’s own feet. I’m excited to explore this option more often for clients who don’t yet have a brand and don’t have the budget to invest in a full brand campaign.
Keeping a Balance
Throughout the entire process of creating this site, I kept circling back to my initial motivation to create a site that would stand out as unique within a semi-crowded market. It was tempting to go off the deep end, but I had to continually remind myself to use retrain. My balance fell between a unique design style and a common structure – a little something for everyone. Regardless of your design preference, the product you were looking for would be easy to locate and purchase. Over all things considered, this was the one underlying principle that could not be compromised.
When I first showed the client these designs, this was something that they immediately appreciated. I explained to them my entire thought process and I believe they were in agreement with all of my decisions. The balance that was kept, however, was the key ingredient that would help this project be successful beyond anything else.
In the end, I was able to fulfill all of the project goals (mine as well as the clients), within a fairly quick turn-around. Working off of our pre-established trust as the foundation of this project helped expedite everything while create a project that we could all feel satisfied with. See the full site in and all of it’s details at www.eeharbor.com. Be sure to buy some products while you’re there!
Your execution of the design for EEHarbor is wonderful! Like how you took an external approach with “EE developers” and “other typical software sites” subtleties, tailored with minimal nautical frills to help give them a bit of personality.
It is critical to design a site based on predetermined branding. Unforunately not all companies have that brand strategy guide established. Like you said , “Freedom Equals Pressure” and I think this is where a lot of designers get stuck on when designing from a blank canvas.
I was just about to write that I’ve noticed that your style is very subtle, or even delicate, but then I’ve scrolled to the top again and saw this bold red and now I’m relieved that you can master both.
I like the new design of eeharbor. Clean and simple, my taste indeed. If I may point out, the white captions are are troubling to read, their missing contrast. I guess it’s a way of hiding price from users ;)