Mobile Templates

I do a lot of designing for web and mobile sites. And I do a lot of browsing mobile sites on my phone. I find that far too often what I want to do on a site is hidden, tiny, or unaccessible because the mobile interface is too awful. So the other week I had a little bit of free time at work and thought I’d see what could be done to make a SIMPLE mobile site for restaurants that leverage some simple phone abilities (like calling numbers and GPS). I picked restaurants because as a whole they have the worst mobile and desktop sites.

I decide to design a simple template that with just a few tweaks and color choices could be make to match the restaurants’ brand. And then I grabbed some local restaurants to see if the template worked and where it needed help. I tweaked it on the way. Later I grabbed screenshots of what the sites currently looked like on my phone to compare to my template.

Corner Coffee is just down the street from work and I go there all the time. It was one of my first test restaurants and is ideal for this kind of templated experience. For one, it is a small single-location store, very local, and they don’t have a lot a time/money to put into a mobile site. In fact currently, they don’t have a mobile version of their live site.

The features of my template include a prominent phone number to call that uses the phone’s (press to call feature) and the store’s hours displayed at the top. The “Locate” button will use (if allowed) the GPS on the phone to not only display the location of the coffee shop, but be ready to give directions. The Menu pulls up the menu items and costs for the shop. Since Corner Coffee has music events (as well as community events) a calendar will display with all the events on it. These can be added to the phone’s calendar program or google calendar to something. City Wide is a point program and this would either connect to your city wide account (if you have one) or explain the point program.

Darby’s (also down the street from work) was my other test restaurant. Another single-location place. Here you can see how the template can be personalized with color and logos. I didn’t realized until later that Darby’s actually had a mobile site. Go them! Their mobile site is very simple and does almost exactly what my template would do. The exception being that the phone number and hours are not a click away and Happy Hour deals and hours are listed in my version. Using icons on the button is something I played with and I think would improve my design.

So yay for Darby’s! Not only are the fries and tater tots good, but they care about their mobile users.

Be’Wiched Deli was my next experiment and they caused me some problems since they have daily specials tweeted. I know they’re trying to up their followers by only providing this via tweets, but I thought it was more useful to pull in their twitter feed. Underneath the feed could be another button  options like an events calendar.

In reality, Be’Wiched uses the new “responsive design” which reorders page elements based on the screen size. It’s the ultimate in “design once.” There’s a lot of talk about if you should design your own mobile site or design responsively. The downside of responsive is that it assumes mobile users want the same thing as desktop users. Sometimes this is true, but sometimes phone numbers and addresses are more important than joining the email club. However, my template is designed for those restaurants who don’t have time/money to redo their entire site responsively and just want a quickish fix for mobile so I’m not going to get into that argument here. Be’Wiched does use a PDF download for their menu both in desktop and mobile. This is one of my pet peeves. If you are a restaurant owner DON’T DO THIS!

Tiger Sushi was my next test restaurant and I ran across the first issue with my base template. I didn’t account for multiple stores and not only are there two Tiger Sushi locations, they offer very different things. At MOA there is no Happy Hour or seat reservation or delivery. I also wanted think through and when it came to the Minneapolis store, I wanted more than four items to be available. So I guess you can put more than four buttons on these pages.

Tiger Sushi is another site that doesn’t have a mobile site. On the plus site their site (which has animations) is not Flash so it will show up on iPhones. There are many restaurants, bars in particular, that made lovely Flash experiences that are completely useless on many mobile phones.

Once I tried one multi-location restaurant, I wanted to try another so I picked Chatterbox Pub. It has three locations, weekly events, and happy hours. It proved out my new multi-store solution out very nicely.

As you can see here, Chatterbox’s real website has a very unique feel and absolutely nothing for mobile. The background is very complicated and the landing page is a long letter to you the guest, which is of very little importance for desktop users and even less for mobile. I think this is one of the sites that would be improved a lot by my template. I know which I’d rather see when I visit them on my phone.

Just for fun, I thought I’d try a chain restaurant rather than a strictly local one although they wouldn’t be a target for my template I just wanted to see what it would look like. Pei Wei got picked as my test subject (as did Starbucks, but I didn’t include that here). I picked the items that weren’t store specific for the landing page and then, instead of “Locate” button, it’s “Find A Store.” You’d have do something like this for anything with more than three or four store. Also if the menu is unique per location, you’d have to move the menu button back a step. Not ideal, but if it’s a small chain perhaps this would be worth it. I’m thinking Dunn Brothers might work.

Pei Wei of course, can afford to have a unique mobile experience, and theirs is not bad. The store finder utilizes the phone’s GPS and the menu is easy to find.

Lastly, I wanted to look at Tea Source, since my sister works there and they all know their website needs updating. As you can see, the site is unreadable when viewed on the phone. Mainly this is because the site was designed before mobile was considered important.

Tea Source also provides an extra challenge since it includes commerce. The “Tea Shop” would need to have both bulk teas and goods and have to utilize a commerce solution. I’m still thinking that aspect out so you can just imagine the wonderment that that button leads to. Shopping on your phone is normally a painful experience, so to make it delightful and functional takes some work. I’m sure I’ll let you all know what I decide on.

Note, I am not a developer, I’m a UX person. I will not be making anything like this – it was just a way to pass the time and think differently about mobile websites.