Background

We work in an industry where the motto is build >> measure >> learn, repeat. In reality the demands to release new features or prove profitability mean we often just build and move on.

Working on the refactor of Nickelodeon's web platform for Nick.com then NickJr.com was that rare opportunity to iterate on the foundational aspects of a product, resulting in improved usability and increased accessibility. It was product iteration at its best.

PUSHING THE LIMITS
OF RESPONSIVE WEB

The ask was to create something totally different from the competition. The approved concept emphasized guided content discovery over user-motivated navigation, as a way to introduce kids to new characters and content. The design prioritized landscape orientation to take advantage of bigger screens with wider aspect ratios. This was an effort to create an immersive, fullscreen, video-watching and game-playing experience.

Two Websites in One

My first task was to create wireframes for a variety of page types and their breakpoints, all based off a concept designed for a 1366x768 viewport. I quickly learned that each orientation necessitated it's own responsive behaviors.

Portrait designs were relatively simple and followed typical browser responsiveness.

Landscape behaviors were much more challenging. I worked with a great group of developers to create rules for custom responsiveness based on browser height.

See master wireframes for the breadth of custom responsiveness we created

See sample interaction requirements for the depth of details I compiled for each for each feature — See s ample interaction requirements for the depth of details I compiled for each for each feature

Adapting to the Team

The UX Lead created concepts using Adobe Fireworks and Flash, so I learned Fireworks and brushed up on my Flash. He also prototyped in Proto.io, so I learned Proto.io. The Product Manager preferred Axure's html prototypes for it's fidelity to browse… — The UX Lead created concepts using Adobe Fireworks and Flash, so I learned Fireworks and brushed up on my Flash. He also prototyped in Proto.io, so I learned Proto.io. The Product Manager preferred Axure's html prototypes for it's fidelity to browser behaviors — so I learned Axure. Stories and requirements were written in Jira, so ... you get the point.

Pushing Through Performance Woes

Site performance was weighed down by the two in one design (explained above) and content stream logic (to be explained later in this case study). Quickly switching between orientations often crashed the site, and it didn't help that mobile users were connected via cell data, not wifi. The custom landscape responsiveness proved extra challenging on mobile since vertical scroll (prohibited in our design) is essential to the hide/reveal interactions of browser chrome, therefore limiting the usable area for the site.

Just one of hundreds of conversations I had with devs on tiny interaction adjustments we could do to lighten the load on performance. This snippet is the end of a long back and forth about animations, pagination and image loading.
*And yes, I take screenshots of my work victories and hilarious exchanges.*

Game end level "Play Game" CTA added an extra step before game play but allowed us to hide the site navigation and browser chrome for fullscreen play.

Hours were spent debating the interaction that would bring back navigation UI and browser chrome. Timed reveals or screen taps could not be used since game play involves waiting and tapping interactions. Finally we settled on the "Exit" CTA that som… — Hours were spent debating the interaction that would bring back navigation UI and browser chrome. Timed reveals or screen taps could not be used since game play involves waiting and tapping interactions. Finally we settled on the "Exit" CTA that sometimes covered game UI but we had to move on.

You're probably shaking your head saying, "this is why you design mobile first!" And while I completely agree, you often have to make the most of the hand you're dealt, do everything in your power to hit the deadline, and hope you get to improve things the next time around. Spoiler alert: there's a happy ending ... after the commercial break.

COMMERCIAL BREAK

(and my excuse to use this awesome gif)

Following the launch of Nick.com, I was asked to share my learnings and lead the UX for the redesign of NickJr.com. Since we were using the same platform as Nick we already knew the major improvements we wanted tackle. The nuances between the user groups resulted in additional innovations, which were eventually implemented on both sites because of their significant impact on usability.

Refactoring the Refactor

The new platform's poor browsing experience on mobile and older devices did not sit well with me. Fortunately, under the leadership of NickJr web's Product Manager we were able to convince stakeholders to give us time to rethink the basic structure of the content stream (aka: "my baby" that I'll discuss in depth in a bit).

RESEARCH AND MOBILE FIRST

Using Omniture I used browser width and height data to determine which viewport sizes should get priority after mobile. I created a template that the team could reference for design and development guidelines. I also pushed hard for the removal of the custom landscape responsiveness on mobile to reduce site crashes and browser chrome idiosyncrasies.

Doing the Research

Omniture browser height trend report Nov 2014 - Apr 2015

Omniture browser width trend report Nov 2014 - Apr 2015

Omniture browser height rank report Nov 2014 - Apr 2015

Omniture browser width rank report Nov 2014 - Apr 2015

Creating Templates

Breakpoint simplification. As a result of the research-based browser templates the Lead Architect was able to eliminate roughly 25% of the original breakpoint definitions.

Simplifying Mobile

Recapping Nick's mobile woes:

The two in one site design resulted in lagging content load times and choppy scrolling.
Switching device orientation in quick succession crashed the site.
Horizontal scroll didn't take advantage of default browser behaviors that hid browser chrome when the user scrolls down the page and reveals it when the user scrolls back up. This resulted in idiosyncratic browser behaviors that interfered with game play, video watching and browsing.

For NickJr.com I revised the design for mobile. I eliminated horizontal scroll and all custom landscape responsiveness. This resolved site crashes on device orientation changes and browser chrome usability issues.

We still had to deal with laggy content load and choppy browsing.

Detangling the Content Stream

Under the pressure to create something completely new for Nick.com, insufficient time was given to developing the architecture of the content browsing component of the site. A tangled mess of different content streams braided together was built to satisfy launch requirements, but it was not at all scalable. The site's foundation had to be restructured or else we'd be building NickJr web on quicksand.

Nick Content Stream