Thanks to a meeting of the minds facilitated by connector extraordinaire, Emily Gannett, Mari Sheibley and I got to talking in early March, just before heading out to SXSW. Relating on points of interest, overlapping friends and a sincere desire to talk patterns, I asked Mari if she’d mind sharing her story with the Pattern Pulp readers.

For those unfamiliar with the gaming and check-in world that’s overtaken our smart phones, Mari is the mastermind behind Foursquare‘s look, feel and user face design. She’s forged new creative standards in the mobile gaming world while creating seamless UX interface, beautiful badges and progressive methods of digesting information overload. Follow along as Sheibley talks about the biz, shares her insights and gets literal and figurative about patterns.

*            *            *

PP: Before we get going with Foursquare, I have a few questions for you regarding your life as a creative. For starters, what websites get you going in the morning? Do you have a daily routine for news, blogs and inspiration?

Mari: I wouldn’t say I have a daily routine per se. I always check my twitter feed first thing. It keeps me up to date on the latest happenings with friends,  the tech scene and more importantly the world. I RSS my friend’s tumblrs and always make it a priority to check out their updates first, as some of my friends are the most creative people I know. Then depending on the day I’ll check out a handful of blogs for daily doses of inspiration. These blogs range from graphic design, hand drawn illustration, photography, fashion, UX, typography, interior design and tech. From Smashing Magazine, Kottke, Burstoid, Daring Fireball, Swissmiss, A VC, UX Magazine, The Sartorialist to name a few. I also really love tumblr because it’s so easy to consume visuals from a variety of sources really quickly. You’ll find me scrolling through my tumblr dashboard a few times a day when I need a break.

PP: How would you say your design process has evolved since becoming Foursquare’s lead creative and for curiosity’s sake how did you, Naveen and Dennis meet?

Mari: I met Dennis through mutual friends several years ago. I had played around with his previous start up, Dodgeball but didn’t have enough friends on the service to make it useful for me. I met Naveen at Dennis’s Christmas party shortly after I met Dennis. The three of us had exchanged emails discussing an app that I used to map my bike rides via GPS (something fairly new at the time). They told me about the project they were working on; an evolution of dodgeball but really so much more and wanted to know if I had some free cycles to help out with design.

Back then the design process was really fluid and organic and Dennis and Naveen played a big part in every aspect of the design. We’d send dozens of emails back and forth every day looking at mocks, talking about how things should look and feel. I wasn’t getting paid, it was fun. There was something really wonderful and sticky about what they were building and I just wanted to be a part of it. There was no process and everything was open reign. I designed a lot of stuff that was never used because the engineering resources just weren’t there (it was just the two of them!). I played UX designer, UI designer, and visual designer. Over the past two years things have become much more structured. Naturally we’re still working on refining our process, but we have over 60 people a whole product team now!

PP: Foursquare’s design is so fluid, everyone really raves about the interface- what theory went into the initial and subsequent evolutions? How do you think it compares to the general mobile design aesthetic out there today?

Mari: First off thanks! The goal in the design was always to make the product clear and concise and to have it make sense to users. That was and remains the highest priority when designing the interface. To start with we wanted everything to be as simple and flat as possible. Re rebelled against the very glossy, shiny interfaces that were popping up. As the product evolves we are slowly polishing up the visuals but still always want the interface to be as clear as possible for users, which can be hard given all the really interesting features we want to integrate. There are certainly more polished interfaces out there, but I think it holds up fairly strongly amongst other mobile apps. We’re constantly working to make it better! That’s one of the great things about working on one product; It’s your baby and you can always be iterating.

PP: Let’s talk badges! What was your first badge? What inspired you to make them circles as opposed to shields and how does color play a role in the branding bible you’ve created for Foursquare?

Mari: I was given the original 16 badges by Dennis. He had carefully created these 16 badges to encourage users to do different things (frequency of checkins, who you check in with, where you check in, etc). It’s hard to say which badge I created first, but I do remember the first pass being kind of atrocious. After a few back and forths with Dennis and Naveen they became what you see today. Those 16 remain my favorite both visually and conceptually. They really were supposed to be like real life badges and I think circles is what you commonly think of when you think of badges. They were supposed to be ‘eye candy’ and the color palette reflects that.

With badges there is free reign in color choices, although I encourage each badge contain 3 colors max (and we’re a little more lenient on our branded badges). With everything else we’re very strict about the color palette and how it’s used. This helps the badges not get lost in a sea of colors; they can be the star.

PP: What’s been some of the most useful customer feedback to date and what are you most excited (and maybe even a little nervous) about for the future of the brand?

Mari: Living in New York you live in this dense urban bubble where everyone has lots of friends and there are lots of places to go to and users populating those places. It’s hard to remember the use case of that person living in the midwest. We get a lot of user feedback that helps us keep in mind the non ‘new york’ use case. That’s always super helpful. As far as specific brand feedback, I don’t get a lot of that believe it or not. Everyone’s a critic when it comes to design and I’ve heard a handful of comments, some more useful than others. Visual design is so subjective that its hard to listen to everyone. The goal is to just keep true to our original vision both from a product point of view and a branding point of view.

I’m really excited about the things we’re working on now and the things we’re thinking about 6 months out (which I can’t talk about, sorry!). When foursquare started I was the only designer and the only one touching the look and feel. Now we have a handful of other talented designers working on a variety of different projects. Things move a lot more quickly now and my only fear is that I won’t be able to control how things evolve as closely as I’d like.

PP: Moving beyond your day job, do you have time for other projects? If so, we’d love to see anything you’ve dabbled in beyond the world of graphics!

Mari: Honestly the day job sucks up most of my time, but I like to do little mini personal projects to keep myself curious and occasionally take on small logo freelance projects. I’m really into photography. I document my life as much as possible, as well as come up with little photography projects. I’m currently working on a Superman project. I envision what life would be like for Clark Kent living in NYC in 2011. I maintain a website called mobile-patterns.com where I curate successful patterns in iOS mobile apps to help other mobile designers solve problems. I’m obsessed with photobooths and have been hitting them up all over the world in hopes of making something from the strips in the future. Aside from that I try to draw and paint (I went to art school and was so close to majoring in fine arts!) when I can. I just moved downtown and hope to hit up figure drawing sessions at Spring Street Studio now that I’m only a few blocks away.

I love patterntap.com and ui-patterns.com for looking at UI and design inspiration for websites. However the majority of my work revolves around mobile now and I haven’t found anything quite like these sites for iphone and Android apps. There are countless blog entries about best practices, but no full libraries. The best thing to do is just look at the actual apps, hold them in your hand and see how the interaction works. I take a ton of screen shots of apps every day, but there isn’t an easy way to access those screen shots in my photo album and from various computers later on. “Where was that really good screen shot of the new user EDU in that one app?” Suddenly I’m scrolling through hundreds of photos.

To solve this problem I’ve created a mobile pattern library of all my screenshots (well most of them). This is only halfway complete and mainly just for myself, but I thought I would share for any UI designers stuck on a particularly tricky problem and looking for inspiration.