ECM on the Go: A Quick Start iPad Application for Mobile Content Management

Presented by Fishbowl Solutions6.14.2012

Agenda

+Who is Fishbowl

+Fishbowl Mobile Experience

+Mobile App & Web Solutions Through Responsive Design

+Mobile Innovations

+Fishbowl iPad Quick Start Program

About Fishbowl Solutions

+100+ deployments in last 2 years

+Focused on portals & content management since 1999

+Solutions offerings & value-add components for Oracle WebCenter

+Oracle Specialized Gold Partner for WebCenter Content & WebCenter Portal

About Fishbowl SolutionsWebCenter Mobile User Experience Design

SharePoint Integration Google Search Integration

Fishbowl – Leader in Mobile ECM

Experience+ 2+ years research and development+ Numerous POCs:

– iTwitter Portlet– Oracle WebCenter Spaces iPhone – Oracle WebCenter Spaces Native application

Expertise+ iOS and Android+ Objective C, REST, HTML5, ADF Mobile+ Responsive design and skinning

Customer Successes+ Medical device manufacturer and therapy services provider currently deployed

with 6,000 iPads+ Photo eye and sensor manufacturer went live on April 1, 2012

Award Winning+ Forrester Groundswell – Employee Mobile Application - Management+ Oracle Fusion Innovation – Oracle WebCenter Content

Medical Device Manufacturer Streamlines Overall Sales ProcessCustomer Profile: + World leader in medical equipment and therapies for

cardiovascular, neurological, and musculoskeletal disorders, chronic health conditions, and surgical procedures

+ 38,000+ employees worldwide

Solution Summary: + WebCenter application for the iPad that includes navigation

structure, touch gesture response, and security parameters

Business Drivers: + Increase sales process efficiency+ Ensure highest accuracy of product and services collateral+ Display and interact with 3D images and rich content

Customer Benefits: + Time to market improvement+ Reduced printing and storage costs+ Increase in employee, partner, customer satisfaction

“I am amazed how quickly I can find a PDF and prepare for my next meeting. The

amount of time I have between cases varies, so not

needing to load my laptop and waste time booting and

searching for materials makes the iPad and mobile ECM a

big productivity gain for me.”

Sales RepresentativeCardiovascular Division

Customer Application Screenshot

6,000 Users in Feb 2012

Sensor Manufacturer Expedites Access to High Value Content

Customer Profile: + Manufacturer and distributer of photo eyes, sensors and associated

products for industrial and process automation.+ 3,000 factory and field representatives and millions of customers

worldwide.

Solution Summary: + WebCenter application for the iPad and Android tablets that includes

navigation structure, touch gesture response, security parameters, and Google Analytics integration.

Business Drivers: + Gain competitive advantage by expediting availability of product collateral

to sales and distribution+ Further leverage centralized content repository

Customer Benefits: + Increased accuracy and availability of sales and marketing collateral+ Further leverage central content repository

Customer Application Screenshot

Welcome

Live on April 1, 2012

Business’ Perspective

Better management, organization & presentation of materials

Use Case: Sales Enablement• Business Problem

– Limited time to prepare for meetings– Time to market lag for new sales and

marketing collateral– Inefficient meetings due to laptop boot

times and paper reliance• Relevant Features

– App:• Store content for use in offline mode• Synch content• Custom folders for easy navigation• Email cart• Download and usage analytics

– Tablet:• 3D, high-resolution platform• Instant On• Long Battery Life

• Benefits– Increase sales process efficiency– Ensure content accuracy and availability– Reduced paper handling costs

Use Case: Field Service+ Business Problem

– Environments not conducive to laptops

– Need to view and interact with detailed diagrams, pictures or schematics at scale

– Referencing outdated manuals, parts lists, etc.

+ Benefits– Decrease time spent servicing or

maintaining machines and systems– Enable access to visually rich images

and drawings– Ensure content accuracy and

availability

+ Relevant Features– App:

• Store content for use in offline mode• Synch content• Custom folders for easy navigation• Touch gestures – zoom in/out, rotate

– Tablet:• Highly portable – 2 pounds• 3D, high-resolution platform• Instant On• Long Battery Life

Day In the Life: Sales Meeting

Before Find collateral(1 hour)

Print & organize(30 minutes)

Download(10 minutes)

• 250 Prep Hours/Year

• $600 Print Costs/Year

• Inefficient Meetings

• Non-Interactive

• Low Close Rates

During Boot laptop Open all assets Switch between assets

After

Return to office Email assets Prepare for

next meeting

Before Find and Add Collateral to Customer Folder(5 minutes)

• Reduced Prep Time

• No Print costs

