Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An UX approach to creating iPad application in ...

An UX approach to creating iPad application in seven days

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.

Werner Puchert

April 05, 2012
Tweet

Other Decks in Research

Transcript

  1. 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-Petit Source: www.uxmatters.com
  2. ELEMENTS OF UX Source: Jesse James Garret (Elements of User

    Experience) Information Architect UI Developer Prototypes Content Strategy Digital Strategist User Research Taxonomies Wireframes Visual Designer Usability Testing Multiple disciplines and tools:
  3. CURRENT AGENCY MODEL STEP 1: Project kicks off with Digital

    Strategy. STEP 2: The approved Digital Strategy and initial Visual Design elements form part of an Business Requirements Specification (BRS). STEP 3: The BRS goes to an external 3rd Party for development.
  4. 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.
  5. 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
  6. 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
  7. Zuckerberg was pretty blunt when it came to explaining why

    there wasnʼt an iPad launch during todayʼs mobile event: “The iPad isnʼt mobile.” Wednesday, November 3rd, 2010, via Techcrunch.com
  8. Current Digital Platform of Client X Online/Desktop Mobile & User

    Expectations New iPhone Application Expectation is that feature set is similar to that of the original Mobile offering Challenge: The new iPad application must extend/enhance or be similar to that found within online environment Smartphone Tablet Expectation is that iPad will carry online functionality.
  9. 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
  10. USER MAP Registered not registered User Needs: (1) Manage accounts

    (2) Log and track personal data (3) Analysis of data based on (2) User Needs: (1) Log and track personal data Business Business objectives: (1) Recommend new products and solutions based on user activity (2) Integration of other digital platforms offers Business Business objectives: (1) In-app advertising based on activity
  11. SQUARE Accept credit cards and cash on your iPhone, iPad

    or iPod touch with the free Square Card Reader. It's 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
  12. FLIPBOARD Named Apple's iPad App of the Year and one

    of TIME's 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
  13. EGO Ego for iPad builds on everyone's 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
  14. 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
  15. 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
  16. PROPOSED UI Four layers of the application UI: 1. Navigation

    2. Information Overview 3. Detailed Information 4. Functions
  17. NAVIGATION LIST ITEMS (B) DATA VISUALISATION (A) Default view: DATA

    VISUALISATION (D) - Chart of activities (C) - Actions Vertical 3.0 Main Navigation Information Overview (3x Data Panes) Detail Layer (Hidden) 1.0 2.0 3.0 1.0 2.0
  18. NAVIGATION LIST ITEMS (B) DATA VISUALISATION (A) Basic interactions: DATA

    VISUALISATION (D) - Chart of activities (C) - Actions Vertical Swipe to scroll C D B
  19. NAVIGATION List (B) - Items DATA VISUALISATION (B) - Chart

    of activities Accounts Section: 1.0 1.0 2.0 3.0 3.0 Main Navigation (Icons) Information Overview (3x Data Panes) Detail Layer (Hidden) List of items > > > > > Accounts 3 4 5 6 1 Log Out > 2 Heading Sub-heading Context - current view DATA VISUALISATION (A) Task 1 Task 2 Task 3 Task 4 Task 5 Selected > (C) - Actions Default state Refresh (Post login) 2.0
  20. NAVIGATION List (B) - Items DATA VISUALISATION (B) - Chart

    of activities 1.0 1.0 2.0 3.0 3.0 Main Navigation Information Overview (3x Data Panes) Detail Layer (Hidden) > > > > > Accounts 3 4 5 6 1 Log Out > 2 Heading Sub-heading Context - current view DATA VISUALISATION (A) Task 1 Task 2 Task 3 Task 4 Task 5 Selected > (C) - Actions Refresh 2.0 Accounts Section: List of items Tap to change selection Refresh Area (A) & (C) Change items >
  21. NAVIGATION List (B) - Items DATA VISUALISATION (B) - Chart

    of activities 1.0 1.0 2.0 3.0 3.0 Main Navigation Information Overview (3x Data Panes) Detail Layer (Hidden) > > > > > Accounts 3 4 5 6 1 Log Out > 2 Heading Sub-heading Context - current view DATA VISUALISATION (A) Task 1 Task 2 Task 3 Task 4 Task 5 Selected > (C) - Actions Refresh 2.0 Accounts Section: List of items Action a task > Tap to view detail Slide
  22. NAVIGATION List (B) - Items DATA VISUALISATION (B) - Chart

    of activities 1.0 > > > > > Accounts 3 4 5 6 1 Log Out > 2 Heading Sub-heading Context - current view DATA VISUALISATION (A) - Line graph of Income and Expenses Task 1 Task 2 Task 3 Task 4 Task 5 Selected > (C) - Actions Refresh 2.0 List Items (B) - Accounts DATA VISUALISATION (B - Chart of activities) Accounts Section: 1.0 2.0 3.0 Main Navigation Information Overview (3x Data Panes) Detail Layer (Hidden) List of task settings (%) Percentage of: - Expenses - Deposits - Debit Orders - Prepaid Purchase - Data > > > > > Log Out Apply Here > R3,500 Balance R2,000 Available DATA VISUALISATION (A) - Line graph of Income and Expenses Pay Someone Transfer Money Detailed Balance Transaction History Account Information (C) - Actions Task settings Task - Heading Search Back Item refrence 3.0 Tap to view task settings
  23. NAVIGATION List (B) - Items DATA VISUALISATION (B) - Chart

    of activities 1.0 > > > > > Accounts 3 4 5 6 1 Log Out > 2 Heading Sub-heading Context - current view DATA VISUALISATION (A) - Line graph of Income and Expenses Task 1 Task 2 Task 3 Task 4 Task 5 Selected > (C) - Actions Refresh 2.0 List Items (B) - Accounts DATA VISUALISATION (B - Chart of activities) Accounts Section: 1.0 2.0 3.0 Main Navigation Information Overview (3x Data Panes) Detail Layer (Hidden) List of task settings (%) Percentage of: - Expenses - Deposits - Debit Orders - Prepaid Purchase - Data > > > > > Log Out Apply Here > R3,500 Balance R2,000 Available DATA VISUALISATION (A) - Line graph of Income and Expenses Pay Someone Transfer Money Detailed Balance Transaction History Account Information (C) - Actions Task settings (close) Task - Heading Search Back Item refrence 3.0 Swipe to close layer
  24. NAVIGATION List (B) - Items DATA VISUALISATION (B) - Chart

    of activities 1.0 1.0 2.0 3.0 3.0 Main Navigation Information Overview (3x Data Panes) Detail Layer (Hidden) > > > > > Accounts 3 4 5 6 1 Log Out > 2 Heading Sub-heading Context - current view DATA VISUALISATION (A) Task 1 Task 2 Task 3 Task 4 Task 5 Selected > (C) - Actions Refresh 2.0 > Accounts Section: List of accounts and balances Tap to action Minor task
  25. NAVIGATION List (B) - Items DATA VISUALISATION (B) - Chart

    of activities 1.0 1.0 2.0 3.0 3.0 Main Navigation Information Overview (3x Data Panes) Detail Layer (Hidden) > > > > > Accounts 3 4 5 6 1 Log Out > 2 Heading Sub-heading Context - current view DATA VISUALISATION (A) Task 1 Task 2 Task 3 Task 4 Task 5 Selected > (C) - Actions Refresh 2.0 > Accounts Section: List of accounts and balances Minor task List Items (B) - Accounts > > Action Task Cancel Parameter 1: Parameter 2: Action Task
  26. NAVIGATION LIST ITEMS (B) DATA VISUALISATION (A) Default view after

    logon: DATA VISUALISATION (D) - Chart of activities (C) - Actions Horizontal layout Rotation 90'
  27. NAVIGATION LIST ITEMS (B) DATA VISUALISATION (A) Default view after

    logon: DATA VISUALISATION (D) - Chart of activities (C) - Actions Horizontal layout Rotation 90' Slide