NOS

NOS UMA

Applying Brand to Product Design

 
 

Over the course of 18 months, beginning in September 2014, W12 Studios worked with Portuguese telecoms provider NOS to create a suite of products for their next generation, cross platform TV service. We developed an interface defined by the new NOS master brand, integrated the features and functionality of the latest hardware updates, and worked with an external development partner to bring the design to market.

 
 

NOS’ rebrand was undertaken by branding agency Wolff Olins. The rebrand put an emphasis on how the brand applied to marketing NOS, with a great deal of time applied to print and physical applications, but little ground covered in terms of digital design and interface. In order to build a suite of products that could truly belong to NOS, we would have to adapt and apply this brand to the interface at its core.

 
 

One of the primary hooks of our product brand came from the colour chips of the logo: by using the 1.6° edge angle of the colour chip to define our content grid the interface immediately feels different compared other products on the market, before even applying the brand colours or motion. In turn, the slanted perspective means that the eye is led to our horizontal point of focus in the middle of the screen without the need for heavy image treatments.

 
Building the grid from one of the spokes

Building the grid from one of the spokes

 
Building overlays from the same spoke

Building overlays from the same spoke

 

Alongside the development of the interface, we worked with NOS and Espial to help define the hardware and remote: it’s not often you get to design the interface and the device that controls it, so it was a good opportunity to build some specific allowances in to the remote around iconography and button layout that suited how we expected people to be using the product on a daily basis.

Okko

Okko

Smart TV App Design

In late 2014 W12 Studios worked with Russian TV startup Okko to build a new smart TV app that blended together broadcast channel content, on demand video & catch up into a single platform, working to the limitations of smart TV apps with a radically simple UI.

Okko’s existing VOD app, play.ru, has become one of Russia’s most popular On Demand services, with prime billing on smart TV home screens and a companion mobile app. For the latest iteration, the eponymously titled Okko, they looked to expand their offering beyond just On Demand movies and TV-Series to Channels, allowing users to customise their alá carte subscription service to their desire.

Channel page for a live channel

For Okko, we looked at extending the classic convention of channels: a chronologically ordered, set of live broadcast content. To do so, we did an inventory of the kind of content that could exist on the platform and settled on three main channel types: Live channels only feature live, broadcasted content. New channels only feature on-demand content such as TV-series, movies and short clips. Hybrid channels live somewhere in the middle.

These channels would have to fit into an interaction model that allowed users to easily navigate across channels, see what’s on, and then jump into what they wanted to watch. The model we settled with uses a single, clear point of focus and navigation based on two axis: vertically across channels, horizontally within channels.

In addition, Okko was one of the first projects where we produced an end-to-end prototype that would cover off the main interactions, visual designs and motion of the platform. Throughout the duration of the project Okko was built by a designer working double duty on interaction design and prototyping. This allowed us to test interactions, try out image treatments with a large content set, and present our progress in detail on a facsimile of the real product.

The project concluded in the delivery of the prototype, a visual style guide detailing key patterns and styles and a technical documentation of how we structured TV and film data for the prototype. We look forward to seeing the ongoing development and debut release of Okko TV.

Vevo

Vevo tvOS

Last November we collaborated with Vevo to bring their new Apple TV app to life, extending the designs for the latest iOS app to a lean-back, 10ft experience. It was a great opportunity to reimagine music television and to design using high-fidelity prototyping and motion. We designed the product around what we expected the capabilities and sensibilities of the 4th generation Apple TV hardware to be pre-launch, using a channel-based product model that has room to expand and brought novel ways to quickly interact with content to the platform.


Music TV heritage, Apple TV technology

To better understand the requirements of Vevo’s new Apple TV app we carried out an audit not only of where we can see Apple TV enabling new possibilities in design and experience, but also of the heritage of music television and what parts could be taken forward to a new interactive service.

Music Television

Continuous playback defines music television. There may be adverts, VJ’s and supporting content between, but it should always defer to offering music videos to the viewer without their direct intervention.

The future of TV may be in apps, but the heritage of channels as a way to discover and brand content is one that is worth taking forward. Whether personalised or broad, channels are a quick way to pivot across vastly different content and enjoy what you find.

Large, bold on screen graphics are an important part of the packaging of a channel, and integral to a lean back TV experience. This is one area in particular we see the current Apple TV typography and design language lacking.


Apple TV

The capacitive touch Siri Remote is far more sensitive and nicer to use than any of the other smart TV remotes we’ve tried on the market to date. This shouldn’t be surprising given Apple’s years of experience perfecting touch control, but it made us much more confident to lean on it as an input method.

