Cleancio

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.

Overview

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.

The browse screen of Podio’s current version (left) leads to all additional screens with housing information for different units.

Understanding the problem

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.

These wireframes simplified the Cleancios’ workflow to find their cleaning unit by schedule/location, look up details, and report to homeowners.

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.

We began to wordmap some of the keywords we felt our stakeholders expressed as strong during our gut test, and then looked for patterns and connections between those words. We started grouping together some of the patterns we saw and created our design principles based off these groupings.


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.

Design Principles

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.

Assembling the pieces

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.

Solidifying the Concept

With a direction in hand, I then crafted a few key screens to take into a desirability test, where we presented our designs to some Cleancios to test whether the visuals spoke to our principles. Our team decided to test four areas of the app (schedule, tasks, details, and reporting) with three Cleancios, all of whom were familiar with Podio.

Schedule screen (left) through which the user can find their cleanings (center) and further unit details (right).

During the design of the report function, I opted to progressively disclose the report section by moving half of the process to a second screen to organize the information more cleanly.

While our team was informed of the language barrier that many of the cleaners had, none of the cleaners were able to understand any English. While we had a native Spanish speaker on our team who moderated the tests (and I understood enough to take notes), the biggest finding from our test was that many of the cleaners didn’t understand content on screens due to a lack of English. It was an eye opening experience because though we felt we prepared for it, we were still shellshocked at how much we had underestimated the testers’ linguistic abilities.

Areas of Success

User liked they could find all the unit details on one screen and didn’t have to scroll.

Users felt the colors were fresh and clean.

Areas of Opportunity

Users didn’t notice the neutral colored markers on the map.

Users didn’t understand much of the copy.

Users felt the report pictures could be larger, and the tag labels weren’t as important as the photo content.

Due to unforeseen circumstances and some of the feedback given from our users, we realized even further how important our design principle of visual communication was. We presented our findings to Rocio and Brittne, who found our findings insightful to their service, and then gave us further insight into our language issues. We realized we now had the added obstacle of trying to create a design solution that solved a translation/localization problem with visuals instead of text.

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.

I made changes to the map as well as the sizing of labels due to user confusion and made minor adjustments to the size of the labels because users thought they were clickable.

I revamped the report screen, bringing priority to user-uploaded images based on feedback, minimizing the impact of copy and increasing the hierarchy of visual elements. I also added visual aids to every button and labeled each option to guide users

I made map changes to the details screen and added color icons to the clickable prompts. I also added a mockup of what the partner guidelines looked like once clicked, as well as a confirmation message once the cleaning was complete.

Takeaways:

  • 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.

Already having a visual language that communicated itself through iconography, I translated the copy within my screens to create a mockup for a Spanish version.

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.

Full prototype available here

Full style guide available here

Future Considerations

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.

Final Thoughts

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.

Our team with the Cleancio team. From left to right (Norma, Rocio, Philip, Vivi, Chen, Brittne)

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.

More Projects:

UI Design
COMING SOON
Everyone Onboard

Coming soon

UI Design
COMING SOON
Bonsai

Coming soon

UI Design
COMING SOON
Habfit

Coming soon

Ux/Ui Design
COMING SOON
Winkel

Coming soon

A collection of design tools.

COMING SOON
SiDE PROJEcT
Design Resources