June 6, 2016Comments are off for this post.


Building a Code-Friendly Design

Click for TL;DR (Summary)
Our goal was to create a website for the Getty art initiative, Pacific Standard Time. As a project for an art client, we would be faced with the temptation to create outlandish and non-code-friendly designs; however we were able to design responsible through open communication with our local tech team and prototyping within code and Axure.

For most web projects, I believe UX designers can get by without knowing how to code.  Static sites can be designed with simple click through interactivity and a good developer should be able to have a open dialog about requirements.  Where it gets tricky is when interactions become more animated and complex; when it comes to these more "creatively open" projects, there can be the propensity to create a development nightmare. Therefore I have always been a proponent of code-responsible design--using an approach (and tools) that understand and acknowledge (at least at a high level) the systems that actually produce the final product.

About

Pacific Standard Time

Pacific Standard Time (PST) is an art initiative held by the Getty foundation every few years across Southern California. Various art exhibitions are featured over the course of the initiative, all centered around a common Southern-California-based theme. It is a collaborative effort between various participants and sponsors, so there are a lot of stakeholders that need to be taken into consideration throughout the process.

The Task & Team

Those of us at TBWA\Chiat\Day were tasked with doing their visual rebranding, creating their advertising as well as designing their updated website. As a User Experience Designer, I was brought in just for the website portion.  Also working on the project were Visual Design Director Anders Svensson and Lester Dizon, the UX Lead.  The actual development would be outsourced to a company called Area360. Because this was a website for an art initiative, visual design was of the utmost importance so Lester and I did our UX work at the same time that Anders did visual explorations, taking a pseudo-Agile approach (quite a step from the traditional waterfall model that traditional advertising agencies are built upon).

The Situation

The Needs

The first step in understanding what we were building was understanding the requirements of the site:

Introduction and Information

First and foremost, the website is meant to introduce people to Pacific Standard Time. The initiative has been around for something like 14 years. I'd imagine with backing by Getty and every major art institution in Southern California, it is well-known in the art circles. However, the site is also meant as an opportunity to introduce art to the uninitiated by drawing a connection with the Southern Californians and showing art in the context of their rich history. But, of course, there will always be that issue of brand equity, as "Pacific Standard Time" is usually said in the context of time zone.

Exhibition Information

The site serves as a way to excite people about the different exhibitions that are participating in the initiative. Ideally this can provide a preview of the content, a brief background of what went into each art exhibit as well as times, dates and locations.

Locations

Dozens of partners all over Southern California are opening their doors for this event, so there isn't a central location where someone can just "attend" Pacific Standard Time. There needs to be some way to list all of the different locations for Pacific Standard Time participants in one place.

Press Materials

Press are absolutely pivotal in driving interest to PST. A lot of people are initially resistant to new things like art, but are more open minded in the context of media partners they follow (for example LAist or Timeout). In order to best-equip these press partners in drawing in more visitors, we need to provide information and high-resolution assets.

Sponsor Love

Pacific Standard Time is part of a non-profit organization and a lot of its operational income is from sponsors. There needs to be a place to present these sponsors on the website as a way to show appreciation.

Competitive Research

Art, like anything else that vies for attention, does have a level of competition to it; the PST website would surely be compared to the websites of the other art exhibitions both in Southern California an across the world.  Even if the average user doesn't make a conscious effort in comparing the Pacific Standard site to, say, the Guggenheim's website, there is still the possibility of a subconscious expectations of content and presentation.  Therefore I took a look at art events and other popular events in an effort to benchmark the industry standard as well as grade the utility of the Pacific Standard Time website.  The Competitive Analysis can be found below:

Pacific-Standard-Time-Competitive

We took a look at not only the Art institutions but also cultural events in which patterns for finding event information would be practiced and reinforced. Therefore, in addition to big art names like LACMA, MOCA and The Broad, we looked at events like Coachella and Creative Time Summit.  I was able to grade each of the categories with a Green (positive), Yellow (neutral) and Red (negative) background so we were able to lock down best practice features as well as growth opportunities.  Through this we were able to work with the clients to identify the task we had ahead of us.

The Challenge

