I am excited to announce that we are redesigning the website for the Greene Hill School of Brooklyn, NY. Having successfully partnered with the school in the past on printed promotional materials were humbled to have been chosen for this task.
As of today, we have just received approval on the home page design and, as we begin the process of designing out all of the sub pages, I thought I would share the first roughly designed iteration, some of the thoughts behind that design and why it ultimately failed.
A Beautiful Design does not Equal a Successful Design
There is a tremendous gap between what looks great and what works for the client, the brand and the target audience.
As you can tell from the first mock up of the home page, I set out for the site to be bright and lively. I incorporated vibrant colors and spent some time making various vector illustrations for background elements. I thought the layout, on a whole, was clean and the content would be easily accessible. I knew that, if approved for further development, I would need to add some fine details but I was on the right track. So, feeling like I had a winner on my hand, the rough mock up was sent out for approval and comments.
But, as any designer can attest to, there is a tremendous gap between what looks great and what works for the client, the brand and the target audience. This became oh so evident when I received the comments:
Everyone really liked the brightness of the colors and ease of the rectangular text boxes. In general though, people thought that the overall imagery of the animation read more like a pre-school. A question was asked whether the sky and grass might be more abstracted or if there was a way to incorporate more local images-indicating that we are an urban (with a love of the outdoors) school?
So, I was in the right neighborhood, but on the wrong street! After reading the comments, speaking with the principals and picking apart my design, I had to agree with them. Though the rough version is very pretty, it does not work for the school. My original layout does feel like a pre-school website as opposed to a site for a school that has students from pre-K the 8th grade. And though I loved my cute vector illustrations, they just didn’t fit. It was back to the drawing board for me.
If, at first, you don’t succeed…
The only thing that would make it past the rough version would be the vector flock of birds. I decided to scrap everything else, come up with an alternate color palette and rearrange the layout. This time around, while keeping a green theme, I decided to create some textured background images (something that felt both urban and natural). These backgrounds would be accented with silhouette images of the Brooklyn Bridge as well as people and children interacting in Prospect Park (Brooklyn’s equivalent to Central Park).
The main site navigation was made more prominent by moving it to the very top and assigning its own color palette. This made for a much stronger presentation than the rough version. The footer area was broken up into two sub footers. One would act as an area to promote upcoming fund raising events, a site map and quick contact information. The second would be for legal information and site credit. Lastly, a search form was added as I never got the chance in the rough mock up.
I felt very confident about the design but it doesn’t get the green light until I get a message like this from the client:
Thank you so much for your creative energy and this wonderful revision. Everyone is very positive about the site and would like to move forward. We love the way you have made a very green but urban landscape with active people.
Experiences like this one reinforces that I have to always keep the brand in mind when designing anything. It is very easy to “fall in love” with your work and lose sight of the ultimate goal. This is especially true when it comes to designing websites.
@Joe,
Thanks. That means a lot.
Nice work. Great detail and color!
@Design Informer,
Thanks for the kind words.
I actually originally had the main navigation on the left and the “Make a Donation” button on the right but didn’t like the feel of it. I never thought about it being confused with the logo and will definitely have to keep that in mind.
Very nice designs! I really do like both of them, but like you said, the second one probably does work better for the client.
I love the textures and the background on the second design. Did you mean for that donate button to be the first thing that you saw when looking at it? Because when I first looked at it, I thought that was the logo. That’s just me nit-picking.
Great job! I’ll leave you with these words.