I’ve been working as french startup Sharypic‘s lead designer for almost a year now, and we recently finished a complete redesign of the homepage.

I thought this would be a good occasion to take a look back at this page’s evolution over the last couple months.

I’d like to thank Markup Service for coding my design. They let me try out their service, and I don’t regret it. They did a great job of perfectly reproducing my Photoshop mockup (as you can see for yourself), and got it done in just one day!

First of all, you’re probably wondering what Sharypic does. Sharypic is a web (and soon mobile) app that lets you create photo galleries that aggregate pictures from multiple sources: Facebook, Flickr, Picasa, and even Twitter if you provide a specific hashtag to crawl.

The app was originally geared towards private gatherings, but we slowly realized that it truly shined for bigger public events. As attendees tweet out photos on Twitter and Instagram, you can browse them live in a single gallery.

The Beginning

When the Sharypic team (FJ, Christian, and Martin) first contacted me, here’s what they had:

A fairly complex and detailed wireframe as you can see. Wireframes can be helpful, as long as nobody expects you to stick too close to them. After all, this early in the process it’s hard to know if you’ll need, say, three columns or four.

My first job was to simplify the layout and try to extract the most important parts. The two big questions to ask yourself at this stage are:

• What are the user’s goals?
• What are the company’s goals?

Here (as is often the case), the user’s goals are to learn more about the product, and the company’s goal is to get them to try it out. The updated low-fi mockup reflects this:

Colors, Fonts, and Style

Since Sharypic is a consumer startup and its users could be everybody from newlyweds to tech conference organizers, I knew from the start that I wanted to project a friendly, warm atmosphere and create a fun and inclusive brand.

For the font, we quickly settled on St Ryde. Its beautiful curved shapes bring a funky , friendly attitude but at the same time it’s still readable enough to be used for body copy. In fact, we liked it so much that we decided to use it for the logo, too.

The second big design decision we made was to make purple Sharypic’s color. I was influenced by Seth Godin’s Purple Cow book, which states that you should strive to be as memorable as, well, a purple cow.

Comparing the evolution of the homepage, it’s interesting to see that the purple actually became less present over time, and is now used more as an accent color.

The First Version

There were a lot of very cool elements in this mockup. I combined St Ryde with Kyle Steed‘s Clumsy to give it a hand-drawn feeling.

We decided to keep this for now, as we still had the actual app’s design ahead of us (although I’ll leave that part for another post).

The Second Version

So why did we decide to change the homepage? Well, while I was working on the app’s UI, the Sharypic guys assembled a dream team of designers. Sean Farrell produced a logo, and Pasquale D’Silva contributed an illustration.

The second homepage took those new elements (along with the just-designed gallery UI) and put them front and center.

It was also bolder and fresher, with a clean white background that made the green and purple pop. And to make it stand out even more I decided to align the logo to the right.

A big influence for this design was the Rapportive homepage. It manages to look nothing like a traditional “web 2.0″ site (logo top left, navigation top right, you know the drill), yet is immediately understandable and has a great flow.

The Third Version

We were all pretty happy with the current design, so why change again?

Well, Steve Blank defines a startup as “an organization formed to search for a repeatable and scalable business model”. The key word here is “search“.

As time went by, the Sharypic team realized that they couldn’t simply target consumers. With the abundance of free photo sharing services, getting regular users to pay for a photo gallery would be a tall order.

This is why they decided to start focusing on business, and more specifically event organizers. Christian soon concluded that the current homepage did not fit in with this direction:

We were really satisfied with the last version of sharypic landing page, but as our business was evolving to target more and more professional event organizers, we wanted our landing page to look less cartoonish. The direction we gave to Sacha for this new shot was to focus more on sharypic content and showcase events currently active on sharypic.

So we got to work on a new version:

This new homepage was inspired in part by Windows Phone and its tiles. I used clean, straight lines to let the photos shine through instead of burying them under highlights and drop shadows.

Straight lines and right angles tend to feel a little cold, so to offset this I used Markerfield, a great script font that I first saw employed by the Intercom guys.

I also used drop shadows and embossed effects to play with depth, while making some of the elements break out of their boxes to add movement to the layout.

Overall I’m pretty happy with this new direction. It feels more grown-up and laid-back, like browsing through a photo album at your own pace, whereas the previous versions were more like an over-excited friend shoving his vacation pictures in your face.

So what do you think? Did you see an improvement over time, or did you like the previous versions better? Let me know!