SapientNitro Responsive Site Design

Project Overview

Experience Director on a UX team of three. (SapientNitro - full-time employee)

Working closely with a variety teams inside SapientNitro, our job was to push our UX, Design, and Technology tracks to create a unique agency experience. The project spanned across several offices including Los Angeles, New York, and Toronto while the senior leadership at SapientNitro served as our day-to-day clients.

The sapientnitro.com site won several awards including 'User Experience - Gold' and 'Self-promotion - Silver' at the W3 Awards.

I've rarely met a user experience strategist with such a deep understanding of content, design, and technology--not to mention his own craft.

Marlowe Beckley Sr. Manager Content Strategy at SapientNitro

Design Output

Design Animatic

Populating pages with Story Streams

The new SapientNitro.com needed to align with our agency’s new brand positioning and more importantly, look, feel and act in a way that showed our digital chops – from both a creative and a technology perspective.

Each section of the site provides connected and contextualized pathways. At any point, users have seamless access into our thinking, work, culture and influence to give the site a non-linear, at-a-glance feel.

Homepage & Navigation

Promote, Find, and Filter

We knew the site would need to handle frequent updates and timely promotion of work, awards, or thought leadership. We devised a simple fixed navigational scheme: users would scroll vertically to move between each section of the site, then scroll horizontally to explore a particular area of content.

Showcasing Project Work

Telling a client story

From case studies to individual office pages, each section was designed to be modular. This gave us the flexibility for content to be scaled up or down without taking away from the integrity of the experience.

Attracting the best talent

Promoting Offices and Culture at SapientNitro

While the primary focus of any agency site is to attract clients, our secondary objective was to pursue the best talent from all over the world. The structure provides a glimpse into the individuality of each office and help illustrate a feeling of what it is like to work here.

Elements of Fun & Delight

All work and no play

There were several experiences across the site that were designed to be playful surprises, including local social integration, cheeky office stats, and animated weather updates.

Process

Storyscaping Framework

Populating pages with Story Streams

Pages throughout the experience have a focused narrative, while still aggregating content from different sections of the site. This creates a modular and adaptive Story Stream that is both dynamic and relevant.

  • UX Strategy - Storyscaping Framework
  • UX Strategy - Storyscaping Framework
  • UX Strategy - Storyscaping Framework
  • UX Strategy - Storyscaping Framework

Wireframes

The Initial Foundation

I collaborated with the Design Director and crafted the overall architecture of the new SapientNitro site. Working with the UX team, with developed the full interaction schema and component list to hand-off to the design team.

  • Wireframe Annotations - SapientNitro
  • Wireframe Annotations - SapientNitro
  • Wireframe Annotations - SapientNitro
  • Wireframe Annotations - SapientNitro
  • Wireframe Annotations - SapientNitro
  • Wireframe Annotations - SapientNitro
  • Wireframe Annotations - SapientNitro
  • Wireframe Annotations - SapientNitro

Interaction Guides & Annotations

Documenting for off-shore development teams

Since we were working with an off-shore development team, it was important that all the pages, components, and interactions were sufficiently documented. Below is a sample of the 200 page interaction guide that was created to map out each component across all viewports.

  • WF Annotations - SapientNitro
  • WF Annotations - SapientNitro
  • WF Annotations - SapientNitro
  • WF Annotations - SapientNitro
  • WF Annotations - SapientNitro
  • WF Annotations - SapientNitro