Facing stiffer competition from the likes of Netflix, Amazon Prime, and HBO Go; NBC Universal asked us to bring the TV Everywhere (TVE) experience to 9 of their brands on Android (NBC, USA, Syfy, Bravo, E!, Telemundo, Universo, and more). We designed for TV (Amazon Fire and Chromecast), tablet portrait/landscape and phone portrait/landscape.
During the detail design phase I was responsible for the tablet portrait design. After NBC and USA were approved I worked with a junior designer to begin the roll out process for the other brands. I ensured brand consistency and unified styles across platforms when applicable. I worked closely with the android developers to get the app produced; and oversaw the creation of production assets, and quality assurance.
The project as a whole went well, but was long for an agency (2yrs). The major problem was how fonts weren’t being used properly across android and their other platforms. To solve for android I created a font guide that mapped out on every page what was used. That was the simplest way to get multiple developers on the same page. The other issue was with the interaction design that was drastically paired back before launch. This wasn’t immediately solvable. But what I learned is that developers need to be involved from the conceptual design phase so a better understanding of the time necessary to complete can be given or timelines adjusted early on.
NBCU TV Everywhere Case Study
I worked on Apple TV, iOS, Android, Fire TV, and some Chromecast.
Mobile Portrait: Home
MP: Content Column
Watchlist Content Selection
MP: All Shows
MP: Show Page
MP: Show Page - Episode Detail
MP: Live Player
Video doesn't play in portrait on mobile.
Mobile Landscape: Home
ML: Home - Content Column
ML: Show Page
ML: Show Page - Episode Detail
ML: Live Player
Tablet Portrait: Home Page
TP: Home - Content Column
TP: All Shows Page
TP: Show Page
TP: VOD Player
TP: Live Player
Tablet Landscape: Home
TL: Home - Watchlist
TL: All Shows
TL: Show Page
TL: VOD Player
TL: Live Player
Fire TV: Home
The carousel plays a clip of each show while it rotates through.
Fire TV: Home - Watchlist
Fire TV: All Shows
Fire TV: Show Page
A brief description of the show is given, you can watch the latest episode, add the entire show to your "Watchlist" or move right and scroll through the entire season(s).
Fire TV: Live Player
Can slide through schedule to see what is coming up next.
Role: Art Direction/Design
Length of Hackathon: Approx - 2.5 days
Objective: Create a functioning prototype that creates a virtual world or tool that connects and engages through hands on experiences, while empowering people to learn by doing.
Insight: Actions speak louder than words
Idea: Ever bend the truth on a personality test? Imagine yourself as the life of the party instead of admitting to their Friday-night-in binge-watching ways? The truth is, we’re only cheating ourselves. But even we don’t really know how we’d behave in any given situation without experiencing it first-hand. With SEEK, we have a chance to act before analyzing. Through a series of action-based “tests” in VR, we can come to terms with aspects of our personality that were previously left to the whims of how we wanted to look on paper. We can foster empathy through a platform that feels more like a game than a judgmental evaluation.
We ended up creating 5 levels with binary results which would allow for SEEK to determine your personality type. Currently I'm only showing the one I worked on which is about perfectionism.
The team was a mix of designers, creative technologist, copywriters, and quality assurance people.
These are just the first set of ideas. We were just throwing things out there which is Dog training is the first one on the list : ) We then began to focus more on how our ideas would impact a community of people, what VR is good at doing, and what can be accomplished in 2.5 days.
Now we've started to trim the ideas down and categorize them. The categorizing is important because this helps the team determine possible development issues across ideas. And also helps us understand the types of ideas we're coming up with.
First Draft of level.
My level was about perfectionism. This is the first draft of the level. You had to move 3-4 objects and rest them on the white line behind them. This task is made more difficult by making the objects weightless so the slightest touch can send them flying. Since the objects obey the laws of physics, they are still carrying momentum when placed. So they will continue to move slightly off the line. How straight they are when you chose to leave the area determines your level of perfectionism.
Final Draft of Level
Role: Art Direction & Interactive Design
Chevy wanted to build consumer awareness around the all new 2012 Chevy Cruze Eco in a fun and informative way. So we created a dance competition/party between major markets to see who could keep up with The Cruze. I created the wireframes/storyboards, did some of the visual design, and created the animations. I then worked with a developer to get it produced. The storefronts responded to participants’ body movements as they stepped left and right or touched hotspots in an attempt to stay on tempo in the dance-themed game. Meanwhile, an accuracy meter rated dancers’ moves and a virtual odometer let users know how far they were able to go in their Chevy Cruze Eco.
This was a tough project but it ended well. Working with the developer required a lot of back and forth. I learned that testing early was key. A number of problems with distance and what the sensors were picking up occurred later on because I used a wall mock up to test distance and approximate fatigue. When we eventually put it up on the screens we didn’t take into account that we tended to stand closer to the screens to more easily tap the targets. So the sensors needed to be adjusted along with the timing of the cues.
FIS Global Pitch Site Redesign
Role: Art Direction & Design
FIS Global is the leader in financial technology. They have a burning desire to be able to deliver tomorrow, today. Every day, they try to live it, and make the inconceivable believable. They’re always banking on what’s next. My task was to take “Bank on What’s Next” and translate it into a site that pushes their brand to its limits. The purpose was to get people to see them as the Intel of the banking world; and redefine it for a younger generation that is more in-tune with the likes of Atom Bank, and Moven, rather than Bank of America or Chase.
I also decided to include the inspiration, some style posters, and UX/layout so you could gain a better understanding of my process.
I wanted to move away from the financial feel, so I decided to look at fashion, the home and architecture for inspiration.
The purpose of the style posters is to see how different elements will play together before I enter into the layout phase.
UX and Layout Version 01
Since this was done for a pitch a lot of this changed and other parts were simply thrown out during the design process. But the inspiration, the poster styles, and this UX and layout are here to help you see the process from beginning to end. Next are the final comps.
FIS Global: Desktop
FIS Global: Mobile
Role: Interactive Design
The problem that Lunchables faced was an increasing awareness of childhood obesity, and the lack of active play time for your average child. So we decided that if children couldn't get the activity they needed in school, then let's make a way for them to get in some solid cardio while their parents cruise the malls.
We created three games, Run from Boredom, Basketball and Dodge Ball, launched in two week intervals and engaged players through a combination of multi-touch and gestural interaction. Dodge Ball, the final game of the series, allowed players to compete across country in real-time, a first for DOOH.