Mostly about web design.

Improving Grubwithus’s conversion rates

Hey! This is my first post. 

Some background info on myself: Got a sudden urge to learn web design all of a sudden, so I joined Team Treehouse at the end of last year and haven’t looked back since. At the same time I’ve been reading about psychology, neuroscience, and the like. So with all this newfound knowledge brewing around in my head, I’ll be working on random projects to apply what I’ve learned and fine tune my skills. I’ll post them here.

For my first project, it’s a redesign of Grubwithus’s meal page. If you’ve never heard of Grubwithus before, they make it easy to meet people (mostly strangers) at local restaurants. It’s a pretty cool concept —it’s normal to meet people at bars or events, but I imagine it’d be awkward to sit down at random party’s table and chat away —Grubwithus solves this problem. Think Meetup + Opentable. 

They released a new feature a while back that allows you to create a meal with your own theme and time, and when a tipping point is reached, Grubwithus will find a restaurant to host your meal at. I noticed some of these user created meals actually become filled up even before the restaurant/menu is announced….

Here, 4 out of 8 seats are filled before Grubwithus found a restaurant.

So that leads me to believe that while people do use Grubwithus to try new foods, many put meeting new people on top of the list. If that were true, wouldn’t it make sense to feature the pictures of grubbers (or some other representation of the grubbing experience) closer, or at least on the same screen as the call-to-action button? 

Check out this shot from livingsocial: Picture of cockpit is consistent with a flight on a helicopter. So if you’re buying the experience of meeting new people, you’d want to see a bunch of cool people. 

Here’s my take on what would work better:

I decided to keep the secondary stuff (food, menu, directions) sectioned to the top while the larger section showcases the attendees. You can see up to 8 attendees without scrolling down and 16 without scrolling the call-to-action button off-screen.

You might have noticed that goofy looking hungry head. I have a theory that having a placeholder image for empty seat(s) may convert more. People may want to fill the empty space and will get satisfaction from doing so (think kids with coloring books). Fighting games certainly show empty slots to encourage players to unlock characters. My placeholder image obviously sucks, but an appropriate one might be worth looking into. 

I also found the other meals placed on the left-sidebar to be a distraction. My eyes kept gravitating to what looked like possibly more interesting meals before I’ve even explored the current one. 

Here, users don’t see other meals until they’ve scrolled past the current meal.

The create-a-meal option is important and deserves a more prominent and easily accessible spot. Rather than having to scroll up to the top of the page, it’s now available on the fixed-position menu.

You can check out a HTML mockup of my iteration here (modern browsers only). 

Any thoughts. Do you think it’ll improve conversion rates? Feel free to hit me up. 

Let’sLunch’s Landing Page

Let’sLunch helps professionals schedule business lunches. They take information from your social profiles (linkedin, twitter), your location and availablity, run it through their algorithm, and match you up with relevant professionals to have lunch with. Think of it as Match.com + Linkedin + Grubwithus. I Love it. When smart people get together, great things happen!

So for this second project I decided to redesign the landing page. 

I was initially going to (attempt to) redesign the dasboard, but before I had started any work, I asked my roommate to check out LetsLunch (he works at a tech company in San Mateo). When I asked whether he was going to sign up, he said no, because he feels like he’s not in an influential position. The site, he says, looks like it’s good for entrepreneurs and CEOs. 

And that’s a reason I hadn’t thought of yet that could deter new visitors from signing up. I suppose all those founders, CEO, and venture capitalists would be a bit intimidating to your typical file-and-rank employee. But you know, there’s a lot of file-and-rank types who are smart, with great ideas, who would add value if you can show them the benefits of getting out-and-about. 

And so, I felt like improving the landing page was more important. 

One thing I noticed was the amount of clickable content on the page. 

All those portraits of Lunchers show additional info upon mousover and can be further explored by clicking. Where’s the sign-up button? Nestled between all those clickables. Those press links should open a new window when clicked on as well (they current don’t). Might have lost a few potential conversions who got lost when directed outside the site. 

