Morsel is a storytelling platform for people who love food. Built around a community of people passionate about food and drink with a curiosity about what inspires others, Morsel allows you to understand the chef's vision, the mixologist's creativity, the sommelier's understanding of what makes a great pairing and the home-cook's creative meals all in one place.
As the first hire and lone front-end developer, I was responsible for full UI design and development of the site. 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 see what our users were up to on the site we used Mixpanel and Google Analytics and integrated Rollbar for error reporting.