Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing an excellent mobile experience


Published on

- How companies are leveraging the IBM Mobile Portal Accelerator (MPA)
- How MPA easily extends the WebSphere Portal platform with services to seamlessly deliver scalable, mobile solutions optimized for display across a wide range of mobile devices, including the latest in-market versions
- Things to consider when implementing a mobile portal solution

Published in: Technology
  • Be the first to comment

Designing an excellent mobile experience

  1. 1. Designing an Excellent Mobile Experience<br />Glenn Kline, Portal and Collaboration Solutions Technical Director<br />DeeDee DeMulling, Director User Experience<br />
  2. 2. Going Mobile<br />You have Portal, you want to go mobile, now what?<br /><ul><li>Mobile experience really matters
  3. 3. What should go mobile? Establish a mobile vision and strategy
  4. 4. Enable your developers and organization
  5. 5. Integrate mobile into your existing process</li></ul>Replay Available at<br />
  6. 6. Mobile Facts<br /><ul><li>Soon, more people have web enabled mobile phones than PC internet access
  7. 7. Mobile phone owners have SMS, MMS and web phone plans
  8. 8. Mobile networks are easier to access than traditional broadband in some areas
  9. 9. Mobile sites and applications are no longer novel
  10. 10. Mobile sites are the expectation!</li></li></ul><li>Decide what to Mobile Enable<br />What will be valuable to your business?<br /><ul><li>Business will have goals that may not be the same as consumers
  11. 11. Mobile platform needs to meet the goals of the business to be worth the investment
  12. 12. Mobile platform needs to meet the goals of the user to be worth using</li></ul>What will be valuable to your users?<br /><ul><li>Mobile consumption very different than traditional web
  13. 13. Good mobile sites are very action oriented and task based
  14. 14. Mobile users have different expectations</li></li></ul><li>Mobile UX<br />Users on the Go ≠ All of your users<br /><ul><li>Mobile users and tasks
  15. 15. Mobile privacy and security</li></ul>Portal on your Phone ≠ Portal on your Desktop<br /><ul><li>Web/Application/Portal features
  16. 16. Mobile device constraints</li></ul>iPhone ≠ Blackberry ≠ Android ≠ and so on…..<br /><ul><li>Input Devices, OS, Browser….</li></ul>- Touchscreen, Rollerball, QWERTY and Keypad inputs<br /> <br />
  17. 17. User Experience Matters<br />STAY CURIOUS AND TEST IDEAS<br /><ul><li>Continually explore mobile spaces
  18. 18. Competitive intelligence
  19. 19. Iteratively emulate design in multiple mobile devices platforms
  20. 20. Sketches / Wireframes
  21. 21. Prototypes
  22. 22. Device installs
  23. 23. Test with real end users</li></ul> <br />
  24. 24. Airline Portal Example<br />Passengers or customers have fundamentally different goals when mobile<br />Traditional Portal<br />Mobile Portal<br />A traveler is planning a trip<br /><ul><li>Book a vacation
  25. 25. Comparison shop fares across different airlines
  26. 26. Request missing mileage credit
  27. 27. Research baggage and carry on policies and fees
  28. 28. Read about the frequent flyer program
  29. 29. Update personal information
  30. 30. View news and offers</li></ul>A traveler is in the middle of a trip<br /><ul><li>Check flight status for gates and departure/arrival times
  31. 31. Get flight notifications
  32. 32. View available seats
  33. 33. Check security line wait times
  34. 34. View terminal maps
  35. 35. Check upgrade status</li></li></ul><li>Detailed Mobile Portal Accelerator Planning<br />
  36. 36. Establish a Mobile Vision<br />What mobile channels are you going to leverage?<br />What do you plan to deliver, when, and what are the steps<br />
  37. 37. Enable Your Developers<br />Mobile Portal Toolkit on the Developer Workstations<br /><ul><li>Primary tool mobile web developers will use with MPA
  38. 38. Integrates with RAD and allows local development and testing</li></ul>Training and Education<br /><ul><li>MPA is not difficult, but it is different than traditional development
  39. 39. The markup is XDIME, not HTML
  40. 40. MPA layout policies must be created
  41. 41. Java skills are still critical
  42. 42. Integrates with RAD and allows local development and testing
  43. 43. The IBM Mobile Portal Accelerator wiki is a great place to learn and get started -</li></li></ul><li>Get the Right Supporting Tools<br />Mobile Emulators for Testing<br /><ul><li>Browers
  44. 44. Opera mini, WebKit browsers, Safari, Openwave, Firefox user agent switcher
  45. 45. Operating Systems
  46. 46. Android, Windows, Nokia
  47. 47. Devices
  48. 48. Blackberry, iPhone, Palm, BlackBerry, Samsung, LG, Motorola</li></ul>Test with real devices<br /><ul><li>Enable stage environment to internet
  49. 49. Use devices available to employees
  50. 50. Airtime on virtually any physical device can be rented</li></li></ul><li>Integrate MPA With Your Existing Processes<br />Release Management<br /><ul><li>Modify build and deploy process to include MPA pages and portlets
  51. 51. Include MPA in existing standards and guidelines
  52. 52. There will be new dependencies
  53. 53. Mobile might be dependant on existing services
  54. 54. Might depend on content</li></ul>Quality Assurance<br /><ul><li>Test team will need access to emulators and devices
  55. 55. Mobile must be accounted for in test plan
  56. 56. Performance testing is still important</li></li></ul><li>References<br />“More Smartphones Than Desktop PCs by 2011”, PC World, Lexton Snoll, 09 Sept 2009,<br />“Best Practices for IBM Mobile Portal Accelerator Design (WebSphere Everyplace Mobile Portal)”, IBM Best Practices, 14 April 2010,<br />“Designing for the Mobile Web”, Site Point, Brian Suda, 12 March 2008, <br /><br />“HOW TO: Optimize Your Mobile Site Across Multiple Platforms”, Mashable Dev & Design, 13 July 2010,<br />“Full Analysis of iPhone Economics - it is bad news. And then it gets worse”, Communities Dominate Brand Blog, Tomi T Ahonen and Alan Moore, 22 June 2010,<br /> <br /> “HOW TO: Make Your Mobile Websites Act More Like Native Apps”, Mashable Dev and Design, 18 August 2010,<br /> <br /> <br />
  57. 57. Healthcare Member Portal Example<br />Members have fundamentally different goals when mobile<br />Traditional Web<br /><ul><li>View a year end health statement
  58. 58. Compare procedure costs at different doctors or facilities
  59. 59. Research health and wellness information
  60. 60. Change insurance options due to a life event
  61. 61. View 2 year old claims</li></ul>Mobile Web<br /><ul><li>View insurance ID card
  62. 62. Check health savings account balance
  63. 63. Find a doctor or provider
  64. 64. Find out what is covered
  65. 65. Find contact information
  66. 66. Access a personal health record</li></li></ul><li>About Perficient<br />Perficient is a leading information technology consulting firm serving clients throughout North America. <br /><ul><li>Founded in 1997, Public NASDAQ: PRFT
  67. 67. 1,300+ colleagues serving 16 major markets and 450 enterpriseclients throughout North America
  68. 68. Dedicated solution practices including Lotus collaboration and User Experience
  69. 69. Industry Solution Expertise – Healthcare, Telcom, CPG
  70. 70. Strategic Alliance Partnerships with Major Technology Vendors - IBM Premier Partner</li></li></ul><li><br />Daily unique content about content management, user experience, portals and other enterprise information technology solutions across a variety of industries.<br /><br /><br />