When you scroll down there’s even more Lunchers to steal your attention and a newsfeed! You can even click on those “added to wishlist” or “invite to lunch” actions buttons on the newsfeed, which will prompt you to log in. They may or may not come in handy for members, but it’s definitely distracting to first time visitors. All you want them to do is sign up!

Those Lunchers on the right definitely are a bit intimidating. I saw a lot of VPs, CEOs, founders, and directors upon mouseover. I suppose it’s social proof for powerful, smart people, but let’s be honest, they don’t need any convincing to use a networking tool —it’s the not-as-social/powerful, yet intelligent folks you have to lure out. 

What if you’re wondering how this works? You might. LetsLunch was just launched last year and is somewhat of an unique product. It should be somewhere more apparent than a small link in footer. 

If you click the sign-up button you’re directed to a page where enter your information. There’s also a twitter widget that shows LetsLunch mentions which occupied me for a bit as I waited to see if anything cool came up. But at this point after I’ve already committed to clicking “sign-up”, you want to block out potential distractions and have just me sign up! Yes, even the “Why you should join” reasons. The users already clicked the sign-up button —they know the benefits —list them on the landing page instead. 

My take on what could work better:

I mentioned earlier that maybe file-and-rank types would be overwhelmed by all the influential people, so for this redesign, I want to focus a bit less on the users, keep the site clean, and explain the benefits plainly to attract more casual folks to try networking over lunch. 

The only clickable one the first screen (aside from the header) is the sign-up button. The admins will pick a diverse group of members to use for the left portrait.   And yes, if you’ve seen Linkedin’s landing page, I was influenced by it.  

I extracted a quote from each piece of press (1st and 3rd are dummy quotes) so users get information without clicking. In fact, they don’t even have to be clickable. And below that, a simple how-it-works. 

Listing admin selected success stories/testimonials will replace the twitter widget and newsfeed. Could make it 9 testimonials too, but 6 fits perfectly into one screen along with the headline text on my resolution. Also, I remember reading about the human brain only being about to hold 5-7 items at a time, or something. Will have to look it up. So 6 it is, for now. 

Tie it up before the footer with a big call-to-action button. 

It’d be possible to put VIPs before the footer too. Maybe something like, “Be a Move and Shaker” with a subtitle of “Even our Silicon Valley VIPs are Lunchers.” and a handful of the VIPs right below it. But I’m not convinced that it’d improve conversion rates. Would have to test it to know for sure!

HTML mockup of the site here. 

Hit me up if you’ve got comments! 

Redesign: LetsLunch’s UI — dashboard

I like Letslunch and what they’re doing. Anytime you get smart people together, awesome things can happen — two random dudes meeting serendipitously on Letslunch may trade ideas, shoot the shit, and very well create the formative beginnings for the next killer app. You never know. So, yeah, I’d like to make to make the site more attractive to use and increase lunching rates. 

This is their dashboard as of this morning.

And this is the rest of the page. Luncher recommendation and a newsfeed. 

This is my design: 

The options are generally the same, most of what I did was just make it cleaner and more organized. As you can see,  I took out “how to lunch” and put in a tabbed menu.

I actually contemplated putting in a progress bar to the left of the user pic if your profile is incomplete, and it’d say like, “Your profile is 75% complete, fill in xxxx missing fields.”, but couldn’t find a practical way to put it in and make it useful. 

The only major difference is the newsfeed which I thought was a bit noisy. I don’t care too much about who’s wishlisted or joined, but what’s relevant to me is who’s available to lunch. Plus I think sometimes people don’t know who they want to lunch with until they see someone who’s interesting and available. So I moved recommended lunchers elsewhere to make this newsfeed more visible. The “load more” on the bottom of the feed is purposely borrowed from Facebook because I have a feeling most people can’t resist their habits and will click it. 

What do you think? Will it work better? Hit me up!

HTML mockup is available here (modern browsers only).