Cleancio is a Chicago based cleaning service whose goal is to provide high-quality cleanings for for vacation rentals and airbnb units.
This was a 3 week project I worked on during my time at Designation. With a team of 3 designers, I was able to tackle the competitive research, UI design, testing, and prototyping of a mobile app for the service industry.
Cleancio is a Chicago-based cleaning service whose goal is to provide high-quality cleanings for vacation rentals and airbnb units. They schedule cleanings for homeowners and pair them with an in-house team of cleaners, referred to as Cleancios. Rocio, Norma, and Brittne from Cleancio came to Designation seeking to build an app that streamlined the current process their cleaners used to communicate with homeowners and administrators.
Cleancio currently uses a third-party app called Podio to manage their cleaners’ schedules and assignments. The app allows for admins to create a personalized platform, which Rocio used to create an app that conveyed details and kept a line of communication with the Cleancios.
Through Podio, Cleancio added features until it became a complex app with a very complicated information architecture. Rocio described it like a news feed, where it connected everything the Cleancios did, but we soon realized how unorganized it was and how hard it was to know what to look at within the clutter.
Before working with us, a previous Designation UX team worked with Cleancio to create a set of wireframes that simplified Podio to meet Cleancios’ needs, focusing on the tasks of checking in cleanings and reporting abnormalities to homeowners. These wireframes gave us a solid starting point to apply a visual language that communicated users’ needs.
During our kickoff meeting, our team set up expectations, confirmed the project scope, and performed a twenty-second gut test to gauge both the client’s understanding of design as well as their goals for the visual direction of their product. The gut test revealed how much they expressed visual preferences through the lens of empathy for the Cleancios’ needs. Rocio, Norma, and Brittne expressed the needs of both their product and cleaners, revealing to our team the language barrier that many cleaners faced as well as the fast paced nature of their work. They also highlighted the trouble cleaners faced given the complex information architecture of their current app, as well as how important it was for users to understand and get their tasks done quickly. Together, we reviewed their current screens, the wireframes, and their current branding.
Over the course of the meeting, users’ needs became so clear and specific to us that we jumped right into creating design principles to guide our project moving forward. Our team used the exercise of wordmapping to help us synthesize the keywords we heard during the kickoff, our look at the previous app, and the needs the previous UX team addressed. These principles became the core foundation upon which we structured our visual language in order to keep Cleancios’ front and center of every step.
Just get it done
Users will be on their feet and use this app on the go. The app needs to be efficient so Cleancios can access the information and tasks they need in a timely manner.
Communicate to me visually
Users need to focus on what’s important. Imagery, iconography, and other visual elements will communicate and serve as content so Cleancios can focus on the job at hand.
Be clean and tidy
Users need the app to be easy to navigate. The design should have clean structure, executed through visual hierarchy, chunked content, and negative space to help the user navigate and process information efficiently.
Make it familiar to me
The app should leverage familiar patterns users already know so they can easily engage with the app and navigate it to focus on their goals.
Personally, this was the first project for me where our guiding principles came so early, and a big driver of this was Rocio’s openness about the needs of not just what the app should do, but also in Cleancios’ linguistic and functional frustrations in using the app. We structured our principles to start with an overarching goal (efficiency) which then translated into our next three principles as a means of action. I felt overwhelmingly positive about how easily these guidelines came to us, as they gave me a foundation on which to start brainstorming ideas going forward.
However, before jumping into style explorations, in order to look for opportunities for differentiation and inspiration, our team decided to look at competitors through a visual competitive analysis. With our design principles already established, we decided to look at competitors through our design principles to try and see what techniques they used to build the clean, efficient layouts that we wanted to create.
Our analysis brought us to a better understanding of how to inspire our designs going forward. All these elements worked well in unison to create a clean and fluid process for users and helped inform our designs as we explored different styles.
Drawing inspiration from competitors and keeping our design principles in mind, I then proceeded to build three divergent style directions to present to Rocio.
For my first exploration, I decided to take the typical blue color associated with freshness and apply it as a background solid, laying lighter neutral elements on top of it to create a sense of structure and balance between colors while maintaining a sterile vibe. I utilized rounded buttons and friendly line icons to create a flat, friendly, and familiar look. Finally, I chose a clean sans serif typeface in Lato, utilizing its various weights and treatments to create a sense of hierarchy.
In my next exploration, I wanted to push the normally-associated cool tone of blue into a new light, venturing into some off-purples. I wanted to maintain the cleanliness and sleekness associated with the color while extending into new territory. I softened the button’s rounded edges to keep a solid structure across the elements and toned the map down to to a monochromatic tone to let the overall theme breathe through its simple, modern, and clean structure.
My last exploration also pushed color away from the Cleancio brand’s blue to a green I associated with freshness. I paired a serif typeface with a sans serif one to create a more professional vibe than the previous styles. Here, I squared off buttons and filled in icons to add a little weight and again create the structure necessary for this project.
Rocio, Norma, and Brittne responded with valuable feedback to the tiles, giving their insight into the elements they felt best represented their brand. They liked the use of familiar patterns brought in from the first style, while appreciating the use of space and colors of the third style. They also liked the use of the sans serif typography in the first tiles, though they expressed concerns about the visibility of some of the line iconography.
Though we received mixed feedback across all three style explorations, it gave me a good basis to start crafting my decisions into how to incorporate elements into the next phase of my designs. Based on their interest in the coloring and aesthetic of the third tile, I decided to carry it forward while incorporating the typography and patterns of the first tile as I felt that it best expressed the brand’s needs and voice.
Creating a solution
Before our next test, I iterated my designs to accommodate for the findings from earlier. I adjusted every visual element in my design to associate with a visual aid, assigning filled-in icons for labels and line icons to clickable items. I also made detailed changes based on the previous test, creating a clickable prototype in InVision to test if users could accomplish three task flows. We tested Cleancios’ ability to comprehend the information on the schedule to find their next cleaning, report a stray wallet they found in the unit, and add pictures to their cleaning before clocking out. We conducted four tests as a whole, only able to test two Cleancios and testing two stakeholders due to scheduling conflicts.
Users responded well to greyed out cleanings and found the clean aesthetic easier to navigate.
Cleancios found the enlarged pictures to be an improvement, with the added iconography a plus as well.
We noticed some influence from Podio on the way users clicked through the report screen, specifically in the order that they addressed tasks.
The last round of testing influenced my final solution in small changes to the details that made up my visual language. I realigned some of the text labels and arranged everything onto a more strict baseline grid based on some of the final feedback we received from users, also implementing small details like a phone icon to call administration in case the Cleancios had any issues. I implemented these changes and polished up my screens and created a prototype in InVision to help our stakeholders envision Cleancios’ process and interactions. In addition, even as a trilingual, this project taught me how hard it was to cross language barriers through only visual means, so I also created a few mockups of screens translated into Spanish, which we passed to Cleancio. Although much could be solved through visual means, I believed users would benefit tremendously from a translated version of the app.
In handing these files off, I also created a style guide to define my visual language for developers and designers to work with my designs in the future. The style guide helped me realize the attention to detail that I had to put into creating a design system and visual language that would be cohesive and applicable on all fronts. Rocio, Norma, and Brittne were pleased with our team’s concepts and the divergent designs each member of our team created. We assisted in the creation of an app that was easier to understand by our users, while focusing on a design driven by the principles we created, keeping the user at the center.
While handing off our deliverables and style guides to Cleancio, we found that there are still a few holes within the wireframes we received, with more UX work needed for other sections of the app. The wireframes we received only covered the design of the schedule, task, and report sections of the app. However, the nav bar within these wireframes also included a profile, messaging functions, and a “more” section to bring in other functions from the original app. Further UX work could focus on these areas, as well as building out the app’s admin and homeowner views. The visual language of these future sections could be informed by the style guide I created, but these sections would definitely still need to be built out before the launch of this app in order for a seamless experience across the Cleancio service.
Rocio, Norma, and Brittne, were very constructive with their feedback and I was glad to have worked with them. In addition, this project was unique for me in that my two teammates had been working together for multiple projects before I started working with them. I had to learn to take a backseat to respect their tried and tested process, yet still contribute my strengths where I could to help us all work towards a common goal in an fast-paced 3 week project.
Though Cleancio was my second project with Designation, it came with a whole new set of challenges, as it was my first time not only designing for the service industry, but designing for a user base that I didn’t have much in common with. Through this project, I was able to stretch my visual communication muscles by stretching beyond linguistic ability in the copy to convey a message and complement it with visual aids across the entire app. Beyond linguistics, I also found it a challenge interpersonally working with our testers. Although a rough working knowledge of Spanish and some experience working within the translation/localization sector helped me to hold my own during our tests, the obstacles presented to us proved to be a huge area of personal growth. This project helped me to learned to work quickly, stay on my toes, and adapt to any unexpected circumstance.