Pocket

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

[imgembed imageid=’4092′ alt=’smacss presentation’ caption=’Slide from a presentation to the Animoto web development team on SMACSS, a framework for CSS reorganization.’]

[imgembed imageid=’4093′ alt=’smacss presentation’]

[imgembed imageid=’4094′ alt=’coding guidelines’ caption=’CSS coding guidelines for fellow web developers.’]

[imgembed imageid=’4095′ alt=’rwd presentation’ caption=’Slide from a presentation on responsive web design changes given team-wide.’]

[imgembed imageid=’4096′ alt=’sketch wireframe’ caption=’Sketch wireframes for features page.’]

[imgembed imageid=’4097′ alt=’final features page’ caption=’The final features page on a desktop browser (see top banner for mobile perspective.)’]

[imgembed imageid=’4098′ alt=’sketch wireframe’ caption=’Sketch wireframes for pricing page.’]

[imgembed imageid=’4099′ alt=’final pricing page’ caption=’Final pricing page on various devices.’]