We gave thought to what a mobile user needs most when looking for a new restaurant on-the-go — Menuism's original mobile interface didn't prioritize quick, at-a-glance information which made restaurant decisions difficult for the user while traveling. We added quick links to the most important actions, including links for creating an online reservation or order, viewing the menu, viewing directions, and viewing the restaurant's website. We also increased the importance of the search box, adding it to the main header bar. Originally, the search function was buried in secondary navigation, making it difficult to access.
While the client ultimately didn't choose to use the designs that were created and instead decided to focus on a native mobile app, I learned a ton about what works on a mobile HTML interface and what doesn't.
We started with basic wireframes, sketched on paper and in Balsamiq, before I started building the interface in HTML/CSS. The static HTML mockups I made are built on Bootstrap.
The client also asked me to design an iOS app icon for their flagship iPhone app, Restaurant Menus Nearby.
These are screenshots of the HTML mockups of the design I created for Menuism's mobile web interface.
The series of three images on the right show navigation actions – we used a dropdown “hamburger” menu to show main navigation and a separate search box for queries.