By looking into the competitive sites, we were able to settle on a goal of a friendly medium--it would have the utility of the Los Angeles County Museum of Art website but also feature some of the magic that went into Guggenheim's interactive exhibition discovery process. This was our compromise into making a site that would be able to stand alongside the art that it is featuring while still retaining usability and functionality.

Guggenheim

Guggenheim

LACMA

LACMA

Now it would be easy to get carried away with injecting art into a site--working with a set schedule and an external development partner, we had to be very conscious of feasibility and scope as we fit into a larger waterfall process. Therefore we found that the best way to design the site in a way that would provide clear direction to the development team would be to build a functional prototype in Axure RP Pro. Because the design team was all in-house, we would be able to tweak and iterate all of the interactions quickly and be able to hand off the prototype for relatively seamless development.

The Solution

For this particular write-up, we're going to gloss over the lion's share of the pre-prototyping design process. Yes, we have some robust wireframes and yes, a lot of work happened prior to the actual prototype. But for the titular subject matter of designing a code-friendly site, the prototype provided the richest source of documentation for our development partner. Just to provide context, though, below you can find the visual comps that the UX team settled on with Anders from visual design:

Screen Shot 2016-06-06 at 12.17.35 AM

And without further ado, here are some of the biggest learnings from creating a code-friendly design:

Imitate Front-end Languages

Axure is a certifiable pocket knife of tools. In exchange for ease-of-use, it has one of the most robust toolsets for creating rich experiences with nearly production-level interactions. The design UI itself, however cluttered, creates a framework of drag-and-drop objects that can change and react to most web events and actions without any knowledge of front-end languages. However, by remaining a tool that could be universally used, devoid of client-side compatibility issues, Axure-exported websites are made of coordinate-positioned divs and flattened images. This meant that true CSS would not be natively included and therefore would need to be imitated when possible. This caused some hangups where the CSS structure would normally have been simple.  Let's take, for example, the simple structure of having two window-sized sections stacked on top of each other with the second div having 400px content in the center:

<style>
.section {
width: 100vw;
height: 100vh;
}
.content {
margin-left: auto;
margin-right: auto;
width: 100px;
}
</style>
<div class="section" id="section1"> Content
</div>
<div class="section" id="section2">
<div class="content" id="centerContent1"> More Content
</div>
</div>

This is a fairly light and straightforward approach and can easily be implemented within a webpage. On the other hand, in order to retain proper div size and positioning in Axure, we would need to understand when events needed to be fired in order to recalculate coordinates and sizes.  I then created a framework was based on event listeners like onPageLoad (when the page loads), onWindowResize (every time the window size is changed) and onMove (every time a specified object is moved).

onPageLoad move windowResizeTrigger by [0,0]

onWindowResize move windowResizeTrigger by [0,0]

For windowResize Trigger, onMove

  • Set section1 size to [window.width x window.height]
  • Set section2 size to [window.width x window.height]
  • Set centerContent1 size to [400 x section2.height]
  • Move section1 to [0,0]
  • Move section2 to [0, section1.height]
  • Move centerContent1 to [(section2.width-this.width)/2, 0]

As you can see, it is equal parts doable and unintuitive (and most assuredly not native to the Axure platform). Sure, the nature of this solution means that the page will be slowed by the Javascript event listeners looking for the window resize in order to fire this trigger.  However this is meant to be a communication tool for the developer to write production code, and this type of sizing and positioning isn't slowed down enough to warrant moving to a fully-coded prototype.

When in doubt, inject code

The above example can be done within the realm of Axure (or potentially any substantial prototyping tool).  However, there are some things that are not natively going to work.  Take for example the Pacific Standard Time scroll interaction.  At the top of the page, the Full PST Logo (sundial with words) is shown as part of a fixed upper nav.  However, on scroll, the navigation shrinks down and the image actually changes to the Condensed PST Logo (sundial only).

Logo Gif

