iPad App
Contact: Glen Lipka
Started: Feb 27, 2014
Last updated: May 21, 2014
Download Font
Log
Date
Designer
Change
2/28/2014
Glen
Cleaning up and compiling
3-24-2014
Glen
Changed graphic design, but broke all the other slides
5-20-2014
Glen
Clean up - restart
5-21-2014
Glen
Menu for initiative
5-22-2014
Glen
Refactor slide-masters
5-24-2014
Glen
Swimlane menus – delete, collapse, reorder
Trying to Solve
•
A global marketing planner, higher level than MLM – aimed to be looked at by
executives and managed down by mid-level marketing managers
•
Ipad delivery, but must port design to browser
Page 3
© 2014 Marketo, Inc.
Marketo Proprietary and Confidential
Why PowerPoint?
•
Everyone has PowerPoint
•
It’s super quick to design in, much faster than Photoshop
or prototyping tool. (As fast as Balsamiq, but looks much
better.)
•
•
Also quick to iterate and re-order
Powerful animation tools helps tell the story and effects
•
IMPORTANT: View this doc in full-screen mode or
you will lose the whole effect
•
Marketing, Sales, PM and others can use this as early
sneak-peeks even with customers/prospects. It looks
close to reality.
•
Storyboards are excellent to communicate pathways.
Page 4
© 2014 Marketo, Inc.
Marketo Proprietary and Confidential
LOGGING IN
Marketo Planner
Oops! Wrong email and password.
John
LOG IN
Need help ?
Marketo Planner
Forgot your password?
Don’t worry, it happens.
Email…
Just remembered? Log in
SUBMIT
Marketo Planner
Check your email for a reset link
john@company.com
LOG IN
Need help ?
iPAD MY MARKETO
Marketo Planner
Welcome to the
My Marketo App!
Use the Planner and Calendar
Calendar
Planner
and stay tuned for more apps
to come.
Give feedback and get support
at the Community.
Marketo Planner
Mar 30 – Apr 19, 2014
Sun
Mon
Mar30
Tue
Calendar
31
Planner
Apr 1
Wed
Thu
2
Fri
3
View: Demo
Sat
4
5
Entry Types
Tradeshow
Basic Type
Mail Program
Webinar
Program Tags
6
7
8
9
10
11
12
Add a tag…
Workspace
Germany
13
3 Week
14
Month
15
16
17
18
19
SAVE AS
PLANNER ENTRIES
•
Timeframe: 12 months
•
Range: today -73 days to today +292 days
•
“Today” Should appear on first load at 20%
from left
New Initiative
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
19
MY INITIATIVES
Default duration: 3 months
Date is where their finger
Marketo Planner
was. (horizontal)
Veritical floats upwards to
Set up a timeline
your
highest of
available
slot major
that
fits.
marketing initiatives.
Tap and hold to create an initiative
Initiative 1
Sep
Bar Lengths
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
19
MY INITIATIVES
Initiative 1
Initiative 1
Initiative 1
Examples of different
lengths of bar
Entry
Entry
Entry
Entries will be allowed
here, they get the icon
and the basic blue
Aug
Sep
First Edit
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
19
MY INITIATIVES
Initiative
1
My
First Thing
Initiative 1 1
Initiative
When there is not custom text, go
to this first, before the normal
settings of an initiative.
Description…
Tap Description to change fields.
“Done” saves
“Go” in keyboard also saves
Cancel
SAVE
Edit Name/Desc
Marketo Planner
Nov
Dec
2014
Feb
19
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
MY INITIATIVES
My First Thing
Show Bar:
Color:
OFF
A
Starts:
Jan 1, 2014
Ends:
Mar 1, 2014
Dates pop up normal date pickers
SEE DETAILS
Edit Screen
Marketo Planner
Nov
Dec
2014
Feb
19
My First Thing
MY INITIATIVES
Description…
Cancel
My First Thing
Mar
Apr
May
Jun
My First Jul
Thing
Aug
Sep
Display as:
SAVE
INITIATIVE
Color:
A
Starts:
Jan 1, 2014
Ends:
Mar 1, 2014
Tap either the name or the description.
No read only view, just the editor.
One day this panel will have other
options. For now, its basic.
Swipe right means “cancel”
Save and cancel do the reverse
animation. No keyboard, panel slides
off to right.
SEE DETAILS
Change Color
Marketo Planner
Nov
Dec
2014
Feb
19
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
MY INITIATIVES
My First Thing
Show Bar:
OFF
Color:
Starts:
Ends:
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
Jan 1, 2014
Mar
A 1,
A 2014
A
A
Can we find some examples of
ExtJS color Pickers that look nice?
Need to account for white text if
the color is too dark
SEE DETAILS
Add Bar
Marketo Planner
Nov
Dec
2014
Feb
19
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
MY INITIATIVES
My First Thing
Show Bar:
Color:
OFF
A
Starts:
Jan 1, 2014
Ends:
Mar 1, 2014
SEE DETAILS
Tap to bring up date
picker for each. Day
granularity (not time)
Marketo Planner
Nov
Dec
2014
Feb
19
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
MY INITIATIVES
My First Thing
Show Bar:
ON
Color:
A
Starts:
Jan 1, 2014
Ends:
Mar 1, 2014
See Details
Convert to Entry
Delete Initiative
SEE DETAILS
Show bar
Menu
Delete entry
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
Delete My First Thing
Question: Is deleting allowed if it has
connected programs. It will imply that a
bunch of programs get disconnected. Might
be time-consuming.
Deleting My First Thing will:
1.
Delete the initiative
2.
Delete 14 drill-down entries
3.
Disassociate 8 programs from this initiative
CANCEL
DELETE
If empty, no warning needed
Marketo Planner
PLANNER LANES
Swipe new lane
Marketo Planner
Nov
Dec
2014
Feb
19
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
MY INITIATIVES
My First Thing
Show Bar:
Color:
ON
A
Starts:
Jan 1, 2014
Ends:
Mar 1, 2014
Swipe to add a new lane.
New Swimlane (50/50)
New Swimlane 2 (33/33/33)
New Swimlane 3 (show 3.5
swimlanes – start to scroll)
New swimlanes after scrolling are
not that tall. On an iPad Retina it
would be about three fingers tall
(2 inches)
NEW SWIMLANE
Add swimlane under the lane that
it is swiped into
SEE DETAILS
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Dragging
between lanes
19
MY INITIATIVES
My First Thing
HOLD to start dragging similar to icons
on the desktop of the iPad. Once moving,
you can drag left-right INSIDE the
swimlane. Once you cross-over into
another swimlane, you can not drag
NEW SWIMLANE
horizontally anymore. This is purely a
swimlane change gesture – vertical –
same date.
After the drop, the initiative floats up to
the top most spot it could fill in that
vertical space. (never be in the swimlane
title horizontal space
Line should move along with the box.
Lane Editing
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
19
MY INITIATIVES
reorder
delete
collapse
•
Double-tap toggles collapse/expand
on the swimlane (animated collapse)
My First Thing
•
Tap and hold brings up the re-order
UI
•
Tap to edit field text and see menu
(expand from left)
NEW SWIMLANE
If the swimlane was low on the screen,
have to scroll up to see it.
If already collapsed it says “expand” (all
lowercase in the menu
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Delete swimlane
confirm
Delete My Initiatives
This is serious stuff. Tap each line to confirm:
If nothing in the lane, just delete it. BOOM!
No confirmation
Delete the swimlane
Delete is disabled until the checks are all red
Delete 3 initiatives
Delete 14 drill-down entries
Disassociate 8 programs from their initiatives
This is permanent and can not be undone.
COLLAPSE INSTEAD
CANCEL
DELETE
DELETE!
Reorder part 1
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
19
MY INITIATIVES
reorder
My First Thing
NEW SWIMLANE
delete
collapse
Starting to drag re-order or even taphold on re-order goes to next step
Reorder part 2
Marketo Planner
Nov
Dec
MY INITIATIVES
2014
Feb
Mar
Apr
May
Jun
reorder
Jul
delete
Aug
Sep
collapse
• By dragging on reorder the
swimlanes collapse ALL
NEW SWIMLANE
Reorder part 3
Marketo Planner
Nov
Dec
MY INITIATIVES
NEW SWIMLANE
2014
Feb
Mar
Apr
May
Jun
reorder
Jul
delete
Aug
Sep
collapse
When the user drops the lane, then
the collapse/expand goes back to the
way it was.
But that swimlane menu stays open
Tapping on the name brings back the
keyboard.
So multi-lane reordering would be
1. Tap lane 1
2. Reorder
3. Tap Lane 2
4. Reorder
5. Rinse - repeat
Marketo Planner
CONVERT ENTRY
Marketo Planner
Nov
Dec
2014
Feb
19
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
MY INITIATIVES
My First Thing
Show Bar:
ON
Color:
A
Starts:
Jan 1, 2014
Ends:
Mar 1, 2014
See Details
Convert to Entry
Delete Initiative
SEE DETAILS
Show bar
Menu
Convert disallow
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
Convert to Entry
The Initiative My First Thing already has
associated programs and detail entries. It
can not be converted
CLOSE
If the initiative has a bunch of stuff inside it or
associated programs, then it is not allowed.
Convert confirm
Marketo Planner
Nov
Dec
2014
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
Convert My First Entry
What kind of entry?
Swipe to look through the choices. Select and
tap convert.
Press Release
Party
Seminar
Important Date
CANCEL
CONVERT
Entry on Planner
Marketo Planner
Nov
Dec
2014
Feb
19
Mar
Apr
May
Jun
Jul
Aug
Sep
My First Thing
MY INITIATIVES
My First Thing
Show Bar:
Color:
ON
A
Starts:
Jan 1, 2014
Ends:
Mar 1, 2014
Entries have icons (initiatives don’t).
They can still show the bar, change
color, have dates.
They DON’T have details.
Menu has Delete and Convert to
Initiative
Convert to Initiative
Delete Initiative
To Do
•
•
•
Page 35
Convert to entry
Drill in screens
• Make entries
• Make programs
• Associate programs
• Publish from MLM
• Group by
Pinch, Zoom, swipe left, swipe right
© 2014 Marketo, Inc.
Marketo Proprietary and Confidential
ARCHIVE