Ridejoy is a nifty site that connects drivers and riders for long trips.
Here’s a shot of their current front page:
The page has a simple layout with a strong call to action. It has a lot of information, but tends not to bombard the user with it too fast. The big button/big form combo is always a good one. If you’re going to have a form on your front page, make it extremely easy to fill in. (They also get bonus points for proper tab indexing and a helpful autocomplete)
Centered layouts have a tendency to be unexciting. The lack of color makes the site feel sterile, which is a shame because the comapny seems to have a lot of personality. White backgrounds can have the benefit of lending professional credibility, but they do away with that with the handwritten font. Fonts like this have a place on the web, but it’s mostly in personal projects. Even when you do them correctly (and there’s nothing wrong here with the size or the spacing) you still have to work against your users’ preconceptions. And they usually aren’t good preconceptions. Some people see Comic Sans in every handwritten font.
On the big button’s active state, the shadow rises up to meet the button. There’s always some combination of padding and positioning that will let you have a button that presses down while maintaining its original clickable area.
The re-imagined front page:
Here’s the re-imagining. Click for a bigger one.
Keeping the good: The focus of the page is still the big form and the big button, although the button’s orange now. I tend to go with orange or red for the call to action. Red always seems to win over other colors in A/B tests, but orange felt more relaxed and a better fit palette-wise.
Inverted header: This re-imagining actually started as an excuse to do an inverted header. The vast majority of pages on the Internet aren’t a good fit for an inverted header, but I thought Ridejoy’s site would be. The big rule with inverted headers is that the site has to be small enough to be completely above the fold. Remember to use CSS3 media queries to uninvert for mobile.
Combining cities and trips: The original page had two sections for featuring the cities and current trips being offered through the service. The right side of the page here combines those two ideas into one slideshow. The idea would be to feature at least one trip from every offered city.
Offset footer: Inverting a header usually means it ends up awkwardly mashed together with the footer. To avoid this, the footer is made smaller and pushed to the side.
Logo rework: The original logo is pretty simple, and so is the rework. Remember that any time you do a logo like this, which can’t easily be ripped from the front page by journalists, that you should have an alternate logo easily available in a “press” or “about” section.
Tagline: Kept “friendly people” and added “awesome journeys.”
Background image: This great photograph of Highway 1 by Wouter Kiel serves as the example background image. The idea would be to use multiple (user-submitted?) images in a rotation on the main page. But this particular example works really well, so just one image is a possibility too.
Suggestions? Comment below or just tweet at me.