1 / 36

iPad App

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. iPad App. Contact: Glen Lipka Started : Feb 27, 2014 Last updated: May 21, 2014.

apiatan
Download Presentation

iPad App

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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. iPad App Contact: Glen Lipka Started: Feb 27, 2014 Last updated: May 21, 2014 This doc uses Open Sans font. Download Font

  2. Log UX NOTE: A log is important to document how much effort went into the design. It helps the team understand and respect the process

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

  4. Why PowerPoint? UX NOTE: This is to help explain why we design this way • 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.

  5. LOGGING IN

  6. Oops! Wrong email and password. John Need help ? LOG IN

  7. Email… Forgot your password? Don’t worry, it happens. Just remembered? Log in SUBMIT

  8. Check your email for a reset link john@company.com Need help ? LOG IN

  9. iPAD MY MARKETO

  10. 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. Calendar Planner

  11. View: Demo Calendar Planner Entry Types Tradeshow Basic Type Mail Program Webinar Program Tags Add a tag… Workspace Germany • SAVE AS

  12. PLANNER ENTRIES

  13. Timeframe: 12 months • Range: today -73 days to today +292 days • “Today” Should appear on first load at 20% from left New Initiative 19 MY INITIATIVES Default duration: 3 months Date is where their finger was. (horizontal) Veritical floats upwards to highest available slot that fits. Marketo Planner Set up a timeline of your major marketing initiatives. Tap and hold to create an initiative Initiative 1

  14. Bar Lengths 19 MY INITIATIVES Initiative 1 Examples of different lengths of bar Initiative 1 Initiative 1 Entry Entries will be allowed here, they get the icon and the basic blue Entry Entry

  15. First Edit 19 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 INITIATIVES Initiative 1 My First Thing Initiative 1 Initiative 1 Description… Cancel SAVE

  16. Edit Name/Desc 19 My First Thing MY INITIATIVES Show Bar: Color: Starts: Jan 1, 2014 Ends: Mar 1, 2014 My First Thing OFF A Dates pop up normal date pickers SEE DETAILS

  17. Edit Screen My First Thing Display as: Color: Starts: Jan 1, 2014 Ends: Mar 1, 2014 19 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. My First Thing Cancel SAVE INITIATIVE MY INITIATIVES A Description… My First Thing SEE DETAILS

  18. Change Color 19 My First Thing MY INITIATIVES Show Bar: Color: Starts: Jan 1, 2014 Ends: Mar 1, 2014 My First Thing OFF 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 A A A A A A A A A A A A A A A A A A SEE DETAILS

  19. Add Bar 19 My First Thing MY INITIATIVES Show Bar: Color: Starts: Jan 1, 2014 Ends: Mar 1, 2014 My First Thing OFF A Tap to bring up date picker for each. Day granularity (not time) SEE DETAILS

  20. Show bar Menu 19 My First Thing MY INITIATIVES Show Bar: Color: Starts: Jan 1, 2014 Ends: Mar 1, 2014 My First Thing ON A See Details Convert to Entry Delete Initiative SEE DETAILS

  21. Delete entry 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. If empty, no warning needed Delete My First Thing Deleting My First Thing will: Delete the initiative Delete 14 drill-down entries Disassociate 8 programs from this initiative CANCEL DELETE

  22. PLANNER LANES

  23. Swipe new lane 19 My First Thing MY INITIATIVES 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 Show Bar: Color: Starts: Jan 1, 2014 Ends: Mar 1, 2014 My First Thing My First Thing ON A NEW SWIMLANE SEE DETAILS

  24. 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 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. NEW SWIMLANE

  25. Lane Editing 19 • 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 collapse MY INITIATIVES MY INITIATIVES My First Thing NEW SWIMLANE

  26. Delete swimlane confirm Delete My Initiatives If nothing in the lane, just delete it. BOOM! No confirmation Delete is disabled until the checks are all red 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. CANCEL DELETE DELETE! COLLAPSE INSTEAD

  27. Reorder part 1 19 Starting to drag re-order or even tap-hold on re-order goes to next step MY INITIATIVES reorder delete collapse MY INITIATIVES MY INITIATIVES My First Thing NEW SWIMLANE

  28. Reorder part 2 • By dragging on reorder the swimlanes collapse ALL MY INITIATIVES reorder delete collapse MY INITIATIVES NEW SWIMLANE

  29. 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 open Tapping on the name brings back the keyboard. So multi-lane reordering would be Tap lane 1 Reorder Tap Lane 2 Reorder Rinse - repeat MY INITIATIVES reorder delete collapse NEW SWIMLANE

  30. CONVERT ENTRY

  31. Show bar Menu 19 My First Thing MY INITIATIVES Show Bar: Color: Starts: Jan 1, 2014 Ends: Mar 1, 2014 My First Thing ON A See Details Convert to Entry Delete Initiative SEE DETAILS

  32. Convert disallow My First Thing If the initiative has a bunch of stuff inside it or associated programs, then it is not allowed. Convert to Entry The Initiative My First Thing already has associated programs and detail entries. It can not be converted CLOSE

  33. Convert confirm My First Thing Swipe to look through the choices. Select and tap convert. Convert My First Entry What kind of entry? Press Release Party Seminar Important Date CANCEL CONVERT

  34. Entry on Planner 19 My First Thing MY INITIATIVES Show Bar: Color: Starts: Jan 1, 2014 Ends: Mar 1, 2014 My First Thing ON A 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

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

  36. ARCHIVE

More Related