• Efficient Meetings

• Highly Interactive

• High Close Rates

During - Show and interact with content- Email content

After

Go to next meetingConfident Connie

Frantic Freddie

Mobile App & Web Solutions Through Responsive Design

Fishbowl Solutions Mobile ECM Offerings

WebCenter Interface & UX Design

+Experience• Responsive Design• Reusable templates• User Interface skinning

+Expertise• ADF Mobile• REST API• HTML5• CSS3• Phonegap

Visually Rich, Interactive, and Responsive Design

Responsive Design Consulting Services

Fishbowl Solutions

What is Responsive Design

+ As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities

Responsive Web design - approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Responsive Design Services

+Templates for WebCenter Content Sites+One template automatically adjusts for desktops,

tablets, and smartphones+Leverages CSS3, HTML5,

and JavaScript withinWebCenter Content, Portal & Sites

+Fishbowl has expertise in bothresponsive web design and designing for theOracle WebCenter platform

Responsive, Adaptive Design

+Fluid Grids – Liquid Layouts+Flexible Images+Break Points +Media Queries+Touch of JavaScript+Multi orientation and resolution support

Flexible grid system

Flexible media

Flexible layout through media

queries

Fluid Grids & Liquid Layouts

+Base Framework Skeleton+Can scale to any resolution+Wraps content & Grids+Can Support Desktop to Mobile with 1

template

Flexible Images

+Scalable Images+100% Width attribute+Device Image

Optimisation Desktop - Mobile

+WebCenter Content Conversion Server

Break Points

+Defining flexible template +Resolution Break Points+Break Points are always changing!

Media Queries

+Muscles & Skin+CSS Queries– Screen resolution &

orientation+Single Base multiple

Looks

Touch of JavaScript

+Browsers don’t all support CSS3 Media queries

+Custom JS implementation incorporated – to support Browsers like IE.

Demo

Mobile Application InnovationsFishbowl Solutions

WebCenter Spaces Oracle iPhone App

+ Overview:+ iPhone Access to WebCenter Spaces

– Manage connections– Group projects

+ Features & Benefits:+ Easily consolidate messages+ Clean, recognizable UI+ People Connection search+ Local file system and “Open In” support+ Bookmark favorite items

WebCenter Spaces Fishbowl Mobile Collaboration

+ Overview:+ Native Application – iOS, BlackBerry, Android

and Windows Access to WebCenter Spaces– Manage connections– Group projects– Access WebCenter via browser

+ Features & Benefits:+ Synchronize content+ 3 touch content upload+ Pull content from external sources+ Interactions cached for offline access+ Portable to ADF Mobile

+ Technologies:+ HTML5, CSS3, Phonegap

Demo

Oracle Desktop Integration Suite – WebDav

+WebCenter Content WebDav Folders management

WebCenter Spaces Mobile Integration Suite

Overview:• Native Application – iOS, BlackBerry, Android

and Windows Access to WebCenter Content– Manage Assets within Webcenter Content

Webdav Folders

Features & Benefits:• Synchronize content• Media uploads – photo & video• Interactions cached for offline access• Portable to ADF Mobile

Technologies:• Jquery Mobile, HTML5, CSS3, Phonegap

Demo

Engaging With Fishbowl Solutions

Phase 1 Phase 2 Phase 3

Responsive Design template update to

WebCenter

Positioning for WebCenter Portal & Sites Integration through the REST

API

Develop Mobile Application Similar

to LinkedIn

The Future and what we can do now to enhance the users journey

+Voice Enablement+Device Integrations – Mobile touch, gamepads+Touch Events PS5+Spatial Gesture Integrations –

Kinect Xbox360 & PC

Software & Services Offering to Extend WebCenter Content to the iPad

Fishbowl Solutions iPad App Quick Start Program for WebCenter

Why Quick Start

+World Leaders in WebCenter Mobility+Similar Customer Needs+Customer Want a Solution That Is:– Easy to Use– Proven and Successful– Quick Launch Time

Mobile Quick Start Defined

+Native iPad Application+Search & Browse for Content+Maintain WebCenter Security+Online & Local Content Libraries+View Content+Share Content via Email to Secure Download Site+Organize Local Content into Folder Structure+Metadata-Driven Navigation for Virtual Folder

Browsing

Launching in Less than a Month

Navigation Definition

LaunchSkinning & UI Integration

Email Cart Configuration

Define navigation hierarchy structure

Taxonomy for content

availability, sort order, and

filters

File download component

installation and configuration

Skin with corporate color scheme & logo

DAYS 1-4

User Testing

DAYS 12-14DAYS 4-10

Metadata Tuning