High powered graphics processing enables the kind of video and interface effects that we’ve previously considered out of bounds for modern set top boxes and smart TV’s. Live blurring content, colour picking in real time and animation on top of video all become part of the toolbox when you’ve got the power to run them at 60fps over video content.

Parallaxing cards are one of the strongest visual flourishes on the platform. The way they offer direct feedback to the remote and the sense of physicality is one that we wanted to push further and use as part of a direct interaction mechanic within the app.


Vevo Channels

Vevo’s content offering isn’t just limited to music videos , and the tastes of its viewers isn’t just limited to the top 100. We had to design a model that could start out small and scale with Vevo’s ambitions for their TV service.

To solve this, we built the initial app around four content channels, that offer routes in to endlessly playing out content. Vevo Top Videos is made up of content from the hottest artists, made available to all users of the app. Vevo Favourites is a channel that allows you quick access to your favourite artists and tracks. Vevo Spotlight is your route into finding new music based on your taste. Tailor it by favouriting tracks you like and skipping the ones you don’t. Vevo Watch Again is the last of the new content channels, allowing a quick route back in to watching history.

This initial offering is a deliberate scaling down from the huge amount of genre channels and surrounding content of previous iterations, but also sets the stage for Vevo to build it back up with a stable of branded channels and personalised content that exceeds expectations.


10ft Interface

Having a product model that can work with Vevo’s content library is meaningless without building an interface that allows the user to seamlessly access those channels. This means taking the key design principles of TV interfaces: Clear legible type, large content hit areas and a clear point of focus, and applying them to a device that suits quick swipe interactions.

 

We took the parallaxing cards and bold text of the standard TVOS interface elements and dialled it up, taking full advantage of the rich artist imagery used in the iOS experience and putting them on full height cards that are easy to swipe across using the Siri remote. This kind of fuzzy navigation and lower accuracy interaction feels like what the remote was made for.


Quick Content Interactions

Once the user has entered into content, we wanted to enable them to quickly interact with that content, whether it’s favoriting the video, replaying it before it ends, playing something else or seeing what’s coming up within that playlist.

To allow quick access to these actions, and to take full advantage of the Apple TV’s hardware, we came up with the Interactive Slate: an interactive overlay that’s brought up by simply resting your thumb on the capacitive touch pad. Once opened, the user can swipe and click to quickly action the content that’s playing.

 
 

This pattern of displaying an interface over what’s playing is not one that’s currently established in Apple TV’s documentation, an intentional decision on our part to try and push the possibilities of the platform. One of the biggest challenges of designing for Apple TV right now is that aside from games, nobody is putting out apps that do anything other than the basic interaction patterns.

These kind of hardware-dependent interactions are difficult to get a feel for and refine without trying them out for yourself, so we built a tvOS native prototype to dial in the feel of the thumb press, and how to make the interface react to moving the thumb around the touchpad: our original solution used a similar tilt to the parallax cards, which Vevo then took further to include the previews of the previous and next tracks.


From Vision to Reality

Since our initial 4 week project looking at a vision for the Apple TV app, Vevo took it further and filled out many of the details of the product that we simply couldn’t cover in the time available. An intuitive link between iPhone and TV makes it really simple to sign in and set up an account. Favorites are quickly browsed using large circular crops of artist photos. The channel cards beautifully parallax and shine as you swipe over them.

The Vevo Apple TV app as is now available is one of the latest in a series of steps by Vevo to build a service that can stand alone alongside their other video platform offerings. As it grows and matures, we look forward to expanding upon the initial thinking that defined the product at launch, and to see how else the Apple TV interaction model and patterns can be pushed to make a compelling TV experience that’s unique to Vevo and unique to Apple TV.

The new Vevo app requires a fourth-generation Apple TV and is available at no charge in the tvOS App Store. To download the app, search for “Vevo” in the App Store on your Apple TV.

Sonifi

Sonifi

Creating a vision for the hotel guests connected stay

SONIFI provide hotel in-room entertainment for 500 million travelers in approximately 1.2 million hotel rooms annually. Their in-room product provides a blend of live and on-demand content – with additional hotel concierge services on top. Together we spent 12 weeks to get quickly get under the skin of their product, create a vision for a future service, and then bring it to life.
Armed with personas and lots of post-its; a team from W12 headed out to SONIFI HQ in Sioux Falls to conduct two days of workshops, interviews and product demos with ~40 core team members from all corners of the organisation – legal to HR to technology. 

