Marketo WebEx Adapter - Communiqué · marketo adobe connect adapter user guide ...
IPad App Contact: Glen Lipka Started: Feb 27, 2014 Last updated: May 21, 2014 UX NOTE: This doc is...
-
Upload
harry-goodwin -
Category
Documents
-
view
218 -
download
0
Transcript of IPad App Contact: Glen Lipka Started: Feb 27, 2014 Last updated: May 21, 2014 UX NOTE: This doc is...
iPad AppContact: Glen LipkaStarted: Feb 27, 2014Last updated: May 21, 2014
UX NOTE:
This doc is sample of how the
UX team at Marketo
communicates design specs to
engineering and product
management.
It’s not meant to be pixel
perfect and isn’t a finalized
design.
This doc uses Open Sans font.
Download Font
LogDate 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
UX NOTE: A log is important to document how much effort went into the design. It helps the team understand and respect the process
Page 3© 2014 Marketo, Inc.
Marketo Proprietary and Confidential
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
UX NOTE: This page defines (in simple
language) what the problem this doc is solving for.
Page 4© 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.
UX NOTE: This is to help explain why we design this way
LOGGING IN
Marketo Planner
John
LOG INNeed help ?
Oops! Wrong email and password.
Marketo Planner
Forgot your password?Don’t worry, it happens.
Just remembered? Log in
Email… SUBMIT
iPAD MY MARKETO
Marketo Planner
Calendar Planner
Welcome to the My Marketo App!
Use the Planner and
Calendar and stay tuned for
more apps to come.
Give feedback and get
support at the Community.
Marketo Planner
Mar 30 – Apr 19, 2014Sun Mon Tue Wed Thu Fri Sat
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
Mar Apr
3 Week Month SAVE AS
Add a tag…
Workspace
Germany
Program Tags
View: Demo
Entry Types
Tradeshow Basic Type
Mail Program Webinar
Calendar Planner
PLANNER ENTRIES
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
MY INITIATIVES
• Timeframe: 12 months
• Range: today -73 days to today +292 days
• “Today” Should appear on first load at 20% from left
19
Marketo Planner
Set up a timeline of your major marketing initiatives.
Tap and hold to create an initiative
Initiative 1
Default duration: 3 months
Date is where their finger was. (horizontal)
Veritical floats upwards to highest available slot that fits.
New Initiative
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
MY INITIATIVES
19
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
Bar Lengths
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
Initiative 1Initiative 1
MY INITIATIVES
19
Description…
CancelSAVE
Initiative 1
When there is not custom text, go to this first, before the normal settings of an initiative.
Tap Description to change fields.
“Done” saves“Go” in keyboard also saves
My First Thing
First Edit
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
MY INITIATIVES
19
My First Thing
A
My First Thing
SEE DETAILS
Show Bar:
Color:
Starts: Jan 1, 2014
Ends: Mar 1, 2014
OFF
Edit Name/Desc
Dates pop up normal date pickers
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
MY INITIATIVES
19My First Thing
Display as:
Color:
Starts: Jan 1, 2014
Ends: Mar 1, 2014
SEE DETAILS
INITIATIVE
AMy First Thing
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.
Description…
My First Thing Cancel SAVE
Edit Screen
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
MY INITIATIVES
19
My First Thing
A
My First Thing
SEE DETAILS
Show Bar:
Color:
Starts: Jan 1, 2014
Ends: Mar 1, 2014
A A A A A A
A A A A A A
A A A A 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
OFF
Change Color
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
MY INITIATIVES
19
My First Thing
Tap to bring up date picker for each. Day granularity (not time)
A
My First Thing
SEE DETAILS
Show Bar:
Color:
Starts: Jan 1, 2014
Ends: Mar 1, 2014
OFF
Add Bar
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
My First Thing
MY INITIATIVES
19
A
My First Thing
SEE DETAILS
Show Bar:
Color:
Starts: Jan 1, 2014
Ends: Mar 1, 2014
ON
Show barMenu
See Details
Convert to Entry
Delete Initiative
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
My First Thing
Delete My First Thing
Deleting My First Thing will:
1. Delete the initiative
2. Delete 14 drill-down entries
3. Disassociate 8 programs from this initiative
Question: Is deleting allowed if it has connected programs. It will imply that a bunch of programs get disconnected.
Might be time-consuming.
If empty, no warning needed
DELETECANCEL
Delete entry
Marketo Planner
PLANNER LANES
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
NEW SWIMLANE
My First Thing
MY INITIATIVES
19
My First Thing
A
My First Thing
SEE DETAILS
Show Bar:
Color:
Starts: Jan 1, 2014
Ends: Mar 1, 2014
ON
Swipe new lane
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)
Add swimlane under the lane that it is swiped into
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
NEW SWIMLANE
My First Thing
MY INITIATIVES
19
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 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.
Dragging between lanes
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
NEW SWIMLANE
My First Thing
MY INITIATIVES
19
Lane Editing
• Double-tap toggles
collapse/expand on the swimlane
(animated collapse)
• Tap and hold brings up the re-
order UI
• Tap to edit field text and see menu
(expand from left)
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
reorder delete collapseMY INITIATIVES
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
Delete My Initiatives
This is serious stuff. Tap each line to confirm:
Delete the swimlane
Delete 3 initiatives
Delete 14 drill-down entries
Disassociate 8 programs from their initiatives
This is permanent and can not be undone.
DELETE!
Delete swimlaneconfirm
CANCEL DELETE
If nothing in the lane, just delete it. BOOM!No confirmation
Delete is disabled until the checks are all
red
COLLAPSE INSTEAD
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
NEW SWIMLANE
My First Thing
MY INITIATIVES
19
Reorder part 1
Starting to drag re-order or even
tap-hold on re-order goes to next step
MY INITIATIVES reorder delete collapseMY INITIATIVES
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
NEW SWIMLANE
MY INITIATIVES
Reorder part 2
• By dragging on reorder the
swimlanes collapse ALL
MY INITIATIVES reorder delete collapse
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
NEW SWIMLANE
Reorder part 3
When the user drops the lane, then the collapse/expand goes back to the way it was.
But that swimlane menu stays openTapping on the name brings back the keyboard.
So multi-lane reordering would be 1. Tap lane 12. Reorder3. Tap Lane 2
4. Reorder5. Rinse - repeat
MY INITIATIVES reorder delete collapse
Marketo Planner
CONVERT ENTRY
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
My First Thing
MY INITIATIVES
19
A
My First Thing
SEE DETAILS
Show Bar:
Color:
Starts: Jan 1, 2014
Ends: Mar 1, 2014
ON
Show barMenu
See Details
Convert to Entry
Delete Initiative
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
If the initiative has a bunch of stuff inside it or associated programs, then it is not allowed.
CLOSE
Convert disallow
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.
CONVERTCANCEL
Convert confirm
Press Release Party
Seminar Important Date
Marketo Planner
Nov Dec 2014 Feb Mar Apr May Jun Jul Aug Sep
My First Thing
MY INITIATIVES
19
A
My First Thing
Show Bar:
Color:
Starts: Jan 1, 2014
Ends: Mar 1, 2014
ON
Entry on Planner
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
Page 35© 2014 Marketo, Inc.
Marketo Proprietary and Confidential
To Do
• Convert to entry• Drill in screens
• Make entries• Make programs• Associate programs• Publish from MLM• Group by
• Pinch, Zoom, swipe left, swipe right
ARCHIVE