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.

An UX approach to creating iPad application in seven days

2,346 views

Published on

This presentation supports an article written for www.followtheuxleader.com. In short, I was challenged to create and iPad application using UX methodologies. I had seven days and this presentation contains snippets of the final document I created.

Published in: Design, Technology
  • Be the first to comment

An UX approach to creating iPad application in seven days

  1. 1. iPadApplicationa case for User Experience Design.
  2. 2. THE BRIEF Show the value of User Experience Design methodology. (via a tangible deliverable)
  3. 3. HOW?
  4. 4. Design a prototypefor the new iPadapplication.
  5. 5. THE AGENDA Part 1 User Interface vs. User Experience Part 2 iPad UX Project
  6. 6. UX vs. UIPart 1: a case for UX Design.
  7. 7. “One slide ofdefinitions, I promise.”
  8. 8. DEFINING UX USER EXPERIENCE Comprehends all aspects of digital products and services that users experience directly— and perceive, learn, and use—including products’ form, behavior, and content, but also encompassing users’ broader brand experience and the response that experience evokes in them. Key factors contributing to the quality of users’ experience of products are learnability, usability, usefulness, and aesthetic appeal. - Pabini Gabriel-Petit USER EXPERIENCE DESIGN A holistic, multidisciplinary approach to the design of user interfaces for digital products, defining their form, behavior, and content. User experience design integrates interaction design, industrial design, information architecture, information design, visual interface design, user assistance design, and user-centered design, ensuring coherence and consistency across all of these design dimensions. - Pabini Gabriel-PetitSource: www.uxmatters.com
  9. 9. ELEMENTS OF UX Multiple disciplines and tools: Visual Designer UI Developer Wireframes Information Architect Usability Testing Prototypes Taxonomies Content Strategy Digital Strategist User ResearchSource: Jesse James Garret (Elements of User Experience)
  10. 10. UX PROCESS
  11. 11. Define what YOUneed and then buildthe team.
  12. 12. A case for UX.
  13. 13. CURRENT AGENCY MODELSTEP 1:Project kicks off with Digital Strategy.STEP 2:The approved Digital Strategy and initial Visual Design elements form part of an BusinessRequirements Specification (BRS).STEP 3:The BRS goes to an external 3rd Party for development.
  14. 14. FLAW IN CURRENT MODEL ✦ User interface has not been tested with the target audience. ✦ Integrity and logic of the system and user interface has not been tested. ✦ Interface and solution innovation beyond strategy is absent.
  15. 15. NEW AGENCY MODEL
  16. 16. Development onlystarts after theprototype UI has beentested by users.
  17. 17. RESULTING IN:Less developmentiteration, lower costand better overallexperience for thecustomer.
  18. 18. iPad AppPart 2: A three-day UX Project.
  19. 19. SO, this iswhat I did.
  20. 20. UX APPROACH TOOLS AND METHODS USED Strategy Define a business objective User research Understanding the Device Recommendations Application Design Tasks & categorization Concept map User Interface Research Concept & style Prototyping Low-fidelity High-fidelity User Testing
  21. 21. Strategy.
  22. 22. TheBusiness.
  23. 23. “Create a new channel for our business”Source: “The business owner”
  24. 24. Understandingthe user.
  25. 25. RESEARCH Research via SurveyMonkey ✦ 40% Clients ✦ 20% Use the iPhone application ✦ 60% Prefer Online Channel ✦ 40% Owned an iPad ✦ 80% Will download an related iPad app. ✦ 50% Expect more from iPad application ✦ 70% Managed finances digitally ✦ 30% download an app from a competitor
  26. 26. KEY TAKE-OUT User expect more functionality from the iPad application.
  27. 27. Understandingthe device.
  28. 28. Zuckerberg was pretty blunt when it came to explainingwhy there wasn’t an iPad launch during today’s mobileevent: “The iPad isn’t mobile.” Wednesday, November 3rd, 2010, via Techcrunch.com
  29. 29. New iPhone Application Current Digital Platform of Client X Expectation is that feature set is similar to that of the original & User Expectations Mobile offering Tablet Smartphone Online/Desktop Mobile Challenge: The new iPad application must extend/enhance or be similar to that found within online environmentExpectation is that iPad willcarry online functionality.
  30. 30. Best-of-breedfeature set andinterface is critical.
  31. 31. RECOMMENDATIONS STRATEGIC RECOMMENDATIONS ✦ Extend feature set to include an something not within the other channels. Thus, launch it on the iPad and extend it to other digital channels. ✦ Opportunity (competitive edge) - Offer an service to non-customers to stimulate acquisition, an Freemium approach
  32. 32. ApplicationArchitecture.
  33. 33. Let’s segmentthe application.
  34. 34. USER MAP Registered not registered User Needs: User Needs: (1) Manage accounts (1) Log and track personal data (2) Log and track personal data (3) Analysis of data based on (2) Business Business Business objectives: Business objectives: (1) Recommend new products (1) In-app advertising based on and solutions based on user activity activity (2) Integration of other digital platforms offers
  35. 35. Categorisingthe applicationfeatures andfunctions.
  36. 36. CONCEPT MAP High level conceptual map of the application
  37. 37. Application TaxonomyNot logged in
  38. 38. Application Taxonomy:Logged in
  39. 39. UserInterface.
  40. 40. Deconstructingthe iPad interface.
  41. 41. SQUARE Accept credit cards and cash on your iPhone, iPad or iPod touch with the free Square Card Reader. Its only 2.75% per swipe for Visa, American Express, MasterCard and Discover. No contracts, monthly fees or merchant accounts. Funds are deposited into your bank account the next day. Square makes it easy for anyone to accept payments, anywhere. - iTunes
  42. 42. FLIPBOARD Named Apples iPad App of the Year and one of TIMEs top 50 innovations of 2010, Flipboard is a fast, beautiful way to flip through the stories, photos, videos, and updates from across your social networks and the news sites and sources you love. - iTunes
  43. 43. EGO Ego for iPad builds on everyones favorite web stats application and adds a new detail view that lets you dive even deeper into your stats. Swipe right on a widget to automatically log into that service, allowing you to view all the gritty details. Respond to your mentions on Twitter, check out your referrers in Google Analytics and Mint, browse your Tumblr Dashboard—all from within Ego! - iTunes
  44. 44. MINT Mint.com allows you to track, budget and manage your money all in one place, so you can see where you’re spending and where you can save. Open an account, add your bank, credit, loan and retirement accounts and Mint will automatically pull in and categorize your transactions. It’s safe, secure and easy to keep your personal finances organized. - iTunes
  45. 45. TWITTER Follow your interests: instant updates from your friends, industry experts, favorite celebrities, and what’s happening around the world. Get short bursts of timely information on the official Twitter app for iPhone. - iTunes
  46. 46. Metaphor vs.Traditional UI
  47. 47. PROPOSED UI Four layers of the application UI: 1. Navigation 2. Information Overview 3. Detailed Information 4. Functions
  48. 48. Lowfidelityprototype
  49. 49. Default view: Vertical 3.0 1.0 DATA VISUALISATION (A) 2.0 NAVIGATION LIST ITEMS (C) - Actions (B) DATA VISUALISATION (D) - Chart of activities 1.0 Main Navigation 2.0 Information Overview (3x Data Panes) 3.0 Detail Layer (Hidden)
  50. 50. Basic interactions: Vertical DATA VISUALISATION (A) NAVIGATION LIST ITEMS (C) - Actions (B) C Swipe to scroll DATA VISUALISATION (D) - Chart of activities B D
  51. 51. Accounts Section: List of items Default state (Post login) 3.0 Refresh Log Out Accounts 1 Heading 2.0 Sub-heading 2 3 DATA VISUALISATION (A) 4 5 Context - current view 6 List (C) - Actions (B) - Items NAVIGATION Task 1 1.0 Selected > Task 2 Task 3 > Task 4 > Task 5 > DATA VISUALISATION (B) - Chart of activities > > > 1.0 Main Navigation (Icons) 2.0 Information Overview (3x Data Panes) 3.0 Detail Layer (Hidden)
  52. 52. Accounts Section: List of items Change items 3.0 Refresh Log Out Accounts 1 Heading 2.0 Sub-heading 2 3 DATA VISUALISATION (A) 4 5 Context - current view 6 List (C) - Actions (B) - Items NAVIGATION Task 1 1.0 > Task 2 Task 3 Selected >> Task 4 > Task 5 > DATA VISUALISATION (B) - Chart of activities > > > 1.0 Main Navigation 2.0 Information Overview (3x Data Panes) 3.0 Detail Layer (Hidden) Tap to change selection Refresh Area (A) & (C)
  53. 53. Accounts Section: List of items Action a task 3.0 Refresh Log Out Accounts 1 Heading 2.0 Sub-heading 2 3 DATA VISUALISATION (A) 4 5 Context - current view 6 List (C) - Actions (B) - Items NAVIGATION Task 1 1.0 > Task 2 Task 3 Selected >> Task 4 > Task 5 > DATA VISUALISATION (B) - Chart of activities > > Slide > 1.0 Main Navigation 2.0 Information Overview (3x Data Panes) 3.0 Detail Layer (Hidden) Tap to view detail
  54. 54. Accounts Section: List of task settings Task settings 3.0 Refresh Log Out Accounts Back Task - Heading R3,500 Heading 2.0 Balance 1 Item refrence R2,000 Available Sub-heading 2 Search 3 DATA VISUALISATION (A) - Line graph of Income and Expenses 4 5 Context - current view 6 List Items List (C) - Actions (B) - Accounts (B) - Items NAVIGATION PayTask 1 Someone 1.0 Selected >> Transfer Money Task 2 Detailed Balance Task 3 > Transaction4 Task History > Account Information Task 5 > DATA VISUALISATION (B Chart of activities (B)--Chart of activities) > (%) Percentage of: - Expenses - Deposits - Debit Orders > - Prepaid Purchase - Data Apply Here > 1.0 Main Navigation 2.0 Information Overview (3x Data Panes) 3.0 Detail Layer (Hidden) Tap to view task settings
  55. 55. Accounts Section: List of task settings Task settings (close) 3.0 Refresh Log Out Accounts Back Task - Heading R3,500 Heading 2.0 Balance 1 Item refrence R2,000 Available Sub-heading 2 Search 3 DATA VISUALISATION (A) - Line graph of Income and Expenses 4 5 Context - current view 6 List Items List (C) - Actions (B) - Accounts (B) - Items NAVIGATION PayTask 1 Someone 1.0 Selected >> Transfer Money Task 2 Detailed Balance Task 3 > Transaction4 Task History > Account Information Task 5 > DATA VISUALISATION (B Chart of activities (B)--Chart of activities) > (%) Percentage of: - Expenses - Deposits - Debit Orders > - Prepaid Purchase - Data Apply Here > 1.0 Main Navigation 2.0 Information Overview (3x Data Panes) 3.0 Detail Layer (Hidden) Swipe to close layer
  56. 56. Accounts Section: List of accounts and balances Minor task 3.0 Refresh Log Out Accounts 1 Heading 2.0 Sub-heading 2 3 DATA VISUALISATION (A) 4 5 Context - current view 6 List (C) - Actions (B) - Items NAVIGATION Task 1 1.0 > Task 2 Task 3 Selected >> Task 4 > Task 5 > DATA VISUALISATION (B) - Chart of activities > > > 1.0 Main Navigation 2.0 Information Overview (3x Data Panes) 3.0 Detail Layer (Hidden) Tap to action
  57. 57. Accounts Section: List of accounts and balances Minor task 3.0 Refresh Log Out Accounts 1 Heading 2.0 Sub-heading 2 3 DATA VISUALISATION (A) 4 5 Cancel Action Task Context - current view 6 Parameter 1: List Items List Parameter 2: (C) - Actions (B) - Accounts (B) - Items NAVIGATION Task 1 1.0 > > Task 2 Task 3 Selected >> Task 4 Action Task > Task 5 > DATA VISUALISATION (B) - Chart of activities > > > 1.0 Main Navigation 2.0 Information Overview (3x Data Panes) 3.0 Detail Layer (Hidden)
  58. 58. Default view after logon: Horizontal layout DATA VISUALISATION (A) NAVIGATION LIST ITEMS (C) - Actions (B) DATA VISUALISATION (D) - Chart of activities 90 Rotation
  59. 59. Default view after logon: Horizontal layout DATA VISUALISATION (A) NAVIGATION LIST ITEMS (C) - Actions (B) DATA VISUALISATION (D) - Chart of activities 90 Rotation Slide
  60. 60. Prototypein action

×