Let's first take a look at how this might be built within Axure

  • Create a dynamic panel Nav to be fixed to 0,0
  • Within Nav, create another dynamic panel called navLogo with two states:
    • State 1: Background-image is Full PST Logo (sundial with words)
    • State 2: Background-image is Condensed PST Logo (sundial only)
  • onWindowScroll: set var scrollAmount = [window.scrollY]
  • onWindowScroll: move navCollapseTrigger
    • Move navCollapseTrigger
  • onMove for navCollapseTrigger:
    • if scrollAmount = 0:
      • Set navLogo to state 1 (fade 100 ms)
      • Set size navLogo to 84px (pin top left 100ms)
    • else if scrollAmount does not equal 0:
      • set navLogo to state 2 (fade 100ms)
      • Set size navLogo to 64px (pin top left 100ms)

In theory this setup should work. Functionally, there's a scroll listener, and every time a scroll happens, it activates a trigger that checks to see if the scroll is all the way at the top.  If it is, it then activates the grow function; otherwise it activates the shrink function. The problem is in the inefficiency of the event listeners.  The onWindowScroll function isn't perfectly firing every pixel, so it misses the 0px mark on occasion.  On top of that, each of the 100ms actions is uninterruptible, so scrolling to and from the top tends to break.  Since this isn't wasn't an ideal situation for a functional prototype, the better option was to use a hybrid of Axure and code.  Axure projects can be exported with a code injected into the <head> of the page, so this particular feature would do well with jQuery's addClass method:

<script type="text/javascript">
        $(window).scroll(function() {
                var sc = $(window).scrollTop()
                if (sc = 0) {
                        $("[data-label='JS Header']").addClass("small");
               }  else {
                      $("[data-label='JS Header']").removeClass("small");
}
        });
</script>

<style>
        div [data-label="JS Header"]{
                height: 84px;
        }
        div .small {
                height: 64px;
        }
</style>

*Note: Formatting above is handled by WordPress; every time I publish, spacing takes on a mind of its own.

The initial benefit to doing a hybrid meant that I was able to make the prototype more functional since it didn't rely on physical manipulation of javascript event listener. Additionally this meant that the project was closer to a language that developers would be able to translate into production code; something pivotal in a relationship with an external development partner.

Create a Framework for easy tweaking

In the initial designs for the Pacific Standard Time "About" page, there were various content blocks that would scroll and fade in and out via parallax.  Prior to this I hadn't worked on a parallax project and I had an incredibly difficult time wrapping my head around the idea of scrolling via pixels and animation, and I was coming up with some really insane and nonsensical formulas for positioning:

Parallax

However, at some point around around 2 or 3am I finally realized something: the scroll is a timeline and all of the actions are simply pieces on that timeline.  This seemed like a no-brainer to me since I have a background in film editing from when I once had aspirations of becoming the next Spielberg. Therefore I was able to create a formula which converted scroll values into modular timelines of 10000 units, which I would then map out interactions.

Parallax 2

It was around this time that I also realized that, although I was building this prototype and working on bringing some of the "magic" to life, I wasn't the only stakeholder involved in the process. I would need some way to tweak the timing and positioning quickly and effectively; therefore I needed to create a live editor. Luckily I had the foresight to not hardcode anything and instead use local variables for all of the values which affected the animation.  I then created a barebones editor interface (lovingly dubbed the parallax engine), allowing us to make changes on the fly and enabling us to fine tune a solution within minutes.

Parallax Engine

Results

Phase one of the Pacific Standard Time website is live currently in preparation for the actual PST initiative start date of 2017. The jury is still out on the effectiveness of the website, but certainly the design process was beneficial to this particular workflow. In addition to creating both an engaging and code-responsible design, we were also able to create frameworks which would be able to be used in other projects. I spoke with our TBWA\Chiat\Day technology lead about the parallax engine that I built, and I was able to help him write formulas for another parallax project that we're working on.

Final Axure Prototype

Live PST Website

April 3, 20161 Comment


The Rat:
Immersive Native Storytelling

Click for TL;DR (Summary)
We (TBWA\Chiat\Day) were tasked by Netflix to create social media platform-native immersive experiences. As a UX designer trying to understand how to best achieve immersion, I needed to understand how the technical limitations of each platform as well as cater to each platform's user behavior. In the end, we created similar consumer-facing experiences with very different back end structures, thereby creating a complex structure under a simple UI in order to eliminate friction and do the Netflix brand proud.  The real sign of success was that the critical and consumer reception of the campaign was about the content and not about the platform that we designed.

