<p>Published on <a href="http://ift.tt/2oelbAg">| Prototyping: From UX to Front End &mdash; Medium</a> Spencer Ash </p>
<p>UX/UI Case Study (or a case study on how to turn RFID/NFC field service technology into an engaging and interactive product)</p>
<p><img alt="" src="http://ift.tt/2nuHODh"></p>
<p><a href="https://www.kugadi.com/">Kugadi</a> is a mobile workforce management platform that allows managers to track their employees — helping them cut costs by reducing the amount of time and people it takes to manage employees by facilitating efficient reporting, and improving customer service by keeping track of employees and making them accountable for their tasks. They build software that helps manage these types of things in the security industry and have noticed similar difficulties for managers within custodial field services.</p>
<p><strong>Seeking innovative ways to solve this, Kugadi initiated a design challenge and the team at </strong><a href="http://ift.tt/2nuaaO7"><strong>Lux Interaction</strong></a><strong> stepped up to the plate (as they tend to do).</strong></p>
<h3>The Challenge (#ChallengeAccepted)</h3>
<p>Up to now, managing workforces of employees such as janitors or security guards poses a great headache for employers, since it is challenging to keep track of where employees are at any given time. Because of this, companies have to staff supervisors at every location, which creates significant overhead.</p>
<p>Additionally, there is no streamlined process to gather data on the workforce’s shifts, arrival and departure times, hours worked, tasks completed, and issues reported. There is also a lack of communication between the employees and managers, so a lot of tasks go undone, which creates customer service issues.</p>
<p>In seeking to address this problem within the Janitorial Service industry, Kugadi (a mobile workforce management) initiated a design challenge — where the company asked User Experience and Product Designers to create an innovative product that would allow managers to know where roving employees are at any given time and to verify if they are doing their job correctly.</p>
<p>The application (a mobile app build for the Android Platform) would allow for one remote manager to supervise multiple locations at a time, communicate with the janitors to make sure tasks are completed, provide site specific tasks and instructions, and ensure that any issues that arise during an employee’s shift are taken care of right away.The Vision</p>
<h3>Challenge Criteria</h3>
<h4>Project Timeline:</h4>
<p>Start Date: March 24, 2017</p>
<p>End Date: April 7, 2017</p>
<h4>Project Specifications:</h4>
<ul>
<li>Native Android app for use by a commercial cleaning company.</li>
<li>The app will be used by cleaners to manage and report their daily activities.</li>
<li>The aim is to empower the cleaners to work more efficiently and have an accurate record of their work at the end of the day through an auto-generated report.</li>
</ul>
<p><img alt="" src="http://ift.tt/2oVDmKI">We designed this product for the Android Platform due to the technical restraints of RFID and NFC technology in mobile devices.</p>
<h4><strong>Required Features:</strong></h4>
<ul>
<li>Accurate Time and Attendance. In order to pay the cleaners, it is vital to know exactly when they started and stopped their shift. It is also important to keep track of the breaks they take as it is a legal requirement for them to take a certain amount of breaks during the day.</li>
<li>Accurate records of buildings and floors serviced.</li>
<li>Allow cleaners to report things they cannot deal with. For example: Graffiti sprayed on a wall or a broken light.</li>
<li>Be able to communicate with a supervisor remotely. To get instructions or have realtime-time conversations.</li>
</ul>
<h4><strong>Limitations:</strong></h4>
<p>Operating system: Currently, iOS does not have RFID technology open to app developers (it only works with Apple Pay), so <em>the app must be built for Android.</em></p>
<h3>Research</h3>
<h4>Industrial and Ecological Review (what we found out there)</h4>
<p>The Janitorial Service industry can be segmented into three primary areas where janitorial enterprises are engaged in the cleaning of residential buildings (homes, apartments, and condominiums), commercial facilities (factories, municipal structures, businesses, retail outlets, educational and healthcare.), and specialty areas. These activities are primarily contract services and the commercial service area — particularly in education and healthcare represents the biggest growth area within this industry. General cleaning services were estimated to have generated approximately $51 billion in revenue in 2015.</p>
<p>There is a high level of competition with approximately 829,522+ companies operating in the Janitorial Service industry as of 2015. Typical contracts lasting for one year and companies bid on contracts which makes price-based competition important for this industry.</p>
<blockquote><p><strong>“good work goes unnoticed for years, but a bad job gets you fired immediately”</strong></p></blockquote>
<p>Low barriers to entry and increasing competition within the Janitorial Service industry means that there are many small services competing for commercial and residential contracts. Rapid turnover within this industry is not uncommon with estimates of cleaning companies losing up to 55% of their customer base each year to to actualized or perceived poor service.</p>
<h4>Competitive Analysis</h4>
<p><img alt="" src="http://ift.tt/2nux7Au">A solid way to make sense of a messy industry (pun intended)</p>
<p>We conducted a competitive analysis to identify what products and features were already on the market addressing the needs identified by Kugadi. In doing this, we were able to look not only at what was out there but also what was working and what wasn’t.</p>
<p>We found that with it’s existing management systems Kugadi is uniquely positioned to enter the Janitorial Service industry by providing value to enterprises that are seeking to reduce their supervision overhead, increase their customer service capabilities and operational efficiency, through transparent reporting.</p>
<p>Kugadi just needed a design to make this happen.</p>
<h4>User Interviews</h4>
<p>To understand the individuals who would be using the Kugadi Clean Assist app, the Lux team interviewed several custodians in the building where the studio is. The following is a brief example of the types of questions asked and answers that were received.</p>
<p>Q — <em>“Como usted deja su patrón saber cuando los suministros de limpieza son bajos? (What is the process of reporting low cleaning supplies to your employer?”</em></p>
<p>A — “Currently we are required to either leave a note on the supervisor/front desk or leave a voicemail with the details of the low cleaning supplies.”</p>
<p>Q —<em> “Tiene que informar cuando haya terminado de limpiar una sección del edificio Building Co? ( Do you have to report or log when you complete your cleaning duties throughout the day/end of the day/etc. )”</em></p>
<p>A — “Yes, we write down by hand on a paper log when we complete the areas. We include the day and time, as well as our signature. This is only in certain areas though, like the bathroom.”</p>
<p>Q — <em>“Cómo funciona el proceso de sincronización dentro y fuera de building co.? Tiene que reportar sus descansos? How does the process of clocking in and out at building co work? Do you have to log your breaks?”</em></p>
<p>A — “We are given a 15 minute break every 3 hours of work. The break is at a specific time, each shift.”</p>
<p>Q — <em>“Tiene actualmente un sistema para reportar cualquier incidente que está fuera de sus control? Do you currently have a system in place to report any incidents that are out of your control?”</em></p>
<p>A — “We are told to call the supervisor/security at his cell-phone if there is ever an incident. Sometimes we are blamed for messes that we did not create. Or doors that were left unlocked that we had already finished in.”</p>
<h4>User Personas</h4>
<p>Creating user personas is one of the most important elements in our product development cycle. At the end of the day, we were designing for custodians, their supervisors, and the business owner — so we created fictional representations of these individuals to help guide our design process and address their pain-points and frustrations. Kugadi is a great company, but they are the product owner and not the end user — so to make a product that would be received by those who would ultimately be using this app, we had to design for them.</p>
<p><img alt="" src="http://ift.tt/2oVKeYQ"><img alt="" src="http://ift.tt/2nuDnsa"><img alt="" src="http://ift.tt/2oVJDWX">Synthesizing our user research into generalized user models (personas) to help inform and guide the design process — making sure that we stay focused on designing solutions for the users of the product (ie. creating solutions for what is needed without any extra fluff)</p>
<h4>User Journey Map</h4>
<p>Going hand-in-hand with our user personas, we distilled our research into the daily activities of the product’s users. To do this, we took the personas and deconstructed the user’s day in a visual format to identify where they experience challenges and pain-points (friction points) — and then used this to identify where we could implement the design solutions.</p>
<p><img alt="" src="http://ift.tt/2nuwuqZ">Turning our user’s experiences into a visual map to identify pain-points / challenges and figure out where our solutions can be implemented to improve that .</p>
<h4>Affinity Diagrams (used to identify patterns)</h4>
<p>Affinity diagrams were used in our research process to identify patterns in the data collected from user interviews, industry reports, and technological reviews. As designers, we like to put our research into a visual format and find that this helps us to sort all of our findings out. At Lux Interaction, we are probably responsible for single handedly keeping 3M (the Post-It note company) in business 🙂</p>
<p><img alt="" src="http://ift.tt/2oVWicj">We use these in our research to identify trends and patterns. As designers we tend to be highly visual.</p>
<h4><strong>Low-Fidelity Sketches</strong></h4>
<p>No explanation needed — but we’ll give one to you anyways. In our design process, we use low-fidelity sketches as our starting point for visual design. We find that this is the best way to illustrate the concepts that we are trying to build out and it is also a great way to explore many different ideas without significant time and resource investment. User testing is incorporated into our sketching process with paper prototyping and we are able to see what ideas have the potential to work and which ones don’t. We also simply enjoy the process of throwing a lot of ideas out there and this is one of the best ways to do it — iteration is the name of the game (and — the inner design child in all of us also likes to play with colorful pens).</p>
<p><img alt="" src="http://ift.tt/2nup5rs"><img alt="" src="http://ift.tt/2oVyOUS"><img alt="" src="http://ift.tt/2nux9s6"><img alt="" src="http://ift.tt/2oVQOyz"></p>
<h3>Information Architecture</h3>
<p>How would the Kugadi Clean Assist app be structured? Where would things be placed and what positioning would make the most logical sense? We use information architecture to figure all of this kind of stuff out and also to help us when designing the user-flows for how someone would complete tasks within the app.</p>
<h4>Site Map</h4>
<p>As designers, compare the role that we play in product development to that of architects in the construction of a building (hence the term information architecture). The site map is our blueprint for how a product (in this case, Kugadi Clean Assist) will be structured and provides the outline for how we will design (“build”) it.</p>
<p><img alt="" src="http://ift.tt/2nuA5oW">The site map is like a blueprint for an app or website.</p>
<h4>User Flow</h4>
<p>The user flow is the next progression in the Information Architecture phase of our product development cycle. Although the example below uses the high-fidelity screens from our design, it functions similar to our initial user-flows (which were functional, but ugly and we were a little embarrassed to show them off). We us user-flows to map out how a user will use a product — in this case, Kugadi Clean Assist — and also to make sure that the user is able to work through features through a logical progression.</p>
<p><img alt="" src="http://ift.tt/2oVG1UX">The user-flow from the point-of-view of a custodian. This is a representation of how someone will work their way through the app and use it’s functions.</p>
<h3>Visual Design</h3>
<h4>Branding &amp; Style Guides</h4>
<p>The branding and style guides helped t0 keep the design of app consistent — especially since we were working in teams to develop the user interface (ie. the visual components of the screens). These guides are also important for when we hand the final designs over to the development team (ie. the coders / programmers) as it will help communicate the individual elements of the design to them.</p>
<p><img alt="" src="http://ift.tt/2nuIcBE"><img alt="" src="http://ift.tt/2oVKfvS"></p>
<h4>High Fidelity Wireframes</h4>
<p>Selected samples of the high fidelity wireframes designed for the Kugadi Clean Assist App. You can see where the branding and style guides came into play here — as well as the the evolution of the design from the initial low-fidelity hand sketches.</p>
<p><img alt="" src="http://ift.tt/2nup7j4"><img alt="" src="http://ift.tt/2oVA3U5"><img alt="" src="http://ift.tt/2nuzjby"><img alt="" src="http://ift.tt/2oVKOpn"><img alt="" src="http://ift.tt/2nuwNSj">High-Fidelity Wireframes and Visual Mockups of the Kugadi Clean Assist App</p>
<h3>Interaction Design</h3>
<p>Interaction design — the creation of micro and macro animations was one of our favorite parts of creating the design for Kugadi Clean Assist. In creating these animations, we were not just thinking about “if a user taps this or does that, what will happen?” but also about how to add elements that would make using the app more enjoyable for the custodians. One of the elements that we are most proud of is the clearing of the task lists (bottom right animation) which creates a sense of pleasure when a task is marked as complete.</p>
<p><img alt="" src="http://ift.tt/2oVGmqz"><img alt="" src="http://ift.tt/2nuAfwr"><img alt="" src="http://ift.tt/2oVA4r7"><img alt="" src="http://ift.tt/2nuzWBy"><img alt="" src="http://ift.tt/2oVOM1k"><img alt="" src="http://ift.tt/2nuAiIJ">Selected examples of micro and macro interactions / animations that are found in the Kugadi Clean Assist app design.</p>
<h3>The Prototype</h3>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DNQviJl9P62A&amp;src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FNQviJl9P62A%3Ffeature%3Doembed&amp;type=text%2Fhtml&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="http://ift.tt/2oVKOWp">http://ift.tt/2oVKOWp</a></iframe></p>
<p>Test it out for yourself (<a href="http://ift.tt/2oe1gRL">interactive prototype in InVision</a>):</p>
<h3>Key Insights &amp; Opportunities:</h3>
<p>As a design team, we thoroughly enjoyed working on the Kugadi design challenge and creating Kugadi Clean Assist. The entire product design process took about two weeks for completion — including UX research, visual design (UI), interaction design (IxD), and prototyping. We realize that this is only an initial concept and we look forward to potentially designing the product out further if time allows.</p>
<h3>About <a href="http://ift.tt/2nuaaO7">Lux Interaction</a></h3>
<p>Launched in March 2017, <a href="http://ift.tt/2nuaaO7">Lux Interaction</a> is a Miami based digital creative agency specializing in user-centric interactive design, and building strong brand identities. The Lux team has a passion for looking at things from different perspectives and turning ideas into innovative products with an emphasis on user-centered design.</p>
<p><img alt="" src="http://ift.tt/2nuwQ0r"><img src="http://ift.tt/2oVow77" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2nuzfbD">Kugadi Design Challenge</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Kugadi Design Challenge

Top Stories