Morsel was a story-telling platform for those who love food. Built around a community of people passionate about food and drink with a curiosity of what inspires others, Morsel allowed you to see the stories behind the chef's vision, the mixologist's creativity, the sommelier's pairings and the home-cook's creative meals all in one place.
As the first hire and only front-end developer, I was responsible for full UI design and development of eatmorsel.com. This included working with the full web stack, interfacing with our API, prototyping and user research.
Morsel on Mobile
Full functionality (without sacrificing speed) on mobile was a priority for us, so I built the site as a fully responsive single-page app, written in AngularJS on top of a simple Express (Node.js) web server. This allowed functionality updates to be in one codebase, cutting down development time, as well as keeping UI elements consistent across all device sizes.
To grow quickly and consistently across platforms, my teammate built a RESTful API in Ruby on Rails that would interface with both an iOS app and my web app, which further improved perceived loading times on mobile web by only needing to load front-end assets once per user session.
Some of the things I implemented in the Angular app were file uploads, routing, inline form validations (with client and server side errors) and plenty of responsive, interactive layouts. The front-end development workflow used Grunt with Handlebars templates, Sass/Compass (starting from a custom Twitter Bootstrap configuration) and deployed to Heroku.
I had the opportunity to conduct both formative and summative user research (think interviewing a chef in their restaurant) and develop user personas. We used our findings to refine the morsel creation process, among other user flows.
To track user behavior we used Mixpanel and Google Analytics and integrated Rollbar for error reporting.