The Setup

Netflix has made itself a household name by providing easy-to-binge content with minimal friction stopping users from chaining episodes together.  With shows like House of Cards and Orange is the New Black, it has taken strides towards establishing itself as a formidable original content creator.  So as keepers of the brand, how would a creative advertising agency help further their noble cause?

The Concept: Create more awesome content in the form of an ad

The digital team was approached with a simple concept for a TV spot: an old-school mobster is angered at his subordinate, Bobby, for spoiling Orange is the New Black.  In gripping cinematic fashion, he pours honey over Bobby (dubbed "The Rat") and gives the audiences a choice: either push him into a pit of rats or let him go free.  Not only can the viewers choose Bobby’s fate (thereby seeing their choice through to fruition), but they can also see if they shared the popular opinion.  Easy enough, right?  Famous last words.

The digital team was tasked with creating an engaging and immersive experience, a task commonly done through the flexibility of web design.  However, the brief had a specific criteria: the experience must be run entirely within the native Facebook and YouTube platforms.  Underneath the deceptively simple idea lay a plethora of frustrating technical problems.  In order to fully understand the issues with each platform, it was important to understand the user behaviors on each.

Facebook

THE USER

Netflix has the multi-million Facebook following to have substantial reach-- but the problem with Facebook (and nearly any other social media platform) is engagement.  Facebook is like the wild west where every post is gunning for eyes.  Arbitrary algorithms aside, people scan posts quickly and make snap judgments about whether or not to engage or stop scrolling.  This would be an uphill battle for eyes.

The Problem

It's a little tricky to design an interactive element when you lack any real interactivity. Those familiar with Facebook understand that it is nearly impossible to control how content is portrayed; they have extensive ad guidelines which dictate a set of rules and are extremely judicious with those that break them.  The concept of "choose-your-own-adventure" followed a simple narrative structure: Consume the video content first, then make a decision.  However, the structure of the Facebook post was the opposite: copy/URL followed by video.

Screen Shot 2016-04-02 at 10.34.05 PM

 

At the time, Facebook Video was a relatively new product, so the only interaction was a link out to an external website at the end of a video.

 

THE Solution

