<p>Published on <a href="https://blog.prototypr.io/pluvia-making-plant-care-easier-6b316f054302?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Max Cameron-Taylor </p>
<h4>UX Design Case Study</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zERq9y37-j24LBIqs9YeeQ.png"></p>
<h3>Overview</h3>
<p>This project was a quick, 4 day sprint with the aim of discovering a specific problem in the daily life of a single user, and then designing a conceptual digital product to solve that problem, for that user.</p>
<p>My user was <strong>Karolina</strong>: a young graphic designer who had just moved to London from Warsaw.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PLIp4XlRQKctZpNdWvLI8A.png"></p>
<h3>User Research</h3>
<p>The first stage of the process was to conduct a series of increasingly focused interviews in order to first understand our user and common problems that they experience in their life, and then gain actionable insight on a specific topic.</p>
<p>This required asking broad questions to ‘cast the net wide’ and encourage our user to open up about frustrations they experience in their daily routine.</p>
<blockquote><p>From this process I was able to learn that Karolina enjoys keeping plants but has some difficulty looking after them properly.</p></blockquote>
<p>I used specific questions to then lead a discussion with the aim to fully understand my user’s approach to this topic and to extract actionable information to assist me in designing the most appropriate solution in order to address their needs. <br />The WWWWWH (Where, Why, When, What, Who, How) framework assisted me in constructing questions that would gain the most valuable insight from my user.</p>
<p>In order to have a visual overview of my user research I charted my findings on a concept map documenting the key themes from our discussion of why she keeps plants, how she goes about it and what frustrates her about it.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CFyqfY3ppo12bMkpQ72Bwg.png">Concept map</p>
<p>This process helped me to clarify exactly what the problem I was designing for was, as well as what I hoped to achieve:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WwHsaC8erlWY5aYc3RaUhQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OVlUrET5tHaIri4rkYxVeA.png"></p>
<h3>Initial Designs</h3>
<p>My first sketches explored the ideas I had about how to gather the required information about my user’s plant collection and then display each individual plant’s current status.</p>
<p>The first iteration was based around an overview page of photographic icons depicting each plant, with the time until the next required watering overlaid on top. <br />From here users would be able to tap on an individual plant to see detailed information on watering schedule, nutrient or fertiliser requirements, sunlight requirements, re-potting preferences and other information specific to that plant type.</p>
<p><strong>This quickly became, cumbersome, confusing, and complicated.</strong></p>
<blockquote><p>It included the information that the user wanted to know — but was it really achieving the user’s goal?</p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZBlv3CIDASSSlf8rtgvSKQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iUzJ__ZiFq78HRiCX1Vozg.png"></p>
<h3>Focusing on the essentials</h3>
<p>By taking a step back to revisit my user research and synthesise the data I was able to focus on the user’s core need of being able to simply track when she needs to water her plants.</p>
<p>I went through a process of drawing out several iterations of user flows in order to analyse how the user would move through the app, and <strong>stripped the process down to a simple, happy path</strong> to improve usability and achieve the user’s goal.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0JJWLh5RUsf22DG10gLyUA.png">Stripping the user flow back to a simple, happy path</p>
<p>From this I settled on two main requirements for a minimum viable project:</p>
<blockquote><p><strong>1. Allow the user to add plants to the app</strong></p></blockquote>
<blockquote><p><strong>2. Notify the user when they need watering.</strong></p></blockquote>
<p>The user flows gave me a structure from which to construct the necessary individual screens for the app and ensure that the process had a clear continuity. I took these wireframe sketches and turned them into paper prototypes to gather some initial feedback from the user on the usability of the app.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BO2r8RC-DUnAB7VEBV9oZw.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*jLfEWc0XGqAAiFNczbSr3A.png">Sketch wireflows</p>
<p>I adapted my sketches to provide a more visual experience within the app, with the aim of making the information more immediately accessible to the user and the product more enjoyable to use.</p>
<p>I experimented with the use of colour to communicate at a glance how long until a plant needs watering, and if a plant is overdue a drink.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Q1SiTj-LffaORvAw94lBEw.png">Adding visual interest to the sketches</p>
<h3>Testing &amp; Iterating</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aEqvlFCMiAEfyQuhj91XMg.jpeg">Creating paper prototypes</p>
<p>Through the testing process I learned three main points:</p>
<blockquote><p><strong>1. the user became confused about what the app wanted from them</strong></p></blockquote>
<blockquote><p><strong>2. the user wondered why they were needing to enter certain information</strong></p></blockquote>
<blockquote><p><strong>3. the user didn&#8217;t fully understand how to progress through the app.</strong></p></blockquote>
<p>The current design was causing them to have make several assumptions about what they should be doing and as a result the user experience was negatively impacted.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/528/1*mHResF4_pvHBCbLhYuUNqA.jpeg">Clickable prototype testing with Karolina</p>
<p>In response to this feedback I introduced an <strong>instructional interface</strong> that would <strong>enhance clarity and keep the user on track to their goal</strong>, while ensuring that they know what to do at each screen.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iBOOVnMkVoI2het0StSOEg.png"></p>
<p>Further user testing with a clickable prototype positively reinforced my assumptions, with the user responding immediately to the on-screen prompts and being able to interact with the product without reaching any pain points or resorting to trial and error.</p>
<h3>Final Prototype</h3>
<p>The screen flow below shows the final prototype design for this sprint:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-2cDJm6Q9-iNddoubfiNrQ.jpeg"></p>
<h3>Next Steps</h3>
<p>Given more time on this project, I would like to reintroduce some of the more advanced features showing information that the user suggested they would find useful:</p>
<ul>
<li><strong>Drainage/ watering technique requirements</strong><br /> -Repotting schedule<br /> -Ideal sunlight exposure</li>
</ul>
<p>Other features I would like to include are:</p>
<ul>
<li><strong>Help the user become more aware of the calendar feature through prompting.</strong></li>
<li><strong>Allow for more than one plant to be added at once.</strong></li>
<li><strong>Make the process of watering the plant and resetting the timer more clear.</strong></li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PLIp4XlRQKctZpNdWvLI8A.png"></p>
<h3>Visual Design</h3>
<h4>Click <a href="https://medium.com/@maxjct/pluvia-visual-design-cd94623ceb09">here</a> or on the image below to also read about how I approached the visual design of the app interface!</h4>
<p><a href="https://medium.com/@maxjct/pluvia-visual-design-cd94623ceb09"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0yTo4rhxuSb3lhHrEf_GGg.png"></a><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PLIp4XlRQKctZpNdWvLI8A.png"></p>
<h3>Thanks for reading!</h3>
<p>If you’d like to get in touch or find out more about me, please use one of the links below:</p>
<h4><a href="mailto:maxjct@gmail.com">Email</a> // <a href="https://www.linkedin.com/in/max-camerontaylor/">LinkedIn</a> // <a href="http://www.maxcamerontaylor.com">Portfolio</a></h4>
<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=6b316f054302" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/pluvia-making-plant-care-easier-6b316f054302">pluvia: Making plant care easier</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>


pluvia: Making plant care easier

UX Design Case Study

Overview

Top Stories