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.