The creative brief


Workshops in Sioux Falls

sonifi-cs-inline-1.jpg

The workshops aimed to uncover what the future experience could be for hotel guests, and the hotels themselves (SONIFIs true customer, an important distinction). We asked ourselves why the stay needed to be contained to the hotel room? Why just content? How can we make the interaction between hotel and guest two-directional? These activities are important for two reasons. Firstly it gives the design team the ability to extract as much information as possible. Secondly it ensures that, in a time of change, as much of the core client team is involved as possible. 


Back in London, armed with all the knowledge and ambition needed to create a great new service, we got to work building out an interaction model and UI that delivered great content in an easy to digest, simple manner along the service journey – from booking to the flight home. 

 
 

A challenge for the UI was to create an extremely neutral brand which could work well on legacy hardware, whilst also having maximum usability as users don’t have the time or desire to learn how to use a new system. 


The outcome was a simple model with a scalable set of interactions and components that can work across any device from TV to mobile. This lets the UI focus on the service, that is, selling a hotels services rather than just more movies – and integrated progressive new features such as in-room service booking, concierge chat and pre-arrival curation of content.

 

Go90

Go90

Mobile first video experience

Launched late 2015, go90 is a mobile app from Verizon and AOL that’s home to a whole stack of exclusive TV shows, web clips and sports coverage. As well as being able to view, share and comment on content, features in the app let you create your own clips and then contribute these to groups inside the app. The big hook? All that content is free to view and a sizeable portion of it is exclusive. A group of us here at W12 Studios were fortunate enough to work alongside the design and engineering teams at Verizon to help take it from a business need and an idea through to a compelling vision for a rich, social, video app.

 
 

What did we do?

In designing the vision for the app, we maintained a focus on go90’s ton of content. Once signed up and in the app, it needed to encourage onward journeys — we shouldn’t have to drill through menus or directories to uncover the next thing to watch — and it needed to encourage the stirring up of social buzz. First and foremost though, go90 needed to feel a credible source of content. The user should get a sense of the scale, breadth and type of content. The hope being that when they have time to kill or are on the hunt for the next clip of content that’s going to give them peer bragging rights, they reach for this app first.
Working with Verizon’s design teams, we spent around 6 months building up and pulling down designs, keyframing numerous bits of animation and building sacrificial prototypes to arrive at a robust, clear design for an at-the-time nameless product. If an interaction model was simply too clunky, or a concept took too long to explain to a user testing group, then we canned it; iteration is essential.

 
 

Shazam

Shazam

Re-imaging music discovery

Shazam is one of the leading media companies in the world today. It’s app, which allows people to identify, explore, purchase and share music or TV content is one of the world’s top 10, with more than 420 million users in 200 countries. 

The product experience when we first started working with them.

Shazam came to us looking to re-imagine the future of music and TV for the platform. There were two strands to our work: one was more of a support role, to take their existing product to become a 5 star app; the other was about helping them produce a vision for Shazam’s future.


Product Vision


The Project

Project Brief

As an established product with millions of users, our challenge was to improve and evolve the Shazam experience without alienating existing users and without losing what Shazam did best – to help people discover and share music and TV content.

We followed a bold approach – with a unique brand look and feel for which was built on the most memorable moment within the product, the listening screen. Based on this, we developed a meaningful and personalised experience that would evolve over time alongside the user, and applied it across all platforms, from mobile to tablet, web and TV. 

The idea was to create a real-time environment for the user, where a modular results screen would offer a rich artwork environment as well as real-time lyrics, video content. At a time when streaming was becoming a dominant element in the industry, the screen would also offer integration with third-party services such as Spotify and Rdio. 

 

Turning the shazam experience from a utility to a destination


Listening Screen Development

Motion explorations and reactions to sound

Final direction reacting to different genres of music

Motion redlines to document complex motion behaviour


Results

Based on that vision, we created a comprehensive architecture for the future of Shazam and worked with their in-house development teams to bring it to life. We aligned the re-design rollout with their existing plans and started to launch subsequent updates to a great response. The uptake on new features was very high and, importantly, existing functionality and revenue drivers were not compromised with those updates. 

The long-term vision for Shazam is still in development. Outlined by Shazam at CES and Mobile World Congress (MWC) in early 2014, the work was very well received by media and users alike. With a design that support the expansion of the business while continuing to engage it users, Shazam is well positioned to become one of the most influential media products of the future.