Facebook, Chipotle, and Sequence

Facebook, Chipotle, and Sequence

Front End Development and UX Design

Type of work
Front End Development and UX Design

Languages and Tech
HTML5, Sass, JQuery, Node, Photoshop

Date
April 2016 - September 2016

Project Link
  Website


Sequence is an American design agency situated in San Francisco. With a focus on building connected experiences, the agency has worked with clients like Facebook and Apple to create designs that streamline the development process while still providing users with a specialized experience. During the summer of 2016, I was employed as a front-end developer and helped deliver web-based projects with Chipotle Mexican Grill and Facebook for Business.

First day pictures at Sequence

First-day polaroids at the office! Find me at column 11, row 11.

Widget Development for Chipotle

Chipotle is one of America's largest chain of fast food restaurants specializing in tex-mex, and Sequence is responsible for the full-stack development and dev-ops for their websites. A majority of my term at the agency involved developing front-end widgets for their custom-house content management system. These included content grid elements that display various forms of media (text, video, images, etc.). With a large codebase surrounding the Chipotle web ecosystem, I had to learn how to examine existing architecture and integrate changes while complying to their development guidelines.

One of the projects I finished with this client involved transforming their cooking page into a responsive version for desktop and mobile version. As it currently exists, the body content of the page is contained within one image file. This strategy would render poorly on smaller screens as well as losing SEO points without the presence of indexable content. My responsibility was to decompose the visual grid elements in the page into dynamic, responsive layout widgets that would rearrange into appropriate sizes and positions for different web devices. The nature of this project specifically challenged me to write cleaner CSS3 styles that aimed to target as much grid elements I need with the least amount of lines possible.

My office desk setup

My minimalist desk setup (feat. my reflection).

Facebook for Business Prototyping

During the first quarter of my term at Sequence, I was engaged in the prototype development for one Facebook's websites, Facebook for Business. This segment of facebook serves as one of their main monetization channels, providing businesses with tools like Pages and Ads to promote their goods through their social platform.

Our team leveraged Assemble.io as a foundational static site framework for the prototype. This framework encouraged modular code development through the usage of partials and includes. It also helped simulate the creation of content modules without hard-coding data into the markup by separating the code into templates and injectable JSON.

Developing for projects like Facebook improved my front-end skills and taught me to favour elegant markup over hacky markup. The mockup designs ideated by their design team pushed us to use web technology at its cutting edge, leveraging HTML5 semantics and CSS3 transforms to make beautiful interfaces and delightful user interactions. Talking with designers and clients in meetings also taught me how to abstract highly-technical development issues in non-technical language; learning to professionally communicate my design decisions was one of the most valuable skills I gained from this project.