I am of the firm belief that a UX professional is responsible for understanding and maintaining the relationship between a brand and its users.  In this particular case, the immersion started the moment a user read the copy above the video (or if we're being honest, the user skipped the copy altogether and started to watch the video).  Putting the "choose-your-own-adventure" choices in the copy would have been tacky and awkward-- something that we would not allow to reflect the Netflix brand.  This project hinged on this narrative immersion, so we needed to be a little creative.

We initially shied away from the idea of a microsite because we thought that the hand off from native content to a web view (in the Facebook app) would break immersion, requiring an extra-experiential level of engagement.  However we tried to abstract the user's journey in this scenario, marking areas of friction.

  1. User passively opts to watch a video (something marketers don't like to hear but honestly know deep down)
  2. Engagement grows as the user is taken in by the Scorsese-esque TV spot
  3. Towards the end, the user is at peak engagement; they've forgotten where they are at as they gasp at the climax: the mobster is about to kill the Rat!
  4. The video freezes and a CTA comes up to "learn more"-- effectively giving the user a cliffhanger itch to know what happens
  5. The user is taken to a microsite with the two choices to pick back up where they left off
  6. The chosen "ending" plays and the user's itch is scratched

 

One of the hardest decisions I've had to make up to this point was to really admit to myself that #5 was out of my control; there was going to be a potentially jarring experience because that "Replay Video/Learn More" CTA was going to pop up and that was the only interactive option available on the platform.  However, if the user had to drop of out immersion, I could help control how they landed within the microsite itself.

And that was how the "Decision Portal" was born.

Screen Shot 2016-04-02 at 10.43.27 PM
If my marketing background ever came in handy, this was it.  I coined our microsite a "decision portal".

Now, you might be asking yourself, "Why does the decision portal moniker matter?"  This was absolutely crucial because I needed to convince every stakeholder involved that this experience needed to be seamless.

Taking a step back, we need to understand just how many parties were involved with this project. In addition to the standard PM/UX/Visual/Developer digital team, there was our internal creative team, the commercial film company who shot the spot, the post production studio putting it together, a separate sound team, and potentially just as many people from the Netflix side all trying to work on one project.  Imagine if I called this a "microsite". The traditional creatives might check out, because honestly their bread and butter is TV spots.  The editors might not have worked so hard on fine-tuning the video to synchronize properly between the cuts.  Our front end developer would not understand the importance if mirroring UI elements with the video and pre-loading video content to make the immersion seamless.  Rebranding a microsite as a "decision portal" is probably my best contribution to the advertising industry.  And it worked.

Imagine a Facebook app user watching this video on the edge of their seat as the mobster pours honey over Bobby's head with a swarm of rats scurrying in the background.  You can feel the tension in the air as the mobster ramps up to kick Bobby into the pit when all of a sudden the video freezes on Bobby's terrified face.  A CTA then appears, linking out to a website to see more, one that opens the same exact freeze frame with a simple mobile-first UI to "Push Bobby" or "Save Bobby."  Selecting either option plays the video right where the user left off.

 

Screen Shot 2016-04-02 at 10.32.25 PM

To be totally fair, the process of selling the "decision portal" wasn't just fancy marketing speak.   On paper, it might look as though taking a user to an external site would ruin the immersion. What really allowed this to be sold through was proving the concept through a rapid prototype which could be tested with a real Facebook Video. During the experimentation phase of the project, I was able to quickly create a placeholder site in Axure for all parties to walk through the flow to make sure we were all on the same page and working towards the best solution.

When you really think about it, Facebook has teams of dozens if not hundreds of designers working to create sticky products.  They've worked to reduce the cognitive load of interacting with external content by building an integrated browser that has trained users to trust they can open a site and come back to the feed right where they left off.  All we did was understand that a modicum of friction was okay in the Facebook mental model; we just had to make sure there was a decent payoff.

View Prototype

YouTube

The User

The behavior of YouTube users is vastly different from that of Facebook users.  Success on Facebook relies on capturing eyes with an engaging newsfeed "preview" , thereby earning the opt-in click to have 100% engagement for a few minutes.  By contrast, YouTubers don't discover content on a feed.  They typically don't subscribe to big brands, but instead original content creators and indie influencers.  However, once watching a video, viewers chain watch, usually drawn by thumbnails and engaging title copy on the side bar.  Netflix's sub-million subscriber count wasn't going to draw in many viewers, so the understanding was that YouTube's TrueView product would be used, supported by paid media.  Therefore the main focus at this point was leveraging the platform's interactive capabilities for immersion rather than to increase reach.

The PRoblem

YouTube is the industry standard for online video-- however its video product was in a transition phase.  With a legacy interaction element called "annotations" on its way out and a new one called "cards" on its way in, there were a lot of micro-problems to be solved.

Annotations

  • Typically annoying with low engagement
  • Does not work on mobile video
  • Does not work on app
  • Clicks open videos in a new tab
  • Being sunsetted by Google-- and therefore with little support

annoying annotations

Cards

  • Google's new platform which features a slide-out window on the right that contains thumbnail links
  • Works on app (90% of mobile users)
  • Can be set to auto-open on desktop but mobile only has an (i) prompt requiring user action
  • Can only link to websites associated with the YouTube account
  • Can only link to each YouTube video once and cannot link to itself
  • Incredibly limited visual control

Understanding both of these limitations would be absolutely key for the success of this project.

The Solution

Without getting into the nitty-gritty, I came up with a magical flow which I would henceforth refer to as "the wizard behind the curtain":

Screen Shot 2016-04-02 at 10.43.11 PM

Great design isn't always just in what the users see, but sometimes in what goes on behind the scenes.  The workaround for interactivity involved four videos (carded and annotated) with the following setup: Setup Video (first 2 minutes) > Decision > Ending Clip.  Clicking on the decision would take the user to another copy of the video at a specific timestamp at the specified ending.

The solution needed to be this complicated and involved four separate videos because of a few reasons:

  1. Shareability - The process could have been done with one "Setup" video and two ending videos.  But if someone decided to share after watching one of the ending videos, all they would be sharing is that specific ending with absolutely no context.  This solution linked to another full video via timestamp, so every video had a Setup > Decision > Ending flow no matter what.
  2. Feasibility - One of the main restrictions of the YouTube Cards is that it could only point to each other YouTube video once (and can't link to itself).  Therefore, there needed to be an origin video as well as two other videos (one for each ending).  The fourth video was added so that there would be an endless loop-- no matter how many times the videos were watched and re-shared, there would always be a video ending to link to.
  3. Preserving the payoff - The idea was floated around that maybe we should just autoplay the alternative ending after the selected ending (e.g. Setup Video > Decision > Ending 1 > Ending 2).  But the whole idea behind showing the percentage that voted was to make people pick sides and feel a part of something bigger than themselves.  Therefore at the end of each ending, in addition to showing a percentage of people that shared the decision, we also included a CTA to see the alternate ending.  We "scratched the itch", if you will.

 

Screen Shot 2016-04-03 at 11.35.27 AM

We decided that in order to cover all bases with mobile, desktop and app users, both annotations and cards would be used.  We froze the video at the climax, where viewers were already hooked and eager to see the ending, so the combo of clear annotations over hard-edited graphics as well as a card CTA at the top right were relatively subtle and effective ways to encourage interaction.  Even if users didn't take action in the 10 seconds the video froze, the video would continue playing one of the attached endings.  This whole process, however crazy on the back end, allowed the user's experience to be as frictionless as possible through a native experience.
Screen Shot 2016-04-02 at 10.46.08 PM

Some might wonder why we didn't use a combination of Facebook and Youtube.  This can be split into two parts:

Why not not go from Facebook to YouTube?

Let's be honest about what Facebook and Google are: competing advertising platforms that sell our attention to brands.  One of their more prominent battlegrounds as of late has been video.  Not only are both platforms trying to out-do each other in terms of feature sets, but Facebook has building the de-prioritization of YouTube links into their newsfeed algorithm as well as UI:

Screen Shot 2016-04-02 at 10.49.52 PM

Most importantly, YouTube just doesn't work on mobile web.  Typically, if a user has YouTube installed and they access a YouTube video via browser, the user would be prompted to open the YouTube app-- which would give the experience some level of interactivity.  However, we did not feel confident in that app-to-app hand-off happening for every person.  Even if it did happen, the native OS notification is certainly not native to the Facebook experience and would be a significant deterrent to real immersion.

Why not go from Youtube to Facebook?

Absolutely not. Look up kitten videos on YouTube and time how long it takes to stop chaining together "just one more video".

The Results

The response was overwhelmingly positive, from clients, viewers and the press.  Viewers generally found the spot engaging and immersive, many expressing disappointment in finding out that the spot was not an actual show.  Some commenters were very animated in picking a side.

Push-or-Save-Censored
The spot was talked about in a few publications, my favorite being my very first Adweek mention under my apparent pseudonym "Alen Shen".  It was even nominated for a Webby (being narrowly beaten out by an ad that was empowering to girls).

However, I think the largest victory for me was the lack of any discussion over the UI of the "choose your own adventure".  The focus should and always be on the experience, which in this case was the user being brought into a real-world Netflix experience. And, of course, in my humble opinion, the best UI is invisible.

Slight Aside: you may wonder, "Is doing the platform/feasibility discovery really the role of a UX designer?"  My answer is, "Absolutely." The UX person should be chasing the solution that best fits the user within the specified parameters.  Part of the job title is designing responsibly by understanding the reality of production. Whether it is social media or web or iOS, it is irresponsible to create something in a vacuum and hand it off to be created by magic developers.  This was a messy and unorthodox process, but it's the type of work that I'm proud of, not because I think the end result is pretty but the outcome was something that was experienced by many.

April 3, 2016No Comments


Testing a Social Network

Click for TL;DR (Summary)
We were tasked with phase one of a two-phase social network rollout for H&M.  Phase one was meant to establish a publishing platform and would need a lot of research and testing to figure out not only strong branded presence to distinguish itself, but also to flesh out the taxonomy for all content moving forward.  Through a lot of legwork done in user research, rapid prototyping and user testing, we were able to create a relevant phase-one platform for H&M employees.  Tools used: Optimal Sort, Sketch (Bohemian Coding) and Axure RP Pro.

Why an H&M Social Network

H&M has a massive international presence with a work force numbering well into the six digits.  Many of these employees, whether working in stores or office buildings, joined H&M in order to get a foot in the door in the fashion industry.

In order to provide employees with the resources to grow as well as foster camaraderie among coworkers, H&M decided to create an internal social network to interact with fellow H&Mers.  The approach would be simple: phase one would be a read-only content platform requiring store logins.  This would establish the site as a valuable source of information prior to implementing individual logins.  By minimizing the requirements for opt-in, we would be lowering barrier to entry and increase the rate of adoption.  After the platform has become established in everyday use, phase 2 would be rolled out to encourage user generated content and the real value of the network would grow.

Information Architecture

The key to establishing a content platform is understanding the content.  Because of the phased approach, we were able to approach the information architecture without having to deal with the intricacies of a true social network.  Through card sorting based on content types the clients gave us, we were able to flesh out various categories of content: H&M, Fashion, Hot, Fun and Career-level.  The structure was very flat, with equal emphasis on the categories; our strategy was to establish a simple and accessible taxonomy with the H&M network early on as it would guide the content creation moving forward:

Screen Shot 2016-04-02 at 7.24.09 PM

Additionally, we identified the key user journey that matched typical behavior flows around media consumption.
Screen Shot 2016-04-02 at 8.16.55 PM

Explorations in UI

As a fashion brand, the expectation was that a digital product by H&M would be as fresh as the latest fashion trends.  We did a lot of discovery into the mobile realm, trying to discern between up-and-coming UI patterns and experimental fads.  Eventually we translated our discovery into an exercise in prototyping various mobile navigation methods; below you'll find some of our explorations into just the navigation:

v2: X-Y Offset 

v3: Bottom Expand 

v5: Context Shift 

v6: Bottom Half Tray

v10: Header Category Navigation Shift 

As you can see, this was a series of explorations for just a single UI element.  Our design approach was to rapidly iterate, get feedback and refine the product.  With daily check-ins with teams in New York, Florida and Stockholm, Google Hangouts became our best friend (or worst enemy depending on the wi-fi).  The same iterative process was done for each screen on both mobile and desktop until each phase one screen was wired out.  Below you can find a sample of one of the mobile screens (the document ended up being dozens of pages):

Screen Shot 2016-04-02 at 8.26.18 PM

 

User Testing

By the time User Testing came around, we had a fleshed out prototype with more visual elements reflective of the H&M brand.  We began to integrate realistic content into the prototype along with realistic functionality like searching and filtering using Axure's pseudo-database.  Eventually we were able to work with this:

 Because the prototype was so fleshed out, we were able to test various tasks:

  • Open menu
  • Find other categories
  • Open an article
  • Find related articles
  • Find the career section
  • View a job listing

Additionally, we were able to get feedback on the importance of subcategories, the use of tags, content discovery, the nomenclature of the filters and overall impressions of the UI.  While we were at it, we surveyed users on things that would help content strategy moving forward.

Launching a social network to over a hundred thousand employees is no small task; it makes sense to do your homework beforehand to avoid any confusion and face potential failure on a large scale.  Testing helped uncover usability and taxonomy insights well prior to locking the design.

October 12, 2015No Comments


Imagination Made Real

Disney is a brand synonymous with magic. Everything that Disney touches must provide a sense of wonder and excitement.


Click for TL;DR (Summary)
The nature of advertising is that there is a lot of red tape, a lot of stakeholders and timelines that don't lend themselves to fast approvals. However, when it came to the Disney/Marvel Avengers/Playmation product, there were too many stakeholders to be able to do UI interactions in a traditional advertising waterfall way. Instead of going the Adobe After Effects (static) or Development (interactive) route, I provided a middle ground to iterate towards the best possible UI for the clients with conservatively 5x the speed of either of the other solutions.

It's hard not to get excited when working on a project with Disney. As a user experience designer with a background in film production, I can never get enough projects that involve motion design. For this project, I was brought in to design and prototype the interactions of the Playmation Avengers site .

Understanding the role of the site

As with any project, the first step is understanding the user. In this case, it us an understanding of the marketing ecosystem. The site was slated to be launched with a TV campaign featuring the spot below running on children's TV channels:

From there, the kid would navigate to the Playmation site on their tablets as our key advertising target. The marketing team's hypothesis was that if the kids were immersed in the Playmation and Marvel experience, they would be the deciding factor in encouraging their parents to buy the product. Therefore the strategy was to tow the line between having a magical, immersive experience while still providing drivers into the lower-funnel sales page.

Composing the Interactions

Art Director Nate Ripp had done a fantastic job in leveraging the Marvel Avengers assets in weaving a rich, visual comp for me to work with. The site was structured like a mission briefing with a not-so-subtle red banner at the top with the phrase "The Avengers Need Your Help!"

ultron_split_final_01_d294830f

CTA leading into immersive Avengers experience

I knew that I had a lot of work to keep up with Nate's impressive visual design, so I immediately got to sketching out the animations and interactions which would quickly be visualized into an interactive prototype via Axure. The goal of my designs were as follows:

Provide Feedback

There is little more frustrating than having expectations end in disappointment. In my opinion, this is one of the most obvious detractors from an "immersive" experience. Therefore, each UI element was designed to respond to an interaction-- a scroll, a swipe, a click or tap.  The very first navigation version was an animated expand/collapse on scroll-- in the vein of Ultron's robotic look-and-feel.

Seamless Discovery

Long page loads are one of the worst enemies of a seamless experience. As a visually rich product, the site would have a lot of pixel-dense imagery and every new page load could mean a serious roadblock in discovery. The initial recommendation was to have all elements load within the same page in full-page overlays for deeper content. However we compromised with the marketing and SEO teams and separated the main one-page scroller from the marginally deeper product-level pages. Our recommendation involved only 4 pages: Main, Heroes, Villains and Gear to allow at the very least seamless discovery within each product group.  This was a compromise we were willing to make as we understand that there's a context shift when going between each of these content groups (for instance when going from villains to heroes).

The Affordance of Spatial Awareness

One of the benefits of sketching on paper is the natural fit with designing for spatial awareness. Outside of the clicks out to the product page for deeper discover or out to the e-commerce page for conversion, the interactions all have to animate within the landing page itself. The strategy was meant to avoid any finality in the decision-making and therefore reduce the cognitive load of open discovery. Swiping through the heroes and miss the one you were looking for? That's fine, it's just as easy to swipe back. Accidentally click on the left gear item instead of the right? When the gear page loads, the navigation carousel order and interaction style has parity with that of the main landing page, just as easy to find out more about AvengersNet.

Results

This rapid prototyping process was pivotal not only in composing the direction, but in helping the content strategy of the site. We were able to make recommendations with a fully functional prototype to back it up.

This product had stakeholders in Disney, Marvel and Playmation as well as all of the associated legal teams, so having something that represented a real-world design was key in moving quickly. The initial prototype was done and ready for viewing over a short matter of days and my Axure chops made it ripe for rapid iteration. At the point we handed the project over to the development team at Disney's Matterhorn, I had prototyped at least nine versions of the site-- something that would never have been possible jumping right into development or even static animation via After Effects.

Prototype Link

Special Thanks

Art Director: Nate Ripp
Creative Director: James
UX Lead: Lester Dizon
Design Agency: TBWA\Chiat\Day Los Angeles
Development: Disney Interactive "Matterhorn" Product Group
Client: Disney Consumer Products, Marvel, Playmation

 

Like what you see?

I'm always looking for people to connect with.

Feel free to email me at alanmshen@gmail.com

Note: Although I'm always happy to help, I tend to miss shotgun requests.
If you want to connect please let me know what your favorite Star Wars movie was and why.

Or, there's always LinkedIn

Copyright © 2017 - Alan M Shen