Testing

DAYS 10-12 DAYS 20-25

Launch App

Analytics Integration

DAYS 14-17

Integration with Google

Analytics

Digital Signing

DAYS 17-20

Apple Enterprise

Deployment Signing

DAYS 25-30

Starting from Scratch

Develop custom iOS application to

communicate with WebCenter

Content and view, download, sync, store, and email

content from within the iPad.

DAYS 1 - 75

Application Development

DAY 100

Navigation Definition

LaunchEmail Cart Configuration

Define metadata navigation hierarchy structure

File download component

installation and configuration

User Testing

Testing

Launch App

Analytics Integration

Integration with Google

Analytics

Digital Signing

Apple Enterprise

Deployment Signing

Architecture

MobilityAPI

RemoteService

API

Local DB

Local Storage

<HTTP(S)> JSON Data

NativeApplication

Mobile Device

Content ServerFi

le IO

SQ

L

Mobility Components

App Overview

Primary Nav

+Navigate to 5 Primary Views– Online Content Library– Local Content Library– Folders– Email Cart– Global Search (Online or Local)

Online Content Library

+ Online WebCenter Repository

+ 9-Up Grid View+ Swipe for More+ Thumbnails+ Touch to View+ Long-Press

Actions

Local Content Library

+ Local WebCenter Repository

+ Offline Access+ 9-Up Grid View+ Swipe for More+ Local Thumbnails+ Touch to View+ Long-Press

Actions+ Sync with Online

Version

Global Search

+ Available Local or Online

+ 12-Up Grid View+ Keyword Search+ Sort by Title or

Date

Folder View

+ Add from Address Book

+ Type in Addresses+ Send to Multiple+ Badge Indicator

Email Cart

+ Add from Address Book

+ Type in Addresses

+ Send to Multiple+ Badge Indicator+ Secure

Temporary Download Site

Quick Filters

+Four quick filters+Metadata Query Define Filters– Can be complex or simple queries

+One at a time

Left Nav

+Virtual Folder Nodes+Metadata Driven+Multilayer Navigation+Mirrored for Online & Local+Stored in Content Server as

HCST Configuration File

Left Nav

Sync Content

+Keep local copies up-to-date– Sync local content with

latest versions+Local Library +Local Folders+Navigation+Help Files

Maintain WebCenter Security

+Secured Content – Sign in with

WebCenter credentials

– Users only see items they have access to

– Configurable login time caching

Additional Content Security

+Metadata-Based Security– Normal – Save local & Email– Restricted email delivery– Restricted viewing with 3rd party application– On-Line Veiwing only

+Optional File Encryption– For storage on local device file system– Cannot encrypt video

Settings

+ Control What Content You See

+ Hide Irrelevant Results

+ Metadata Driven+ Examples

– Language– Types– Industry– Product Line

Help

+ Help Files in WebCenter

+ Automatically Stores Help Locally

+ Syncs Updates+ Multiple Types

– Video– Images– PDF– etc.

Analytics

+Integration with Google Analytics

+Built in Event Tracking+See who’s using the app+See what content is… – Viewed most– Shared most– Not viewed

Analytics Examples

Skinning

+Graphic Replacement– Keep Layout– No image resizing

+Flexible Engagement Model– You provide color & logo, we skin– We provide file names & dimensions, you skin

+Retina Resolution Ready– Support for new iPad Retina Display

Skinning

Fishbowl Skin

Sample Skin

Fishbowl Skin 2

Landing Pages

+ Online, Local, & Folder Home Screen

+ Stored in WebCenter+ Automatically Sync+ Support for:

– HTML– PDF– PNG

+ Use Possibilities– Corporate Logo– Getting Started Guide– Featured Company Info

Code Signing

+Enterprise signing– Requires Apple Enterprise Account– App does not need Apple Approval– Can be given to partners or employees

Demo

Questions?

What’s Next

+Meet with a Fishbowl WebCenter Mobile Expert

+Schedule a Demo+Contact Us for More Info• 952.465.3400• info@fishbowlsolutoins.com

+NEW! Android Tablet App– Also Available

Questions?

Fishbowl Summer Webinar Series

+ Preview Fishbowl's SharePoint Connector for Oracle WebCenter Version 2.0 – Beta Customers Wanted!

– June 21st, 12pm CST

register: fishbowlsolutions.com/news

twitter: @FishbowlE20

facebook: facebook.com/fishbowlsolutions

linkedIn: join our groups webcenter content & webcenter portal

web: fishbowlsolutions.com email: info@fishbowlsolutions.com

phone: +1.952.465.3400 blog: cfour.fishbowlsolutions.com

Contact Us