Animoto: RWD corporate redesign

A new layout, branding and code base for a rapidly growing mobile audience.

Animoto is a video startup in New York. Through applications on the web, iOS and Android, users upload photos, add a custom soundtrack and theme, and produce a high quality video to share. Soon after I joined in 2012 as a senior front end engineer, the company saw significant increases to their external facing corporate website from mobile browsers. Yet the existing fixed design was optimized for desktop and in need of a refresh.

We had a strong in-house design team, but they were few in numbers and stretched thin among the needs of our engineering staff. Because of my experience and interest in responsive web design, the design team mostly focused on the aesthetics, branding, and initial concept for our rebranding. I was tasked with wireframing, research and development.

Core development

  • Oversaw and managed site wide CSS and HTML5 on animoto.com.
  • Collaborated with junior developers for a consistent web experience across multiple devices and platforms, including mobile.
  • Lead developer on site wide redesign and rebranding project, instigating a module based (SMACSS) CSS reorganization and a responsive web design framework.

Wireframing, research

  • Created wireframes in Sketch for resigned RWD-friendly pages at different viewports
  • Brainstormed, sketched and designed wireframes for various marketing initiatives
  • Ran user research interviews with founders, designers, other longtime staff at Animoto
  • Formulated A/B tests to test with live users based on various design direction hypothesizes
smacss presentation
Slide from a presentation to the Animoto web development team on SMACSS, a framework for CSS reorganization.
smacss presentation
coding guidelines
CSS coding guidelines for fellow web developers.
rwd presentation
Slide from a presentation on responsive web design changes given team-wide.
sketch wireframe
Sketch wireframes for features page.
final features page
The final features page on a desktop browser (see top banner for mobile perspective.)
sketch wireframe
Sketch wireframes for pricing page.
final pricing page
Final pricing page on various devices.