<p>Published on <a href="https://blog.prototypr.io/unclogging-facebook-groups-suggested-posts-to-answer-frequent-questions-30081bf7d?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Chris Jacobs </p>
<h4>5 hour prototype challenge in Origami Studio</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 and concepts using </em><a href="https://origami.design"><em>Origami Studio</em></a><em>, to show the UX community what can be achieved in Origami Studio with a realistic (aka limited) amount of time and skill!</em></p>
<h3>Challenge #2: Design and prototype a way to display suggested posts when a user starts asking a community group for help.</h3>
<pre><strong>Background:<br></strong>The Origami Studio community group on Facebook is great. It's friendly, quick to respond and full of clever solutions to tricky problems. </pre>
<pre>Unfortunately, as with all groups on Facebook, the feed often gets clogged up with the same old questions.</pre>
<pre>⭐️ <strong>Goal</strong>: Prototype a way to display suggested posts, based on what the user types.<br>🔎 <strong>Focus: </strong>Recreate the dynamic text input on Facebook posts. Add a suggested post carousel &amp; preview.<br>⏱ <strong>Time taken</strong>: 4 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/sh/0fmxo4acdkrn405/AAC2MO-PUFrbMiXc0O2S9vxDa?dl=0">this Dropbox folder</a></pre>
<p>My starting point is the<em> Write Post</em> screen in a Facebook group:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/672/1*s2rkpQB88HEX8rNrBeoAGQ.png">How can this screen make finding answers easier?<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nC93jJzcxJCTUaiCTfgdpg.png"></p>
<h3>[ Step 1 ] Come up with a solution!</h3>
<p>I’m planning on prototyping interactions from existing apps in this series. However this is something entirely new, so I’ve allocated 1 of my 5 hours to design a solution. I started by quickly sketching out 4 ideas in 4 minutes.</p>
<h4><strong>Initial sketches</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*eAKGKfeQ2Fn34EvlZdeEvQ.jpeg">4 quick sketches for simple solutions</p>
<p><strong>I decided to go with option 2 because:</strong></p>
<ul>
<li>More post detail helps a user know whether the suggestions are actually relevant. E.g. lots of comments is a good sign!</li>
<li>It’s not too disruptive to the posting journey (no extra steps like option 4).</li>
<li>Horizontal scrolling the list of relevant posts theoretically allows unlimited results to be returned within the existing <em>Write Post</em> overlay’s container.</li>
</ul>
<p><strong>UPDATE:</strong> I later discovered the ‘Suggested groups’ feature which is in keeping with this design approach. So that’s good!</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/910/1*FjAD3jq3mEiEle8nHe4_hg.png">Similar existing feature: Suggested groups scroller on Facebook groups</p>
<h3>Decide What to Make, and What to Fake</h3>
<h4>Make</h4>
<ul>
<li>Text input animation (varying text size to fit in longer messages).</li>
<li>Horizontal scroller of suggested posts previews.</li>
<li>Displaying an overlay when a suggested post preview is selected.</li>
</ul>
<h4>Fake</h4>
<ul>
<li>The suggested posts will not change depending on the inputted post content.</li>
<li>The suggested post previews will all be the same.</li>
<li>The suggested post overlays and associated comments will all be the same.</li>
<li>Nothing will happen once you submit / cancel the post. The prototype will just reset.</li>
</ul>
<h3>[ Step 2 ] Creating the UI in Sketch</h3>
<p>With the remaining 45 minutes out of the hour allocated to design, I created the main page UI elements. I did this in Sketch, using various screenshots and this free Sketch resource: <a href="https://tinyurl.com/y6wb4ml7">https://tinyurl.com/y6wb4ml7</a>.</p>
<h4><strong>Device choice</strong></h4>
<p>This feature is aimed at Origami Studio users searching the group for help while they’re building a prototype, so <strong>desktop browser</strong> is the obvious choice.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GSD_nRH4DftBJXHsUTYRDw.png">4 page templates created in Sketch</p>
<h3>[ Step 3 ] Importing into Origami</h3>
<p>Everything copied over nicely from Sketch. Some layers are displaying when they shouldn’t be, but that will be controlled with Origami Studio logic soon.</p>
<p>I decided to move all the post overlay elements into their own screen component, to simplify displaying it.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_6boF_gtk0jo5_uZaGfMew.png">Initial preview and layer list</p>
<h3>[ Step 4 ] — The ‘Write something’ text box</h3>
<p>The text field on Facebook.com has the following behaviour:</p>
<ul>
<li>Clicking on the text field focusses the screen (dark background and larger text entry area)</li>
<li>Text size is large until 2 lines of text is entered, then it becomes smaller</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/640/1*Itp98KydSdQ0YsYTmFyj8g.gif">Text entry animation to recreate (screen recording from Facebook.com)</p>
<p><strong>Activating the text field</strong> was simple enough. I had to create a custom version of the <em>iOS Text Field </em>component, so I could have my text vertically aligned to the top (rather than centre). Feel free to take that from the Origami file 🎁.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZXDSx3lHEMdoZGVqEpP1ig.png"></p>
<p><strong>Exiting the text field </strong>almost required as many patches to cover all scenarios (clicking the close icon, post CTA and outside the modal). But at least it’s thorough. See <em>Lessons Learnt</em> for more on that!</p>
<p><strong>Changing the text size </strong>was based on how much height the text used. I used a simple pop animation and transition to make it look right.</p>
<h3>[ Step 5] — Displaying suggestions</h3>
<p>As enjoyable as steps 1–4 were, the point of this exercise is to prototype a new feature to <a href="https://medium.com/u/5aad0942f068">Facebook Design</a>. For simplicty, the suggestions will appear after a character limit is reached <strong>and </strong>the text size reduction has happened. I will need to be careful to only write trigger keywords after this point — to make the appearence of suggestions look smart.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zWBLvu0bGSJ9Jqh3heovwQ.gif">Text size change and suggested posts displayed.</p>
<p>Almost there, but deleting text doesn’t switch off suggested posts. I need to add a pulse patch to my ‘Show suggestions’ receiver, like this:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/529/1*XHlygPQpYi8YuLEWuvWe1Q.png">‘Pulse’ and ‘Or’ patches allow switching back on an Option Switch</p>
<h3>[ Step 6 ] — Looping the suggested posts</h3>
<p>As stated in <em>Deciding what to make and what to fake</em>, I will have a loop of identical posts. These need to be horizontally scrollable with paging and reset to the far left item each time they are displayed.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*w1oGqz_nFofvhq37q9Fdcw.gif">Scrollable posts that always load in far left position 🙌</p>
<h3>[ Step 7 ] — The post preview screen</h3>
<p>All of my identical posts open an identical overlay (😅). So I used the <em>Any</em> patch to present my overlay screen and I dismiss it when a user taps anywhere off the post preview layer.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nMDmB1Wsn0uyepl5BGSQbQ.gif">Opening and closing the post preview overlay<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FX1cORXBn80jGh91pOJMrw.png"></p>
<h3>5 hours is up! ⌛️</h3>
<p>Here is the full experience:</p>
<ol>
<li>A user starts typing a <strong>very </strong>common question on the Origami support group.</li>
<li>As they type some older posts are suggested to them and they can review them to check if their problem has been answered.</li>
<li>After finding their answer they can cancel their post (or post anyway if not).</li>
</ol>
<p>Now a user will get their answer in under 30 seconds, instead of hours or days. Also, the patient Origami Studio team don’t have to answer this question for the 1000th time this year — so they can focus on adding few features 😉.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/836/1*RBqdnV1zOBXk1Me0_zjIpg.gif">Final prototype ✅</p>
<h3>If I had one more hour… 🤔</h3>
<p>It would be nice to allow the user to like and maybe even comment on the suggested post to show appreciation for the answer (and show how the feature will increase engagement, to encourage <a href="https://medium.com/u/5aad0942f068">Facebook Design</a> to prioritise it!).</p>
<p>As always, a bit of variety in the scroller data wouldn’t hurt. Feeding this through to the preview would be a great touch as well.</p>
<h3>Lessons learnt 🎓</h3>
<ul>
<li>Something simple like resetting the screen using tap interactions can end up being very time consuming when there are lots of different layers. Either allow time for this, or just limit prototypes to using close icons rather than listening for taps outside overlays.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/436/1*idSqtzSJAMfcl5HVCuQQEw.png">All the patches used for resetting the screen (note two wireless receivers linked to even more patches!)</p>
<ul>
<li>Write some nice example text ready to paste to speed up testing and demo gifs!</li>
</ul>
<p><strong>HELP NEEDED: </strong>I really wanted to find a way to paste text as if I was typing for my gifs. I know KeePass can do it, but couldn’t get it to work on Origami Studio viewer. If anyone knows a way of pasting text as if typing, that would be awesome! 🙏</p>
<p><strong>Files 🗂:</strong> If you would like to open up and explore the Origami Studio and Sketch files, <a href="https://www.dropbox.com/sh/0fmxo4acdkrn405/AAC2MO-PUFrbMiXc0O2S9vxDa?dl=0">head over to this Dropbox folder</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/576/1*aJdluPzPOmOL-lvCXqD2xw.png"><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=30081bf7d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/unclogging-facebook-groups-suggested-posts-to-answer-frequent-questions-30081bf7d">Decluttering Facebook groups: Suggested posts to answer frequent questions</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>


Decluttering Facebook groups: Suggested posts to answer frequent questions

5 hour prototype challenge in Origami Studio

Top Stories