from ideas to execution

01

Information Design

PROPRIETARY & CONFIDENTIAL. © 2014 R/GA ALL RIGHTS RESERVED.

10.14.2014

02

Information Design


10.14.2014

SO YOU THINK YOU HAVE AN IDEA?

03

Information Design


10.14.2014

“I want to design an app that allows me to....”


04

Information Design


10.14.2014


What now?

05

Information Design


10.14.2014

FROM AN IDEA TO EXECUTIONAn Example Framework

The Core

Start by refining and honing in on the core value propositions of the idea. Identify primary platform(s), and key user journeys.

Sample Artefacts:Idea Statement, User Journeys/Use Cases, Core Feature Set, High Level Sitemap

06

Information Design


10.14.2014

Details, DetailsThe Core

Start defining the major sections, and creating hierarchy. Define feature sets and prioritize them. Add as many details as you can.

Sample Artefacts:Detailed Sitemap, Feature Lists, Content Maps, Detailed Wireframes/Visuals


07

Information Design


10.14.2014

Details, Details Surprise, DelightThe Core

Start thinking about micro-interactions, features, and transitions that enhance the experience.

Sample Artefacts:Motion Prototypes, Micro-interactions


08

Information Design


10.14.2014

Details, Details Connect the DotsThe Core

Start figuring out the ecosystem. No product or service exists in a silo.

Sample Artefacts:Ecosystem map, Connection & Handoffs Map


Surprise, Delight

09

Information Design


10.14.2014

Making it work Making people love it

Details, Details Connect the DotsThe Core


Surprise, Delight

010

Information Design


10.14.2014

The Core

Idea Statement Key Journeys/Use Cases Core Feature Set High Level Sitemap

011

Information Design


10.14.2014

“The greatest challenge to any thinker is stating the problem in a way that will allow a solution.”

- Bertrand Russell

012

Information Design


10.14.2014

IDEA STATEMENT. WHAT?

Articulates the essence, & value proposition of the solution in a succinct statement(s)

013

Information Design


10.14.2014

IDEA STATEMENT. WHY?

Articulates the essence, & value proposition of the solution in a succinct statement(s)

It lays the foundationIt filters every decision

014

Information Design


10.14.2014

015

Information Design


10.14.2014

“I want to design an app that allows me to....”

LETS GO BACK TO THE ‘IDEA’

016

Information Design


10.14.2014

“Twitter is text based, Instagram is photo based, and Facebook is a mess”

“There is no easy way to share stories that have beautiful images, and text”

THAT’S NOT AN IDEA..

Pain Points

017

Information Design


10.14.2014

“I want to create a platform that allows people to easily create, publish, & explore stories.”

REFINED VISION STATEMENT

018

Information Design


10.14.2014

LET’S UNPACK THIS


82% of smartphone users use it to take photos & 44% use it to record videos.

ExampleInsight

019

Information Design


10.14.2014

LET’S UNPACK THIS


82% of smartphone users use it to take photos & 44% use it to record videos.

Let’s use mobile as the primary platform!PrimaryPlatform

ExampleInsight

020

Information Design


10.14.2014

The Core


021

Information Design


10.14.2014

JOURNEYS, USE CASES. WHAT?

A series of steps that represent a scenario in which a typical user interacts with what you are designing

022

Information Design


10.14.2014

JOURNEYS, USE CASES. WHY?

A series of steps that represent a scenario in which a typical user interacts with what you are designing

Unpack your visionUnderstand user behavior

Identify high level functionalityDefine taxonomy

023

Information Design


10.14.2014

StartSimple

024

Information Design


10.14.2014

UseStoryboards

025

Information Design


10.14.2014

026

Information Design


10.14.2014

The Core


027

Information Design


10.14.2014

SITEMAP. WHAT?

A way to structure and group related features and content that make up what you are designing

028

Information Design


10.14.2014

SITEMAP. WHY?

A way to structure and group related features and content that make up what you are designing

Show how the navigation should be structuredHelp identify where content will sit

Show the relationship between different sections

029

Information Design


10.14.2014

Simple Sitemap

030

Information Design


10.14.2014

Complex Sitemap

031

Information Design


10.14.2014

LET’S UNPACK OUR IDEA

“I want to create a platform that allows people to easily create, publish, & explore medium form stories.”

The app should allow users to easily create & publish stories.

The app should allow users to explore stories.

Key Use Cases

032

Information Design


10.14.2014

LET’S ADD SOME STRUCTURE

High LevelSitemap

HomeScreen

Explore Stories

StoryDetail

Create Stories

?

?

033

Information Design


10.14.2014

BRAINSTORM SOME FEATURES

Feature Set

Explore Stories

Create Stories

Using search?Should we have categories?Should they be tagged?Is there a feed?..??

Images, Video, Text?Linear flow?User Profiles?Templates?..??

034

Information Design


10.14.2014

REMEMBER

Think of everything, test all of it, cut most of it.

Simplify.

035

Information Design


10.14.2014

REFINE THE STRUCTURE

High LevelSitemap

HomeScreen

Explore Feed

StoryDetail

CategoryPage

Search Results

?

ExploreCategories

Search Stories

Create Stories

036

Information Design


10.14.2014

Global navigation v1!

FeedCategoriesCreate

Search

We will talk about rest of the page later

037

Information Design


10.14.2014

FURTHER READING

038

Information Design


10.14.2014

Details, Details

Detailed Sitemap Content Maps Feature Lists Wires/Visuals

039

Information Design


10.14.2014

Delight

Motion Prototypes Micro Interactions

040

Information Design


10.14.2014

Connect theDots

Ecosystem Map Handoffs

041

Information Design


10.14.2014

[email protected]

from ideas to execution

Design

sample artefacts

details surprise

dotsthe corestart

feature lists

feature sets

delightthe corestart

detailsthe corestart

core value propositions