Aladdin Menu Cycle

When the tools available are kinda lame, make new tools.


The purpose of this project was to, well, let's be honest - it was an excuse to practice HTML/CSS within my role as an Executive Chef. I was tasked with creating a 4 week menu cycle at Pine Manor College and saw this as a wonderful opportunity to not only write a menu, but write some code as well. Of course it became more than a way to kill time while the kiddies were on break.

The platform we use for menu development, Starchef, ties into our menu boards and student accessible kiosk to provide detailed nutritional information (allergies, calories, macros etc.) to the students. It's a handy tool, that Starchef, but a relatively complicated site that is only accessible to managers, and realistically only usable by those who've spent some time with it. Communicating menu revisions to my superiors involved the antiquated process of manually inputting all menu items into an Excel spreadsheet and sharing via e-mail attachment. Communicating menus to the staff involved creating daily production sheets, wasting paper and ink.

Go ahead and click on the image if you'd like to view the live site in a new tab.


I used CSS Flexbox and media queries to ensure that the site would be responsive across devices - the majority of the staff that would be using it would be doing so on their older android mobile devices, whereas management would be seeing it mainly on desktop PCs. I also added a contenteditable attribute such that menu items could be temporarily changed in context and shared via screen capture. Theoretically, this could be used to take suggestions from the school's student body and faculty as well, but testing this never came to fruition.

Formerly trees.
Atom ninja-ing past the company firewall.
Starchef UI, inducer of
cognitive overload.

After doing a brief style guide of Aladdin's corporate site, I adapted the color scheme to a material design palette and paired the company's typeface of choice, Segoe, with a slightly more interesting Staatliches which seemed more apropos in the context of a college setting.
The header includes a menu for the four weeks of menus for easy navigation around the entire cycle without overwhelming the viewer with four weeks worth of items to sort through simultaneously, as well as a link to the corporate website and the university's.
For the body, daily menus were separated via 'floating' cards to enable viewers to easily differentiate one day from the next. Were I more proficient with coding I'd likely ensure that currentDay be displayed more prominently upon loading.
The footer was originally only to include a link for managers with login information to the login page, however our district manager requested a spreadsheet version (he'd be using it to train a new chef at another location) of the menus, so this also was included in the footer section.


The fundamental takeaway from this project was coming to the understanding that good ideas can only be enacted with the support of a team. While I was justifiably proud of myself for going above and beyond the necessary task of simply creating a new menu cycle - and doing so 2 days prior to deadline - without the benefit of having others onboard with the concept it failed to gain traction. The primary stakeholder's (in this case, the District Manager) reaction was nothing more than: "Thanks!" He has since been replaced by an even more archaic prototypical bureaucrat whom I suspect will be markedly less innovative.

That said, had I been able to enlist community support and focus the stakeholders' attentional resources toward the theoretical financial and political benefits of putting resources toward an Aladdin-specific menu management system, the outcome may have been different.