Mostly about web design.

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). 

Letslunch mobile site

For this 1st mobile project, I wanted to do more than just critique and code a single page like I have in the past — I thought I’d try my hand in designing and organizing an entire app (or most of it anyways). 

I needed a good week to grasp mobile design basics and try different prototyping tools, so in order to meet my self-imposed deadline, it was necessary to design for a product I already knew.

Enter Letslunch (again). 

Here I’ll explain every page I have designed. You may use the Interactive Mockup as well. 

Home

I thought showing users who are available for lunch would drive the most engagement and deserves to be on the first page. New users would be introduced with a walkthrough which I have not designed. 

Overall I think this page feels a bit cluttered. I had actually started out including minimal user info, but because it’s a business lunch I felt it was necessary to have job info and bio in plain view without making users tap to another page. 

That “show more” link is a bit conflicting because some people will miss and end up tapping one of the nearby buttons. However, if I remove it then I have the option of either including the full bio or a truncated one. Since some users will have a wall of text documenting all their hobbies, a bio of that length will interrupt the flow of the page, so including the full bio wouldn’t work. A truncated bio is a good option then, but the user would have to perform an extra action if he wanted to read the entire thing. But on the upside, he is presented with exact same buttons on the profile page as well as interests or any testimonials the user has. That may lead to more engagement. Who knows. 

For now I’ll keep “show more” around. 

Home - Location Filter

A Location filter is necessary to promote usage of the available lunchers feed, otherwise you see lunchers from random places that won’t apply to you. 

There needs to be more contrast in my mockup but there isn’t a drop-shadow option in the prototype tool. A slider may also work better to select miles. 

Invite for Lunch

This page is used to invite other users to lunch. Notice the date dropdown on top. It defaults to whatever date you had tapped in from on the home page. If tapped in from another page (like search or profile) it could either default to the closest upcoming lunch or a new date. 

Here it is dropped down:

The date and location on the right will change when a new date is selected. 

As far as I know there isn’t a way to request a specific date on the website:

Notice I clicked for Jan 25th and the invite popup is a general request. Adding ability to request a specific date will make the lunch feed more meaningful and more than just a way to see active users. 

Lunch Management

This page shows user’s upcoming lunches, invitations, and allows you to make yourself available for lunch. 

The stronger colored date with the checkmark signifies a confirmed lunch. 

When there’s no lunches there’ll be a tool tip filling the space where the dates are, pointing to the ‘+’ button, encouraging users to create a lunch. 

Add Lunch

Here’s the web version: 

Pretty much the same features. 

Originally I had split it into 2 pages: 1st with dates, and 2nd with rest of the options. 

Available for Lunch

This is the screen after you’ve created a lunch. Shows details of whatever you created, requests from other users, and matches made from the system. 

Confirmed Lunch

Seen after confirming a user request or lunch match. The lunch info on top is shared asset with your lunch partner and is changeable. 

Account Management

Pretty basic, clean layout. Could have named it “me” or “account” or something, but I went with “profile” first and there’s no easy way to change it across all screens in FluidUi — so “profile” it is!

Set up Lunch Zone

This design actually took a bit more thinking. 

How it looks on the website: 

The website allows your to select your zone with a drag tool, but as far as I know, there isn’t a way to replicate this on a mobile device. 

I compromised by allowing users to select an address and a radius (may work better with slider) which will then display on the map, along with how many lunchers are in the zone. 

The icons of people representing lunchers on the website actually lags my computer a bit. Wouldn’t recommend trying that on a phone. 

Edit Interests

Takes two screens to update interests. Pretty basic. 

Web version here:

Edit profile

Other people’s profiles

Search

When adding filters:

The detail button on the left would probably drop down with sorting users and clearing filter options. 

Web version for reference:

And that’s it. 

Check out the Interactive Mockup for a better idea of how it all works together. FluidUi gets a bit laggy when I add too many links btw, so not all the buttons work. But I did make sure every page has a way to go back.