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.
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.
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.
