{"id":9644,"date":"2019-04-29T07:24:16","date_gmt":"2019-04-29T05:24:16","guid":{"rendered":"https:\/\/www.testingtime.com\/?p=9644"},"modified":"2019-04-29T07:24:16","modified_gmt":"2019-04-29T05:24:16","slug":"data-ux-beyond-wireframes","status":"publish","type":"post","link":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/","title":{"rendered":"Data UX: beyond wireframes"},"content":{"rendered":"<p>Interaction designers need to <a href=\"https:\/\/www.testingtime.com\/en\/blog\/make-ux-measurable\/\" target=\"_blank\" rel=\"noopener noreferrer\">make UX measurable<\/a>. We can measure the quality of apps and websites using NPS scores, analytics and conversion rates. This blog post isn\u2019t about getting feedback as such. It\u2019s about building user experiences with data as a raw material.<\/p>\n\t\t\t<div class=\"teaser-post\" style=\"background: #868B9E;\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"left-side\" style=\"color: #ffffff;\">\n\t\t\t\t\t\t<div class=\"teaser-post-content\">\n\t\t\t\t\t\t\t<h2>Make UX measurable and strengthen your company&#8217;s UX culture<\/h2>\n\t\t\t\t\t\t\t<p>A better UX leads to more satisfied employees, fewer mistakes, reduced support requirements and, ultimately,\u00a0<strong>more revenue.\u00a0<\/strong>This guide teaches you how to demonstrate the value of your work and strengthen your company&#8217;s UX culture.<\/p>\n\t\t\t\t\t\t\t<p class=\"read-more-button\">\n\t\t\t\t\t\t\t\t<a href=\"https:\/\/resources.testingtime.com\/make-ux-measurable\">\n\t\t\t\t\t\t\t\t\tDownload guide\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"right-side\" >\n\t\t\t\t\t\t<div id=\"teaser-1-image\" class=\"teaser-post-image\">\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\n<h2>Table of contents<\/h2>\n<ul>\n<li><a href=\"#1\">Sketch\/wireframe\/prototype<\/a><br \/>\nThe established approach to UX design has its limitations.<\/li>\n<li><a href=\"#2\">Designing a search box<\/a><br \/>\nThe search box design is based on the underlying data of a website.<\/li>\n<li><a href=\"#3\">Banking dashboards<\/a><br \/>\nBank balances are headline data with different states.<\/li>\n<li><a href=\"#4\">Offering data as micro-visualisations<\/a><br \/>\nSimplify the data on offer.<\/li>\n<li><a href=\"#5\">The future: beyond the user\u00a0interface<\/a><br \/>\nAdapt your data to new media and devices.<\/li>\n<\/ul>\n<h2><a id=\"1\"><\/a>Sketch\/wireframe\/prototype<\/h2>\n<p>Here\u2019s a simplified UX approach for websites, apps and online services. I\u2019m going to call it <strong>Wireframe UX<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9646\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/1-wireframe-ux-beyond-wireframes.png\" alt=\" Illustration SEQ Illustration \\* ARABIC 1: A Wireframe UX flow - from researching users to launching a new app\" width=\"600\" height=\"300\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/1-wireframe-ux-beyond-wireframes.png 600w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/1-wireframe-ux-beyond-wireframes-328x164.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/1-wireframe-ux-beyond-wireframes-260x130.png 260w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/1-wireframe-ux-beyond-wireframes-480x240.png 480w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<ol>\n<li><strong>Research your users<\/strong> \u2013 work out who they are, what they need and how they will use the product.<\/li>\n<li><strong>Explore solutions<\/strong>\u00a0and refine these with a project team.<\/li>\n<li><strong>Create wireframes<\/strong> from your rough sketches.<\/li>\n<li><strong>Create a prototype<\/strong> which customers can interact with.<\/li>\n<li><strong>Test with real people<\/strong> and change the design if necessary.<\/li>\n<li><strong>Hand over the design<\/strong> to developers to build it.<\/li>\n<\/ol>\n<p>The design evolves from low to high fidelity. Designers create wireframes to help the team see things from the end user\u2019s point of view. The limitation of this approach is that we can end up thinking mainly in terms of <strong>two-dimensional pictures<\/strong>, even when interactivity is involved.<\/p>\n<p>I feel it\u2019s time to start looking beyond wireframes and start <strong>designing with data<\/strong>. I\u2019m not calling for an analysis of the data: good designers are doing that already. I\u2019m saying we need to work with data in the same way we work with fonts, colours, HTML, CSS and responsive views. It\u2019s a raw material. It\u2019s the third dimension of the web.<\/p>\n<h2><a id=\"2\"><\/a>Designing a Search box<\/h2>\n<p>To begin with, let\u2019s take a look at an established design pattern:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9652\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/2-generic-search-box-beyond-wireframes.png\" alt=\" A generic search box\" width=\"388\" height=\"133\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/2-generic-search-box-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/2-generic-search-box-beyond-wireframes-328x112.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/2-generic-search-box-beyond-wireframes-262x90.png 262w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>A search box is made up of:<\/p>\n<ul>\n<li>a label<\/li>\n<li>an input field with a placeholder<\/li>\n<li>a call to action button<\/li>\n<li>filters<\/li>\n<\/ul>\n<p>The complexity comes from the content: what is the search box going to search?<\/p>\n<p>For example, suppose you design a search box for a website all about ducks. How many items will the search engine go through? I had a quick look on Wikipedia:<\/p>\n<ul>\n<li>Domestic ducks: 100 breeds.<\/li>\n<li>Wild ducks: Aythyinae (15 members) and Anatinae (seven \u2018genera\u2019 and around 20 other types).<\/li>\n<\/ul>\n<p>So if you were approaching the user experience as an information architect you\u2019d decide how to categorise the ducks \u2013 a \u2018taxonomy.\u2019 You would then decide how to help site visitors to find the breed they\u2019re looking for. You might allow them to filter by type or the country where they live:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9655\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/3-search-box-placeholders-beyond-wireframes.png\" alt=\"A search box with a placeholder and filters\" width=\"408\" height=\"165\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/3-search-box-placeholders-beyond-wireframes.png 408w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/3-search-box-placeholders-beyond-wireframes-328x133.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/3-search-box-placeholders-beyond-wireframes-262x106.png 262w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/p>\n<p>You may use predictive search \u2013 after you type three characters in the search box the website starts suggesting results.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9658\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/4-search-box-predictive-beyond-wireframes.png\" alt=\" A search box with predictive search results\" width=\"408\" height=\"265\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/4-search-box-predictive-beyond-wireframes.png 408w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/4-search-box-predictive-beyond-wireframes-328x213.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/4-search-box-predictive-beyond-wireframes-200x130.png 200w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/p>\n<p>If the search box is going to trigger a search through billions of web pages, photographs or videos rather than a few hundred ducks, you may need to tailor the design; you may also want to offer an advanced search page.<\/p>\n<p>The point is this: to design a search box you have to start with the underlying data you have and choose the best design pattern to deliver it. Otherwise, all you have is a rectangle with a label.<\/p>\n<h2><a id=\"3\"><\/a>Banking dashboards<\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at the way banking dashboards offer up underlying data. They usually use cards to display multiple bank accounts on one screen:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9661\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/5-banking-dashboard-with-cards-beyond-wireframes.png\" alt=\"A banking dashboard with cards showing a Current account and Savings account.\" width=\"388\" height=\"196\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/5-banking-dashboard-with-cards-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/5-banking-dashboard-with-cards-beyond-wireframes-328x166.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/5-banking-dashboard-with-cards-beyond-wireframes-257x130.png 257w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>In these examples there are actually three kinds of data on each card:<\/p>\n<ol>\n<li>\u2018Current account \/ Savings account\u2019 \u2013 a hard-coded description of the type of account<\/li>\n<li>\u2018Account number\u2019 and \u2018sort code\u2019 \u2013 the unique ID for each account.<\/li>\n<li>The bank account balance \u2013 this is the <strong>headline data<\/strong>. It\u2019s the thing which the customer actually logs in to see.<\/li>\n<\/ol>\n<p>The account balance is the only piece of data which is variable. A bank account often has three <strong>states<\/strong>, it is in:<\/p>\n<ul>\n<li>credit<\/li>\n<li>an authorised overdraft<\/li>\n<li>an unauthorised overdraft<\/li>\n<\/ul>\n<p>So, as a designer you need to communicate the states, using a combination of words, symbols and colours:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9664\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/6-banking-dashboard-unauthorised-beyond-wireframes.png\" alt=\"A bank balance showing an authorised overdraft\" width=\"388\" height=\"93\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/6-banking-dashboard-unauthorised-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/6-banking-dashboard-unauthorised-beyond-wireframes-328x79.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/6-banking-dashboard-unauthorised-beyond-wireframes-262x63.png 262w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>That\u2019s the basic idea. But rather than just indicating the state, you may add a <strong>prompt<\/strong>: perhaps a stern message about the overdraft:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9667\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/7-bank-account-warning-beyond-wireframes.png\" alt=\" A bank account showing an unauthorised overdraft\" width=\"388\" height=\"149\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/7-bank-account-warning-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/7-bank-account-warning-beyond-wireframes-328x126.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/7-bank-account-warning-beyond-wireframes-262x101.png 262w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>A more helpful message would be to tell the customer what they need to do to avoid charges:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9670\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/8-bank-account-call-to-action-beyond-wireframes.png\" alt=\"A call to action telling the customer to pay money in by a certain time\" width=\"388\" height=\"151\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/8-bank-account-call-to-action-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/8-bank-account-call-to-action-beyond-wireframes-328x128.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/8-bank-account-call-to-action-beyond-wireframes-262x102.png 262w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>You can go even further. By using the interaction state of \u2018unauthorised overdraft\u2019 you can offer more complex prompts which automate their banking activity:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9676\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/9-bank-account-transfer-prompt-beyond-wireframes.png\" alt=\" Illustration SEQ Illustration \\* ARABIC 2: A bank account card with an overdraft warning and a transfer button\" width=\"388\" height=\"263\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/9-bank-account-transfer-prompt-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/9-bank-account-transfer-prompt-beyond-wireframes-328x222.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/9-bank-account-transfer-prompt-beyond-wireframes-192x130.png 192w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>At this point, we\u2019ve gone beyond using states to triggering prompts. As apps and devices become more sophisticated we have more digital media to interact with. Designers need to think of new ways of offering the underlying data.<\/p>\n<h2><a id=\"4\"><\/a>Offering data as micro-visualisations<\/h2>\n<p>Bank balances exist in a state of constant change, like the value of Pounds Sterling. Forward-looking banks like Monzo have started to help their customers manage their finances by offering a kind of customisation: a \u2018Safe to spend\u2019 amount:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9673\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/10-bank-account-safe-to-spend-beyond-wireframes.png\" alt=\" Illustration SEQ Illustration \\* ARABIC 2: A bank account card with an overdraft warning and a transfer button\" width=\"388\" height=\"172\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/10-bank-account-safe-to-spend-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/10-bank-account-safe-to-spend-beyond-wireframes-328x145.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/10-bank-account-safe-to-spend-beyond-wireframes-262x116.png 262w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>If a customer enters their monthly payday into the app the app can work out how much she can spend without getting overdrawn. To get the correct figure it deducts her direct debits\/cheques\/standing orders and pending transactions from her current account balance.<\/p>\n<p>If you\u2019re designing with data, you can offer micro-interactions to sum up her spending without her leaving the dashboard.<\/p>\n<p>To start with, use a bar to show how much is left in this calendar month:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9679\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/11-bank-account-bar-beyond-wireframes.png\" alt=\"Illustration SEQ Illustration \\* ARABIC 4: A bar showing a bank balance and the amount spent\" width=\"388\" height=\"102\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/11-bank-account-bar-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/11-bank-account-bar-beyond-wireframes-328x86.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/11-bank-account-bar-beyond-wireframes-262x69.png 262w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>Offer quick summaries of her spending over a month:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9682\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/12-bank-account-weekly-spending-beyond-wireframes.png\" alt=\"Illustration SEQ Illustration \\* ARABIC 5: A breakdown of a bank customer's spending, by week\" width=\"388\" height=\"277\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/12-bank-account-weekly-spending-beyond-wireframes.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/12-bank-account-weekly-spending-beyond-wireframes-328x234.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/12-bank-account-weekly-spending-beyond-wireframes-182x130.png 182w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>When a customer interacts with an organisation over time they leave a trail. If the information is useful to them, such as a month\u2019s spending transactions, try offering them a useful summary:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9733 size-full\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/03\/13-bank-account-tagged-spending.png\" alt=\" Illustration SEQ Illustration \\* ARABIC 6: A bank customers tagged spending - includes categories like Rent, Groceries and Entertainment\" width=\"388\" height=\"277\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/03\/13-bank-account-tagged-spending.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/03\/13-bank-account-tagged-spending-328x234.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/03\/13-bank-account-tagged-spending-182x130.png 182w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>Let them drill down to specifics:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9693\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/14-bank-account-supermarket-spending-beyond-wireframes-1.png\" alt=\" Illustration SEQ Illustration \\* ARABIC 7: A bank customer's supermarket spending, showing Tesco, Aldi, Lidl and Asda\" width=\"388\" height=\"277\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/14-bank-account-supermarket-spending-beyond-wireframes-1.png 388w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/14-bank-account-supermarket-spending-beyond-wireframes-1-328x234.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/14-bank-account-supermarket-spending-beyond-wireframes-1-182x130.png 182w\" sizes=\"auto, (max-width: 388px) 100vw, 388px\" \/><\/p>\n<p>Micro-visualisations only work for users who can see and understand a screen. Designers need to include people with poor eyesight and dyslexia. There are also a lot of contexts where the user will start using their voice to get a bank balance. Soon you will be able to get your bank balance from a smart car connected to your bank account.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9696\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/15-devices-talking-about-money-beyond-wireframes.png\" alt=\"Illustration SEQ Illustration \\* ARABIC 8: An alexa, smartphone, chatbot and smart car talking about money\" width=\"941\" height=\"153\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/15-devices-talking-about-money-beyond-wireframes.png 941w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/15-devices-talking-about-money-beyond-wireframes-328x53.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/15-devices-talking-about-money-beyond-wireframes-480x78.png 480w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/p>\n<p>So as a designer, consider how to summarise the underlying data, and how to tailor it to different mediums and the needs of users.<\/p>\n<h2><a id=\"5\"><\/a>The future: beyond the user interface<\/h2>\n<p>Finally, let\u2019s look at ways that we can offer data without using a web page or app.<\/p>\n<p>In our interconnected and information-overloaded world, our user has to be able to customise his prompts. He chooses how often he gets updates and the media he\u2019ll get them in.<\/p>\n<p>He can also choose settings which might influence his own behaviour, including spending money.<\/p>\n\t\t\t<div class=\"teaser-post\" style=\"background: #868B9E;\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"left-side\" style=\"color: #ffffff;\">\n\t\t\t\t\t\t<div class=\"teaser-post-content\">\n\t\t\t\t\t\t\t<h2>Make UX measurable and strengthen your company&#8217;s UX culture<\/h2>\n\t\t\t\t\t\t\t<p>A better UX leads to more satisfied employees, fewer mistakes, reduced support requirements and, ultimately,\u00a0<strong>more revenue.\u00a0<\/strong>This guide teaches you how to demonstrate the value of your work and strengthen your company&#8217;s UX culture.<\/p>\n\t\t\t\t\t\t\t<p class=\"read-more-button\">\n\t\t\t\t\t\t\t\t<a href=\"https:\/\/resources.testingtime.com\/make-ux-measurable\">\n\t\t\t\t\t\t\t\t\tDownload guide\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"right-side\" >\n\t\t\t\t\t\t<div id=\"teaser-2-image\" class=\"teaser-post-image\">\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\n<p>Some FinTechs are offering bot helpers to help you control your spending while others offer instant feedback on your smartphone when you make a physical card payment.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9699\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/16-bank-notifications-beyond-wireframes.png\" alt=\" Illustration SEQ Illustration \\* ARABIC 12: A man sitting at his computer surrounded by examples of the interconnected world, including devices, a chatbot and a smart car\" width=\"529\" height=\"320\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/16-bank-notifications-beyond-wireframes.png 529w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/16-bank-notifications-beyond-wireframes-328x198.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/16-bank-notifications-beyond-wireframes-215x130.png 215w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/16-bank-notifications-beyond-wireframes-480x290.png 480w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9702\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/17-connected-notifications-beyond-wireframes.png\" alt=\"Illustration SEQ Illustration \\* ARABIC 12: A man sitting at his computer surrounded by examples of the interconnected world, including devices, a chatbot and a smart car\" width=\"529\" height=\"262\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/17-connected-notifications-beyond-wireframes.png 529w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/17-connected-notifications-beyond-wireframes-328x162.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/17-connected-notifications-beyond-wireframes-262x130.png 262w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/17-connected-notifications-beyond-wireframes-480x238.png 480w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/p>\n<p>The connected bank card is an example of the \u2018Internet of things.\u2019 This may soon include your car, your central heating, or wearable technology which can monitor your heart rate or body temperature. Users won\u2019t just be interacting with a single website or app.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9705\" src=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/18-ux-channels-beyond-wireframes.png\" alt=\"Illustration SEQ Illustration \\* ARABIC 12: A man sitting at his computer surrounded by examples of the interconnected world, including devices, a chatbot and a smart car\" width=\"932\" height=\"354\" srcset=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/18-ux-channels-beyond-wireframes.png 932w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/18-ux-channels-beyond-wireframes-328x125.png 328w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/18-ux-channels-beyond-wireframes-262x100.png 262w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/18-ux-channels-beyond-wireframes-768x292.png 768w, https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/18-ux-channels-beyond-wireframes-480x182.png 480w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><\/p>\n<p>There will be even more need for talented designers. The underlying data for a banking transaction is likely to stay the same \u2013 a customer has money or he owes money. He makes deposits and payments and has a balance which he needs to keep track of. Our challenge is still to make the experience as straightforward and delightful as possible. My advice is: start with the data and adapt it to the medium to create a good user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interaction designers need to make UX measurable. We can measure the quality of apps and websites using NPS scores, analytics and conversion rates. This blog post isn\u2019t about getting feedback as such. It\u2019s about building user experiences with data as a raw material. Table of contents Sketch\/wireframe\/prototype The established approach to UX design has its [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":9705,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[5096],"tags":[],"class_list":["post-9644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v20.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Data UX: beyond wireframes - TestingTime<\/title>\n<meta name=\"description\" content=\"This blog post isn\u2019t about getting feedback as such. It\u2019s about building user experiences with data as a raw material, beyond wireframes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Data UX: beyond wireframes\" \/>\n<meta property=\"og:description\" content=\"This blog post isn\u2019t about getting feedback as such. It\u2019s about building user experiences with data as a raw material, beyond wireframes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/\" \/>\n<meta property=\"og:site_name\" content=\"TestingTime\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/testingtime\" \/>\n<meta property=\"article:published_time\" content=\"2019-04-29T05:24:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/18-ux-channels-beyond-wireframes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"932\" \/>\n\t<meta property=\"og:image:height\" content=\"354\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bobby King\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@testingtime\" \/>\n<meta name=\"twitter:site\" content=\"@testingtime\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bobby King\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/\"},\"author\":{\"name\":\"Bobby King\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/a84ff5e18e211e9eb601742550071a6c\"},\"headline\":\"Data UX: beyond wireframes\",\"datePublished\":\"2019-04-29T05:24:16+00:00\",\"dateModified\":\"2019-04-29T05:24:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/\"},\"wordCount\":1281,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\"},\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/\",\"url\":\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/\",\"name\":\"Data UX: beyond wireframes - TestingTime\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#website\"},\"datePublished\":\"2019-04-29T05:24:16+00:00\",\"dateModified\":\"2019-04-29T05:24:16+00:00\",\"description\":\"This blog post isn\u2019t about getting feedback as such. It\u2019s about building user experiences with data as a raw material, beyond wireframes.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TestingTime\",\"item\":\"https:\/\/www.testingtime.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Data UX: beyond wireframes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#website\",\"url\":\"https:\/\/www.testingtime.com\/en\/\",\"name\":\"TestingTime\",\"description\":\"Wir rekrutieren Testpersonen\",\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.testingtime.com\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#organization\",\"name\":\"TestingTime\",\"url\":\"https:\/\/www.testingtime.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"width\":1,\"height\":1,\"caption\":\"TestingTime\"},\"image\":{\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/testingtime\",\"https:\/\/twitter.com\/testingtime\",\"https:\/\/www.instagram.com\/testingtime\/\",\"https:\/\/www.linkedin.com\/company-beta\/9231506\/\",\"https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/a84ff5e18e211e9eb601742550071a6c\",\"name\":\"Bobby King\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/Bobby-130x130.jpg\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/Bobby-130x130.jpg\",\"caption\":\"Bobby King\"},\"sameAs\":[\"http:\/\/madmarch.co.uk\/\"],\"url\":\"https:\/\/www.testingtime.com\/en\/blog\/author\/bobby-king\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Data UX: beyond wireframes - TestingTime","description":"This blog post isn\u2019t about getting feedback as such. It\u2019s about building user experiences with data as a raw material, beyond wireframes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/","og_locale":"en_US","og_type":"article","og_title":"Data UX: beyond wireframes","og_description":"This blog post isn\u2019t about getting feedback as such. It\u2019s about building user experiences with data as a raw material, beyond wireframes.","og_url":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/","og_site_name":"TestingTime","article_publisher":"https:\/\/www.facebook.com\/testingtime","article_published_time":"2019-04-29T05:24:16+00:00","og_image":[{"width":932,"height":354,"url":"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/18-ux-channels-beyond-wireframes.png","type":"image\/png"}],"author":"Bobby King","twitter_card":"summary_large_image","twitter_creator":"@testingtime","twitter_site":"@testingtime","twitter_misc":{"Written by":"Bobby King","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/#article","isPartOf":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/"},"author":{"name":"Bobby King","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/a84ff5e18e211e9eb601742550071a6c"},"headline":"Data UX: beyond wireframes","datePublished":"2019-04-29T05:24:16+00:00","dateModified":"2019-04-29T05:24:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/"},"wordCount":1281,"commentCount":0,"publisher":{"@id":"https:\/\/www.testingtime.com\/en\/#organization"},"articleSection":["Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/","url":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/","name":"Data UX: beyond wireframes - TestingTime","isPartOf":{"@id":"https:\/\/www.testingtime.com\/en\/#website"},"datePublished":"2019-04-29T05:24:16+00:00","dateModified":"2019-04-29T05:24:16+00:00","description":"This blog post isn\u2019t about getting feedback as such. It\u2019s about building user experiences with data as a raw material, beyond wireframes.","breadcrumb":{"@id":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.testingtime.com\/en\/blog\/data-ux-beyond-wireframes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TestingTime","item":"https:\/\/www.testingtime.com\/en\/"},{"@type":"ListItem","position":2,"name":"Data UX: beyond wireframes"}]},{"@type":"WebSite","@id":"https:\/\/www.testingtime.com\/en\/#website","url":"https:\/\/www.testingtime.com\/en\/","name":"TestingTime","description":"Wir rekrutieren Testpersonen","publisher":{"@id":"https:\/\/www.testingtime.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.testingtime.com\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.testingtime.com\/en\/#organization","name":"TestingTime","url":"https:\/\/www.testingtime.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","width":1,"height":1,"caption":"TestingTime"},"image":{"@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/testingtime","https:\/\/twitter.com\/testingtime","https:\/\/www.instagram.com\/testingtime\/","https:\/\/www.linkedin.com\/company-beta\/9231506\/","https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w"]},{"@type":"Person","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/a84ff5e18e211e9eb601742550071a6c","name":"Bobby King","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.testingtime.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/Bobby-130x130.jpg","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2019\/02\/Bobby-130x130.jpg","caption":"Bobby King"},"sameAs":["http:\/\/madmarch.co.uk\/"],"url":"https:\/\/www.testingtime.com\/en\/blog\/author\/bobby-king\/"}]}},"_links":{"self":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/9644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/comments?post=9644"}],"version-history":[{"count":25,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/9644\/revisions"}],"predecessor-version":[{"id":11081,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/posts\/9644\/revisions\/11081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/media\/9705"}],"wp:attachment":[{"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/media?parent=9644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/categories?post=9644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.testingtime.com\/en\/wp-json\/wp\/v2\/tags?post=9644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}