SingTel Digital Design Foundations

SingTel Design Language & Product Concepts

What: Define a set of digital design guidelines for SingTel, and reimagine two existing product concepts; an internet-connected TV box, and a personal utility web app.

Joining a team of designers, researchers, and interaction experts from across Sapient’s global network, I worked on this six-month project as the sole copywriter and got my hands dirty in a fair bit of filesystem specification, information architecture, interface design, and product conceptualization.

Style Guide

My first bit of work: Working with designers to put together a style guide that would provide SingTel with a unified digital design direction. In addition to visual specs, many interaction principles were laid out, covering touch, natural gestures, and the ‘dumber’ 4-way button remotes. It was also the first articulated brand tone of voice and written style document to be deployed within the organization.

Copy Deliverable: Digital Design Guidelines and Tone of Voice documentation

Copy Deliverable: Digital Design Guidelines and Tone of Voice documentation

Product 1: Web Application

The brief: Redesign an existing web portal featuring web app widgets (e.g. weather, world clock) and give it some new purpose, with the new visual design style applied.

Together with the second product, this project was an opportunity to create a multi-channel, cloud-based entertainment service and utility. We designed a set of features and experiences that would be accessible from both PCs/tablets and TVs, and used the two existing products are gateways to this cloud data.

I worked with the creative director and lead designer on the elements that would provide a unified experience, and conceptualized the flexible, card-based data presentation system (note that this was ahead of card metaphors taking hold in the mobile space post-2012).

The Dashboard: existing widgets were redesigned as HTML applications running in cards, linked to social services, messaging, and rich content. This particular dynamic layout prioritizes updates with a system of visual hierarchies, such as size and placement.

The Dashboard: existing widgets were redesigned as HTML applications running in cards, linked to social services, messaging, and rich content. This particular dynamic layout prioritizes updates with a system of visual hierarchies, such as size and placement.

Alternative "fanned" presentation of the Dashboard's cards.

Alternative “fanned” presentation of the Dashboard’s cards.

Envisioned as the ultimate cloud storage front-end, the product would sort and manage all manner of files uploaded by the user. Imagine Dropbox without the constraints of a traditional filesystem, with integrated apps that let you view images, play media, and create collections on-the-fly with a simple toolbar and natural-language filtering.

Envisioned as the ultimate cloud storage front-end, the product would sort and manage all manner of files uploaded by the user. Imagine Dropbox without the constraints of a traditional filesystem, with integrated apps that let you view images, play media, and create collections on-the-fly with a simple toolbar and natural-language filtering.

Folders would slide open to allow a peek into their contents.

Folders would slide open to allow a peek into their contents.

A photo collection, expanded.

A photo collection, expanded.

Smart Channels

Smart Channels

Smart Channels were one of the ways in which we sought to create a TV-like, lean-back experience with internet video content, and an important feature of Product #2.

A channel was created from metadata (such as tags) attached to videos on YouTube, for example, and would pull in related videos in an automatic playlist that could be left on like traditional television. This was before similar experiments were deployed by Google and Boxee.


Product 2: Connected TV System

With all the user’s content from various devices and computers mirrored in cloud storage, the TV appliance would have access to photos, music, videos, and personalized settings such as apps and Smart Channels.

In addition to ensuring a consistent experience with the desktop product, I worked on the retooling of the user interface to suit the 4-way remote control proposed as a hardware requirement. Some TV-specific use cases had to be considered, e.g. accommodating multiple users in front of the screen, family scenarios, privacy settings, and limited multitasking.

Many of conventions we created on the desktop were designed to work on TVs too.

Many of conventions we created on the desktop were designed to work on TVs too.

Global navigation

Global navigation

Smart Channels could be created on the desktop and on the TV.

Smart Channels could be created on the desktop and on the TV.

Configuring a Smart Channel

Configuring a Smart Channel

TV-specific controls for managing/sorting photos

TV-specific controls for managing/sorting photos

TV Photos Filter 2

Would a computer understand a search for photos titled "Paris in autumn"? We laid down rules for the intelligent interpretation of geotags and semantic understanding to provide context.

Would a computer understand a search for photos titled “Paris in autumn”? We laid down rules for the intelligent interpretation of geotags and semantic understanding to provide context.

Mixed media search results

Mixed media search results

Expanded cloud music player app

Expanded cloud music player app

'Live' TV controls overlay

‘Live’ TV controls overlay

Advertisements