large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p>Published on <a href="https://blog.prototypr.io/pig-2-620555b1479d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Stuart Tayler <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xkcAiy6hiFSBE_FfOpBwSQ.jpeg"></p>
<p>Last year I wrote a <a href="https://blog.prototypr.io/prototyping-a-connected-piggy-bank-1d4e507a9a77">blog post</a> about an internet connected piggy bank that I made. Kids could shake the pig and it would tell them how much money was in an online bank account.</p>
<p>It gave me the idea that it would be nice if children could talk back to the pig and ask it questions. And so I set to work on a new version. This article explains what <em>Pig eBank 2</em> does, I’ll share a few learnings from prototyping a voice-controlled device and I’ll consider how it relates to the idea of open banking. There’s also some technical details at the end.</p>
<h3>What Pig eBank 2 does</h3>
<p>The Pig sits at home providing a physical and interactive link to a child’s online bank account. Here’s an overview of some of things it can do:</p>
<h4>Alerts</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F232748540&amp;url=https%3A%2F%2Fvimeo.com%2F232748540&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F653947315_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1080" frameborder="0"><a href="https://medium.com/media/d3caf1e3d8e3c96cdb7d00ab426362a9/href">https://medium.com/media/d3caf1e3d8e3c96cdb7d00ab426362a9/href</a></iframe></p>
<p>Much like Pig eBank 1, when there is a transaction — for example, if the child receives pocket money — the pig alerts the child using lights and by pointing its ears up.</p>
<p>In the video above, the pig is connected to a dummy account, with parents using a prototype app. But I also connected the Pig to my Monzo account. As well as providing real transactional events, the data this provides means that it can then be queried, as I’ll explain next.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F232725445&amp;url=https%3A%2F%2Fvimeo.com%2F232725445&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F653866483_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1080" frameborder="0"><a href="https://medium.com/media/218fab502f81a42924ac7cc7aee2bc4c/href">https://medium.com/media/218fab502f81a42924ac7cc7aee2bc4c/href</a></iframe></p>
<h4>Ask questions</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F232721871&amp;url=https%3A%2F%2Fvimeo.com%2F232721871&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F653858897_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1080" frameborder="0"><a href="https://medium.com/media/30ae8c0f1eae8c67b5792b5d1bd6109b/href">https://medium.com/media/30ae8c0f1eae8c67b5792b5d1bd6109b/href</a></iframe></p>
<p>Version 1 of the Pig provided the same information whenever it was shaken (saving, spending and balance). Version 2 makes the conversation two-sided. You can ask it questions like:</p>
<blockquote><p>“How much money do I have?”</p></blockquote>
<blockquote><p>“How much have I spent this week?”</p></blockquote>
<blockquote><p>“How much did I save last month?”</p></blockquote>
<p>Natural language understanding means you don’t have to use those exact phrases, so you might say <em>“What’s my balance”</em> or <em>“How much have I saved”</em>. Being able to query finances in your own language means you can get the information you care about, in a more human way. This hopefully makes finances much more accessible for children.</p>
<h4>Set goals and track them</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F232749835&amp;url=https%3A%2F%2Fvimeo.com%2F232749835&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F653947649_1280.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="1920" height="1080" frameborder="0"><a href="https://medium.com/media/a9e42ab37a1d9e8a57378202624170d9/href">https://medium.com/media/a9e42ab37a1d9e8a57378202624170d9/href</a></iframe></p>
<p>The new Pig allows you to set a savings goal:</p>
<blockquote><p>“I want to save for a bike”.</p></blockquote>
<p>You can then track that goal:</p>
<blockquote><p>“How much more do I need to save?”.</p></blockquote>
<p>The pig verbally tells you how you’re progressing and you also get feedback through lights and the rotation of the pigs ears.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DbbT86K9jcLe_ZUfWDEiLg.jpeg">How progress towards a savings goal is communicated visually.</p>
<p>In fact the ears don’t just indicate progress when you ask the pig. Whenever it is inactive the rotation of the ears provides a glanceable overview of how close to your goal you are.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/600/1*ykPXxyGBzLMN2vlIy691Mw.gif">The Pig’s ears provide a glanceable view of your progress towards a savings goal, from anywhere in the room.</p>
<p>In <a href="https://www.amazon.co.uk/Enchanted-Objects-Innovation-Design-Technology/dp/1476725640/ref=tmm_pap_swatch_0?_encoding=UTF8&amp;qid=&amp;sr=">Enchanted Objects</a> David Rose discusses ‘glanceability’ and how the brain can process information before you fully pay attention to it. This is something cognitive scientists call <a href="https://en.wikipedia.org/wiki/Pre-attentive_processing">pre-attentive processing</a>. He argues that because glanceable objects are “delightfully non-distracting” they are more likely to be viewed instinctively throughout the day and this can lead to behaviour change. He provides examples from energy monitoring, but perhaps a glanceable view of finances might encourage children to save?</p>
<h3>A few learnings</h3>
<h4>1. The value of a dedicated device</h4>
<p>Using a dedicated device as a service channel provides a number of advantages that aren’t possible with something like Amazon Echo. You can:</p>
<ul>
<li>Include custom <strong>functionality</strong> — like alerts.</li>
<li>Create more <strong>personality</strong> through form, light and mechanical movement.</li>
<li>Provide <strong>glanceable</strong> information (as discussed above).</li>
<li><strong>Remind people</strong> about your service to encourage interaction. This is related to Donald Norman’s idea of “information in the world” in <a href="https://www.amazon.co.uk/Design-Everyday-Things-revised-expanded/dp/0262525674/ref=sr_1_1?s=books&amp;ie=UTF8&amp;qid=1504772385&amp;sr=1-1&amp;keywords=design+of+everyday+things">The Design of Everyday Things</a>. If your service is hidden inside an echo people have to remember themselves that they can access it — the knowledge is “in their head” instead.</li>
<li>Enable a potentially more <strong>natural interaction</strong>: There is a specific physical representation of the service and it becomes anthropomorphised. Conversing with it then feels less <em>anonymous</em> than speaking to a generic black cylinder.</li>
</ul>
<p>As it becomes cheaper to embed voice processing into products, maybe we’ll start to see the <em>Internet of Conversational Things</em>!</p>
<h4>2. Design for mistakes</h4>
<p>Designing for voice (rather than screens) means you have to focus much more on errors — people can say anything and they can also be misheard.</p>
<p>There are a few strategies to deal with this. I used a mixture of enabling <strong>undo</strong> (if there is a change to the system), <strong>doing nothing</strong> (for queries), and <strong>upfront confirmation</strong> (if there is high chance of being misheard). If using confirmations, I tried to group them together so they didn’t get annoying.</p>
<p>I used <a href="https://api.ai/">api.ai</a> to handle the logic around errors, but to help me figure out how these strategies should work, I had to crack open omnigraffle and map out the flows. This also helped me to check all errors had been catered for.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*u6od-aPTYTW2Raq7T65Fhw.png">Using Omnigraffle to map out error flows.</p>
<h4>3. Communicate state</h4>
<p>A voice system by itself doesn’t provide any feedback on what’s happening (aside from when it’s talking): is it listening? is it thinking? has it finished talking? This makes it hard to converse with and is even more apparent if it takes a while for the cloud services to respond.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/600/1*vD-gaebWzt9M7KgAl1cyjQ.gif">Listening state<img alt="" src="https://cdn-images-1.medium.com/max/600/1*G_vDQAhXLoxOGZOLL9Yb2w.gif">Processing speech state</p>
<p>Amazon Echo and Google Home have a set of additional noises and light patterns to provide cues as to what’s happening. I developed my own set of cues using light and also the movement of the ears.</p>
<h4><em>Voice</em> is great at uncovering user needs</h4>
<p>Once I had finished my prototype I tested it out with my 4 yr old son (younger than my target users). He tried out the things I showed him it could do, but then he said <em>“How much do I need to save to go camping?”</em>. It surprised me. I hadn’t considered that when setting a savings goal, kids might not have an idea of what something costs and I definitely didn’t consider that the goal might not be a single specific <em>thing</em> with a fixed cost, but an <em>activity</em> made up of multiple, variable costs.</p>
<p>Designing in this functionality is an interesting challenge, and I’m thinking of ways to at least handle it gracefully even if a proper answer can’t be provided. However, the story illustrates an interesting characteristic of voice interfaces. They don’t offer users clear boundaries as to what they can do — there’s a lack of affordances. This means users can ask for what they <em>really</em> want, rather than being limited by the buttons on a screen.</p>
<p>So voice interfaces may provide a fast-track to understanding customer needs. But someone needs to listen to these requests and the technology needs to log what customers are asking for, so that this can be analysed and acted upon.</p>
<h3>A note on open banking</h3>
<p>The Pig is connected to a real banking service — Monzo, using <a href="https://developers.monzo.com/">their API</a>. <a href="https://en.wikipedia.org/wiki/Payment_Services_Directive">PSD2</a> will enable third parties to use similar ‘Open’ APIs to build applications and services around all financial institutions. This means the Pig could in theory be connected to any bank account in the future.</p>
<p>I think this hints at a different kind of opportunity for what PSD2 can enable. Rather than omniscient dashboards that aggregate your financial world, maybe we will see very niche banking services?</p>
<p>It is unlikely that anyone is going to set up a bank just to create a service helping children save money, but instead they could ‘piggy-back’ (sorry!) on existing banking infrastructure. In this scenario banking becomes simplified and focussed for key audiences and use cases. What other niche audiences and needs are there that small, specific and simple banking services could be created for?</p>
<h3>Thanks for reading</h3>
<p>As with the previous article, it would be great to hear your thoughts, questions, suggestions. You can find me here or on Twitter @stuarttayler1.</p>
<h3>Post script: the tech stuff</h3>
<h4>Hardware</h4>
<p>The heart of the device is a Raspberry Pi Zero W. The sound input comes from a USB mic and it’s output using and Adafruit amp connected to a small speaker.</p>
<p>The Pi talks to an <a href="https://www.adafruit.com/product/2010">Adafruit Trinket</a> over I2C. The trinket controls some Adafruit NeoPixels and a servo motor. It also listens to the button presses.</p>
<h4>Services</h4>
<p>I used a variety of services to enable the conversational interaction:</p>
<ul>
<li><a href="https://cloud.google.com/speech/">Google Cloud Speech</a> API to recognise speech.</li>
<li><a href="https://api.ai/">Api.ai</a> to process the speech and handle most of the logic.</li>
<li><a href="https://aws.amazon.com/polly/">Amazon Polly</a> for speech synthesis.</li>
</ul>
<p>There is a Node.js app running on the Pi which calls the various services above, handles additional logic and also manages calling the <a href="https://developers.monzo.com/">Monzo API</a>. I also have a Node.js app running in the cloud which listens to API calls from the Pig, handles events and manages a user database.</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=620555b1479d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/pig-2-620555b1479d">🐖 An IoT Piggy Bank you can talk to</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


An IoT Piggy Bank you can talk to

An IoT Piggy Bank you can talk to

Top Stories