Design Case Study: Website to Metro Style App
The food truck website and app
The basis for this article is a food truck website that lets users browse food trucks in their area, stay up to date with the latest news, and provide user reviews of food trucks. In the design oriented case study that follows, we explore ways to reimagine the core functionality of the site and extend it as a Metro style app.
Our goal in migrating to a Metro style app was to highlight the best features of the website while maintaining parity with core functionality of the site. We determined that the Metro style app is best at letting users browse and find nearby trucks. The next figure shows the anatomy of the food truck website UI. Here we show how to translate each of these UI components to Metro design style.
- Layout and navigation
- Commands and actions
- Contracts: search, share, and settings
- Scaling and views