Viewing all essays in #design process

Mapping Burgers

I've been really excited about the projects that I've been working on at Serious Eats, and the burger map that we published yesterday is a great example of how the design and development team has been working closely with editorial to rapidly produce new areas of the site to showcase Serious Eats content. One of the things that I love about Serious Eats is the deep archive of writing about all things food, but it's always been hard to find and surface (for a number of reasons which I won't get into here).  

Kenji and the editorial team came to us at the beginning of June with an idea for a burger map for the Fourth of July; they'd choose 50 burgers and gather links and photos to previous recipes and reviews. They had a vague idea that it should be clickable but beyond that it was up to us. We told the editors to gather their data in a Google spreadsheet for now, since they're used to that workflow already, and I dove into design. 

Two early conceptual sketches in Photoshop

These days I'm using Photoshop just for rough sketching rather than fully fleshing out the entire design, which has been a major sense of relief for me. The aim is to convey overall look and feel in the vein of style tiles rather than making specific layout choices or details. For those that argue that jumping right into CSS kills creativity, I would counter that it provides a set of constraints that one must be creative within. I know what's possible and where I can push the limits. It frees me from doing theoretical finished comps in Photoshop that would never work in the real world; so many of the issues that need to be solved with a responsive design only come to light as you interact with the page, and there is no way you can see that with flat comps. And we didn't have much finished content to work with since we were working in parallel with the editors. 

Development-wise we had recently built NearMe as a way to explore and organize location-based content, but this wasn't quite the right tool for this project. However, the templating system that 29th Street Publishing had put into place was exactly what we needed. On top of that, we found a script for exporting a Google spreadsheet to JSON and an svg library called Raphael.js for the map. The script enabled the editors to continue their workflow undisturbed and we didn't need to build anything custom to store the data; maybe it won't scale if we're doing many maps a week, but we just needed to ship it quickly. 

Now we've got a reusable base of design and code that we can spin off into other projects and a better idea of where we can take things. I definitely want to explore more mapping possibilities with MapBoxLeaflet, and OpenStreetMap (this is a really inspiring example!), as I think it's an effective way to group content to tell a larger story. And I finally feel like I'm getting comfortable with the process that responsive design requires to tackle some larger changes on Serious Eats. 

Ever forward!

Prototyping and Lonestar Taco

Back in April I attended the TYPOSF conference (which I highly recommend) and one theme that ran through a lot of the talks was the move towards a rapid, incremental prototyping process with a collaborative team. Developing and running Lonestar Taco has been a very similar process. I'm mostly used to designing in the medium of the web, so it's been an interesting change of pace to work on systems in a more physical realm.

The same principles apply regardless - gathering and defining requirements, designing solutions, implementing, gathering feedback, iterating. This time though it's entirely our vision, and it feels a little funny to be in the client chair at the same time as the designer role. It's definitely harder to get perspective, so it's even more important to listen to our customers. 

Menu board over timeLonestar Taco menu over six Sundays at New Amsterdam in 2012

New Amsterdam Market gave us a chance to roll out our prototype, from the menu, the organization of the ordering line, food prep and cooking logistics, pricing, sourcing, even our social media. Every week we assessed how things went and took note of what we could improve. Sometimes it was something as simple as positioning the cooler parallel to the grill rather than perpendicular. Other times, it was realizing that propane tanks don't do so well in really cold weather and figuring out how we could adapt. We ended up creating a line of retail products that didn't require on-site cooking and selling tamales that could be kept hot on an electric induction burner. 

"Ghost of Christmas Past" Chili Marmaladeexperimenting with retail products. This one sold out in two hours!

As in all prototyping, we gathered as much customer and team feedback as possible. We had many variables to take into account - how much was rain responsible for variation in sales? How could we increase our capacity while decrease wait time but not sacrifice quality? And how could we ensure that we were meeting our bottom line? What items were the most popular and did we price them right? There's very thin line between customers feeling like they received value for their money and being perceived as too expensive. We also made sure to talk through feedback from our team, and they always had insightful suggestions that allowed us to make incremental improvements every day. 

Although we've always been clear about our overall vision for Lonestar, it hasn't always been easy to figure out the immediate form that it should take. After last season, we collected a ton of information that is helping us with the next iteration. We're altering the design of the menu and offerings to make it easier for customers to make decisions and to streamline our service. We're focused on securing a permanent kitchen for ourselves - although the initial outlay will be larger than last season, the gains in our ability to produce food, hire staff and making our products more readily available to our customers will enable us to be a sustainable and profitable business. 

Another point from the TYPO conference that resonated with me was the fact that nothing is ever "done", you always have opportunities to improve. And that has been so true with Lonestar Taco. Of course we all have days where we felt like we fell short but it was most important to get our idea out there to give people a chance to kick the tires. I'm excited that we're returning to New Amsterdam Market this Sunday to put some of our improvements to the test and to see all of our regulars.

Why I'm a Designer

Whenever I tell people who know me as a designer that I'm working on a restaurant, I get some puzzled looks. "Don't you make web sites or you're in tech or something?", their expressions seem to say. Yes, and the web is simply a medium. What I'm fundamentally interested in as a designer is the experience that people have when interacting with one another and how the intermediary systems can help or hinder those interactions. 

Restaurants and the web are more similar than you'd initially think. Paul Ford pointed out that the web is a customer service medium - so is a restaurant. Everyone has their opinion and certainly doesn't hold back. (see Yelp and every food blog ever.) It's not called the hospitality industry for nothing! Ultimately you are accountable to your users/customers, because they will certainly vote with their feet if they don't like what you're doing. 

 The same questions arise in both mediums. What happens when someone uses an interface I've designed? How does the person on the receiving end interpret it? Was the message communicated successfully? The design process provides a set of tools to gauge success and come up with solutions to make improvements. 

For instance, we want to offer counter service in the morning and afternoon and then switch to table service in the evening. This decision came about after observing that our potential customers modify their eating habits depending on the time of day. In the morning and for lunch it's mostly people on the run, in between activities or on their way to work. In the evening, people are unwinding and socializing, they certainly don't want to stand in line. However, switching service modes is unusual for most restaurants and there isn't a shorthand way to convey that. 

How can we design the space and signage to be flexible enough to switch between the two modes of service and to make it clear upon a glance what to do when you enter the space at any given time? I constantly have to examine the interface and imagine the experience from the other side. Honing my sense of empathy is an essential part of being a designer and part of why I was attracted to the discipline in the first place. 

 When I think about a restaurant as a number of interlocking systems, I get ridiculously excited. A menu seems simple but it's not at all! It's not just the visual design of the menu, it's how the items on the menu are br