The rise of the iPhone and other smartphones with robust browsers have put new demands on old websites. Restaurant websites, traditionally feature Flash, heavy graphics, music, PDF menus and a lack of well-organized information. It’s a deadly mix for a mobile user experience, which is all about making a fast assessment of what a business offers and making a decision to go or not.
Knowing it will be some time before most restaurants redo their websites according to modern standards, we set out to make a minimal but flexible solution. The basic requirements were to provide diners with enough information on any phone and to keep things easy for a restaurant to keep its info relevant, without having to call a web developer just to update the essentials.
We also considered the design of Menuito as a business. As a side project, we wanted something that we could maintain while keeping our regular jobs at the time. If we decided to discontinue Menuito, a basic requirement would be that no customers using it would lose out on their investment. These constraints, as much as how we help bridge restaurants and diners on mobile, informed our decisions at almost every step.
At the core of our design was the intention to make restaurant mobile sites that communicate what diners really need to know when they’re on the go. We made an early decision to lock down the order of information and how it’s presented.
We also decided to avoid making a user interface for customizing the look of the mobile site. Instead, all manipulation of typeface, colour, even adding a logo, would be handled through HTML and CSS, meaning the person making those changes needed to know what they were doing. We took this step to fulfill a basic rule for the project: make the restaurant look good.
The early concept for a Menuito mobile site took a fairly simple approach.
As we got into the details more, the design evolved. The key challenge was to make the information structure simple for diners, but flexible enough to handle the variety of ways that restaurants work. The most tricky areas were in handling menus, getting the display of operating hours right, and after launch a way to handle multiple locations and phone numbers.
It also took a number of tries to get the right feel for the administrative interface. Without resorting to common CMS vocabulary or concepts, the interface communicates directly and in the language of a restaurant. We sought to make the manager’s interface feel like a piece of industrial kitchen equipment: solid, big buttons and clear presentation of what’s going on.
Along with a simple interface we wanted to show how restauranteurs how visitor stats could provide insight into their customers. With a few sparklines we show daily and overall traffic, and break down the interest in the different menus.
Late in development we were playing with controlling graphics by moving a phone, and came up with a simple game that we eventually embedded as an easter egg in Menuito. Turned on as an option, the game is triggered by shaking a phone while looking at the mobile website.
It’s a moment of surprise and delight, but also let us explore and push into a new area without hijacking the whole project. To try it yourself, point your smartphone (iPhone preferred) to http://demo.menuito.com and give it four or five shakes. Then start tilting and have a little fun.
Keep it simple: that was probably the most important rule we had. We chose PHP because most web hosts were likely to support it, and opted to build without a database. Doing that kept the technical requirements down, but also forced us to think at a more essential level.
Writing an installer, including a self-updating module, presented a number of challenges but it’s always the most work to make features that make people’s use of a product problem-free. Installation happens by FTP, and in some circumstances tweaking some folder permissions, but in general takes about 10 minutes to get set up with most web hosts.
We also spent a lot of time on getting the theme architecture right, so that other web designers with HTML and CSS skills could make changes to our stock themes or design their own.
To test that we hired two designers and asked them to teach themselves how to build a theme we designed in Photoshop. It took them each an hour to figure out what was happening, and an hour to code the new theme once they did. It’s a low investment for a web designer, and we’ve made that learning curve easier with some good documentation, so that they can use Menuito to add value to their current restaurant customers.
We launched Menuito and have a handful of customers who give us top marks for their mobile sites (the first two are pictured below). We have plans to generalize the technology beyond restaurants, and to bring on a proper sales process so that we can build it out even more and help out more people who want to get into mobile, but can’t afford a full website redo.
Back to Work Back to Home