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

http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans

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

© 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.



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

Marketo Planner

[email protected]

LOG INNeed

help ?

Check your email for a reset link

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.

http://community.marketo.com/

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


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


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


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


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


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


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


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


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


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


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


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


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


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


NEW SWIMLANE

MY INITIATIVES

Reorder part 2

• By dragging on reorder the

swimlanes collapse ALL

MY INITIATIVES reorder delete collapse

Marketo Planner


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


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


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


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


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



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

IPad App Contact: Glen Lipka Started: Feb 27, 2014 Last updated: May 21, 2014 UX NOTE: This doc is...

Documents

Transcript of IPad App Contact: Glen Lipka Started: Feb 27, 2014 Last updated: May 21, 2014 UX NOTE: This doc is...