<p>Published on <a href="https://blog.prototypr.io/5-hour-prototype-challenge-bbc-iplayer-radio-app-using-origami-studio-c7c6702c12e6?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Chris Jacobs </p>
<h3>5 hour Prototype Challenge: BBC iPlayer Radio App using Origami Studio</h3>
<h4>Focus area: the station selector wheel</h4>
<p><em>In this series for </em><a href="https://blog.prototypr.io"><em>Prototypr</em></a><em> I will be prototyping interesting interactions from my favourite apps and some client projects, using </em><a href="https://origami.design"><em>Origami Studio</em></a><em>. I will be focussing on one unique, challenging concept in each app, to increase my knowledge of the tool and hopefully benefit the Origami community!</em></p>
<h3>Challenge #1: BBC iPlayer</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/320/1*Xz38-lQ5XBTYHmfvwOvNdQ.gif">BBC iPlayer Radio iOS app — home screen</p>
<pre><strong>Background:<br></strong>The <a href="https://www.google.co.uk/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwirsN_-i9LYAhVEJ8AKHeafCLYQFggpMAA&amp;url=https%3A%2F%2Fitunes.apple.com%2Fgb%2Fapp%2Fbbc-iplayer-radio%2Fid560458506%3Fmt%3D8&amp;usg=AOvVaw1jLXP9-Yp-gKMwDcJHRL-d">BBC iPlayer Radio app</a> is one of my most used apps. The home screen has a great spinning wheel to scroll through 20 BBC stations.</pre>
<pre>⭐️ <strong>Goal</strong>: Understand how to animate content on a circle using Origami's Cartesian coordinate system<br>🔎 <strong>Focus: </strong>Recreate the spinning station selector wheel<br>⏱ <strong>Time taken</strong>: 5 hours<br>🔧 <strong>Tool</strong>: Origami Studio<br><strong>🗂</strong> <strong>Files: </strong>Origami studio, Sketch and source files are available in <a href="https://www.dropbox.com/work/CJ%20Origami/medium%20prototypes/BBC%20iPlayer%20Radio%20spinner">this Dropbox folder</a></pre>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nC93jJzcxJCTUaiCTfgdpg.png"></p>
<h3>[ Step 1 ] Decide What to Make, and What to Fake</h3>
<p>For this Medium series, I will try to only prototype things I can learn from. Here’s my make/fake list:</p>
<h4>Make</h4>
<ul>
<li>Scroll wheel of icons</li>
<li>Hero image and text info for the selected station</li>
</ul>
<h4>Fake</h4>
<ul>
<li>Menu bar</li>
<li>Listen now bar</li>
<li>Currently listening bar</li>
</ul>
<p>The elements to <em>make</em> are displayed in red, the rest (black) will be <em>faked</em>:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*j3N7JPAvpX7vJvr984_g8A.jpeg">Elements to prototype in red</p>
<h3>[ Step 2 ] Creating a Basic Interface in Sketch</h3>
<h4>Device</h4>
<p>For this prototype I will be designing for iPhone 8 only. Future challenges will use <em>auto-layout style logic</em> to be responsive, but not today.</p>
<h4>Thought Process</h4>
<p>First, make sure I’m not reinventing the wheel:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/801/1*QGYLjabz8pMWvDa6h1K8DQ.png">Worth a try.</p>
<p>It’s a pretty simple design, but I will still use screenshots where possible to save time. Designing straight in Origami is ok, but Sketch is still far easier and copying from Sketch to Origami works great.</p>
<p>After 20 minutes I had created a sketch file for the app. There’s just one radio station icon, as I will be duplicating these in Origami. If I have time, I’ll create icons for each station, but for now we will be heavily promoting Radio 1.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/946/1*FYZRdyy-gZi7Id5tcoaXzQ.png">Design of the app in Sketch</p>
<h3>[ Step 3 ] Importing into Origami</h3>
<p>Copy and pasting the Sketch artboard almost worked perfectly. Sadly the spinner’s background oval (with a grey gradient) didn’t come across correctly. This was pretty simple to make in Origami:</p>
<ul>
<li>Create an <em>oval </em>layer</li>
<li>Set it as a mask</li>
<li>Apply the mask to a <em>fill</em> layer which has a gradient</li>
</ul>
<p>If I go over 5 hours by those 2 minutes, it’s not my fault.</p>
<h3>[ Step 4 ] The Spinner</h3>
<p>I setup a <em>loop builder</em> of 20 station icons (all using the Radio 1 icon for now). Positioning this looped content with staggered Cartesian coordinates, such as Icon 1 at (0,0), Icon 2 at (10,0), would be easy in Origami — however these icons are positioned in a circle.</p>
<h4>Point on a circle’s perimeter to Cartesian coordinates</h4>
<p>I needed to use trigonometry to calculate the Cartesian coordinates for a point on the perimeter of my spinner circle.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2-UdzNEV39k4q9J-ZlY2tA.jpeg">I need to calculate x and y to position my icons</p>
<p>The following simple equations will do the job:</p>
<pre>x = cos(θ)*r + x0<br>y = sin(θ)*r + y0</pre>
<pre>Where θ is angle around the circle,<br>r is circle radius,<br>(x0,y0) is the origin point if it's offset from (0,0). <br>This will help: <a href="https://en.wikipedia.org/wiki/Unit_circle">https://en.wikipedia.org/wiki/Unit_circle</a></pre>
<h4>Make it spin</h4>
<p>I have the radius of the spinner, so I just need an angle for each of the 20 stations. They’re equally spaced around the peremiter, so θ = (360 / 20 * <em>loop index).</em></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PAWddivDFp6P6Ki29uEsdw.png">A spinner of icons!</p>
<p>Ok, so now the spinner needs to spin, or in other words the icon angles need to be offset. My first attempt was to put the icons in a group and horizontally scroll that group. The scroll x value would then be added onto my original loop of angles at the start of the trig calculations:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8tFvp6bht8xm8KBgH1OC8Q.gif">The spinner is spinning! (Using a scroll group)</p>
<p>This was one of those short lived moments of celebration. It quickly dawned on me I’d taken one step forward on my to-do list, but added another 10 on to the end of it…</p>
<h4>Adding paging</h4>
<p>The scroll needs to be paged, so it actually stops moving when an icon is perfectly aligned in the top centre position. Right now it aggressively scrolls back to the original Radio 1.</p>
<p>At this point I got stuck, very stuck. I wasted nearly an hour trying to make the <em>scroll</em> patch flow nicely, only to realise it could only ever move one page at a time, no matter how far I moved the spinner round. This is a limitation of the <em>scroll</em> patch. (e.g. a quick spin to the right from icon 1 to 10 would just jump back to icon 2 😞).</p>
<p><strong>Change of plan — Use the <em>drag</em> patch with rounding<br /></strong>In the end I used the much simpler <em>drag</em> patch. This was great, but the patch offers no paging. I needed to round the<em> drag</em> position output to the nearest page size (my page = 360 / 20 = 18). I now have smooth, paged circular spinner!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/986/1*Eeh_AXGbGPqTSrXmxA4H6A.png">Patches used to convert dragging the spinner group into an angle offset. <em>Pop animation</em> smoothes the rounding.</p>
<h3>[ Step 5 ] Real data loops</h3>
<p>I was getting a bit tired of only listening to Radio 1. Despite being conscious to only focus on the unique challenges (looping images certainly isn’t one), it was becoming difficult to test how well the spinner was working when all the icons were identical.</p>
<p>Luckily the BBC website had all the hero images and SVG icons on one page: <a href="http://www.bbc.co.uk/radio#stations">http://www.bbc.co.uk/radio#stations</a> 😅</p>
<p>The decision instantly paid off, too. I noticed that my trigonometry positioned station #1 at 3 o’clock on my spinner, instead of 12 o’clock. Surprisingly I didn’t notice this with 20 identical icons.</p>
<h4>A working version</h4>
<p>Below is a screenshot from the end of day 2, a working spinner with real icons. The hero image horizontal scroller is present, but not hooked up to move just yet.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eA8tmc05AKJ2iP60_mSKrw.png">End of day 2. A correctly aligned spinner, with the full set of stations.</p>
<h3>[ Step 6 ] — Determine the Selected Station</h3>
<p>To update the hero image and the station info text, I needed to know which station the user selected, aka which icon was at the top of the spinner, aka which icon was in position = (0, -247).</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/430/1*SJ5cLiUjIxrOF7drTK7xHQ.png">3 patches to determine current station</p>
<h3>[ Step 7 ] Animate Data Based on Selected Station</h3>
<p>With this new knowledge I can animate the hero image <em>scroll</em> patch to ‘jump to’ the correct position when the selected station changes. I also linked the selected station loop to an opacity transition for my station info text.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*r3H7AjUrn1TYcFIY9RAgfw.gif">Patches to change hero and station info text when spinner moves</p>
<h3>[ Step 8 ] Little Visual Touches</h3>
<p>I had 15 minutes left, so I decided to pick two small items from my task list:</p>
<ul>
<li>Grow the selected station icon.</li>
<li>Desaturate de-selected station icons.</li>
</ul>
<p>Making the icon grow was simple: attach the ‘selected station’ loop to a <em>pop animation</em> and <em>transition</em> — which were then linked to the icon <em>scale</em> value.</p>
<p>Changing image saturation isn’t supported in Origami, however you can use a blur component to desaturate anything in the same group.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FX1cORXBn80jGh91pOJMrw.png"></p>
<h3>5 hours is up! ⌛️</h3>
<p>The gif below shows the prototype is pretty much done if you use the spinner to choose station, however the hero can still be scrolled independently of the spinner.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/360/1*KCIuxXYZGUuqcr9levS9Sw.gif">Done! 4hr 53min</p>
<p>I did try to start work on syncing the spinner <em>drag</em> and hero <em>scroll</em>, I even created my own modified <em>drag</em> patch with a ‘jump to’ feature. Unfortunately there was too much of a recursive relationship between spinner and hero in my initial logic, so a full refactor would be needed (aka no longer a simple, lean prototype).</p>
<p>Fortunately swiping a hero carousel is quite a common interaction (unlike the spinner), so for user testing sake I think this prototype would be sufficient. I would just keep an eye for users trying to swipe the hero to see if it’s even worth adding in development.</p>
<h3>If I had one more hour… 🤔</h3>
<p>I’m pretty happy with the limitations of this prototype, however I would love to work out how to sync the scrolling hero with the spinner — for my own learning.</p>
<p>Oh and I would tidy up (and speed up) the Origami Studio file with grouped components. Luckily the performance was fine for this prototype.</p>
<h3>Lessons learnt 🎓</h3>
<ul>
<li>See if the <em>drag</em> patch can help with a difficult <em>scroll</em> patch problem, before wasting an hour.</li>
<li>Limit the amount of fields using looped data, but use<strong> full</strong> datasets for those fields right from the start.</li>
</ul>
<p><strong>Files 🗂:</strong> If you would like to open up and explore the Origami Studio file, <a href="https://www.dropbox.com/sh/4v2d1tyc59uflh2/AACP5pcRWQuiKY7d01BDSuk0a?dl=0">all the files are in a Dropbox folder</a>. Why not see if you can crack the synced hero and spinner problem 🤓</p>
<p><strong>Thank you 🙏:</strong> As always, to the <a href="https://www.facebook.com/groups/origami.community/">Origami Community</a> for help on tricky problems. In particular Peter Ryan Zich who helped a lot with the scroll/drag patch issue and Ryan Yoshinobu Barkataki who suggested the desaturation solution.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=c7c6702c12e6" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/5-hour-prototype-challenge-bbc-iplayer-radio-app-using-origami-studio-c7c6702c12e6">5 hour Prototype Challenge: BBC iPlayer Radio app using Origami Studio</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>


5 hour Prototype Challenge: BBC iPlayer Radio app using Origami Studio

5 hour Prototype Challenge: BBC iPlayer Radio App using Origami Studio

Focus area: the station selector wheel

Top Stories