Over the past few weeks, I got the awesome opportunity to work with Campus Enterprises to put together a replacement for the iPad dining app that was being used on touch screen monitors in various dining facilities on campus. The previous application was put together by previous OCC’ers Jason and Garrison roughly 5-6 years ago, and was in need of a revamp.
The project itself was in response to a concern for a clear lack of ADA compliance. As I later found out, ADA compliance as it relates to interactive technology isn’t exactly the most clear or straightforward. However, because the application would be used on a wall-mounted screen, it was absolutely imperative that the application be completely navigable from the bottom two inches of the display. Fortunately, because the application also needed to follow University Branding guidelines, Bootstrap was the clear choice, and made things easy.
Deciding How to Proceed
The previous iPad app was written in primarily PHP with some progressive Javascript. Its function was straightforward: provide an interface for navigating an API (dining menu data).
Initially, we weren’t exactly sure how to approach this project. Since the primary concern was that the existing app did not in its current form satisfy ADA compliance (or, usability within the 2″ space), one possible direction was to modify the existing code and add a navigation bar that would mimic the functionality on the main screen.
The alternative, of course, was to rewrite the application completely. And while I can certainly agree there are times when it’s more appropriate to refactor existing code than to start over, I felt strongly that this was one of those times where it was worth starting from scratch. For starters, the original code was old enough that even a refactor would have changed it in a major way. Another glaring issue was the need for the app to be on brand, and more representative of the university, not to mention some of the visibility concerns concerning color contrast.
The most prominent argument came down to wanting to keep it simple. As I previously mentioned, it merely needed to be able to provide visuals for data coming from an endpoint. It was because of this that I decided to use a Javascript framework (specifically VueJS, although Angular was a strong contender!).
Having only used VueJS sparingly in a few side-projects, this was a great opportunity to get familiar with what it had to offer. Fortunately, it had answers to all of the problems I needed to solve, and it simply became a matter of learning how to implement them.
After a handful of weeks, some exciting dialogue with my colleague Dan Waller about the mobile API that is driving the application, many different variations of layouts (although let’s be honest, Bootstrap can only do so much!), and just 3 live tests later, we now have a functioning second rendition, capable of all the things the previous application did, with a few new improvements.
Improvements to the UI
Now, when a restaurant is selected, you get a clear indication of the location you are viewing. In addition, menu items are clear and easy to interact with. Instead of having a prepopulated selection of allergens, items are annotated via icons. A legend to the right of the menu guides the user, and also allows them to filter the menu, hiding a particular allergen.
Each of the interactive elements is represented in the navigation bar, enabling users who may be confined to the bottom half of the screen to make use of all of the available functions.
The popup dialog providing nutritional info also got a makeover, correcting issues like spillover in the ingredients section, as well as providing allergen information in the modal and generally improving presentation.
With the help of VueJS’ transition control, components fade in and out of view, making the experience that much more seamless.
Components in VueJS help encourage the concept of a single-page application by loading all elements from the start. A router assists with displaying the appropriate elements, and data is passed easily from one component to the next.
Another concern, which ultimately lead to the decision to pick VueJS over Angular was the package size. In its entirety, the application with all elements, graphics, JS dependencies, and fonts weighs about 181kb.
Talley Kiosk Is Live!
The app was recently officially launched in the Talley Student Center. So the next time you find yourself in the area, swing by the kiosk located to the right of Jason’s Deli and give it a try. While we don’t know for certain what the future is for Campus Enterprise’s use of this application, we expect to see it implemented in other dining locations, to include The Oval on Cententennial Campus, as well as the dining halls like Fountain, Case, and Clark.