Cleancio

Duration: 3 weeks
Platform: Mobile app
Skills: UI/UX design, IXD design
Deliverables: Style tiles, High-fidelity mockups, Prototype, Style guide, UI kit
Tools: Sketch, InVision

Cleancio is a fast-growing and innovative Chicago-based startup helping Airbnb hosts maintain excellent guest reviews by providing an on-demand cleaning service. Since 2016, Cleancio has assisted rental property managers and owners improve the guest experience with prompt, punctual housekeeping services that meet industry-specific hospitality standards.

Rocio Lane, the company’s CEO and founder, reached out to Designation seeking help to reduce the complexity and extended learning curve of its platform. My team, which also included two designers, collaborated with Lane to analyze visual competitors, create design principles, conduct desirability and usability testing, and build individual design solutions that align to her brand and goals. The result: a mobile application that facilitates clear, efficient communication between managers and Cleancio’s housekeepers.

01

The Challenge

Cleancio used a third-party platform called Podio to manage the communication between housekeepers and managers. Unfortunately, it lacked the visual stimulation Cleancio customers craved. In addition, integrating Podio with the Cleancio platform created usability issues such as information redundancy and time inefficiency during assignments. With these three pain points in mind, our team evaluated wireframes provided by Cleancio. Extensive research, concepting and testing further guided our ultimate design solutions.

Service in unit Podio's user flow. Redundancy of information is highly noticeable in every screen, information isn't straightforward.

Wireframe key screens of cleaning service in unit.

02

Brainstorming

We started our kick-off meeting with a 20-second gut test. We defined the project scope and some insights of what Rocio’s team wanted in the next 3 sprints. Some of their considerations regarding the test included:

To wrap up our meeting and get ideas based on our clients’ goals and vision for their brand, our team got a few other takeaways:

In a brainstorming session, our team combined, prioritized and sorted these individual ideas into four main concepts: clean, rush, visual communication and contrast.

Our team used Post-its to help organize and synthesize insights from our first meeting with Cleancio and research from the UX team.

Our team discussing insights from our first meeting with Cleancio and research handed off from the previous UX team.

03

Defining the design principles

Our team combined our all insights, and created the following design principles:

Just get it done

Cleancio’s housekeepers need to use this app in a rush and on-the-go, so the platform must be efficient enough for users to access the information and tasks they require quickly.

Clean and tidy

Cleancio’s housekeepers need the platform to be easy to navigate. The design should structure content cleanly using typographic hierarchy, chunked content, and negative space to help users process the information effectively.

Make it familiar

Users need to be able to pick up the app and use it right away without a lot of hassle. Giving the users familiar elements which they already understand helps them easily engage with the app, navigate through it, and get closer to achieving their goals.

Communicate visually

Users want to focus on what’s most important. Providing communication through imagery, icons, color coding, and content, places focus on their job itself, maximizing user efficiency and the speed at which they can digest information.

Clean and tidy

Cleancio’s housekeepers need the platform to be easy to navigate. The design should structure content cleanly using typographic hierarchy, chunked content, and negative space to help users process the information effectively.

Just get it done

Cleancio’s housekeepers need to use this app in a rush and on-the-go, so the platform must be efficient enough for users to access the information and tasks they require quickly.

Make it familiar

Users need to be able to pick up the app and use it right away without a lot of hassle. Giving the users familiar elements which they already understand helps them easily engage with the app, navigate through it, and get closer to achieving their goals.

Communicate visually

Users want to focus on what’s most important. Providing communication through imagery, icons, color coding, and content, places focus on their job itself, maximizing user efficiency and the speed at which they can digest information.
04

Exploring competitors

Cleancio’s team approved these design guidelines and felt that they accurately aligned with their brand goals. With a better understanding, our team dove into domain research to gain inspiration from a wide assortment of relevant competitors that have similar conventions. We examined the direct competitors Care.com, Handy and Properly, which provide cleaning services similar to Cleancio.

On the other hand, we also looked at Airbnb, Skyscanner, TaskRabbit, indirect competitors that aren’t in the cleaning industry but have similar features such as schedules, communication between parties, and maps. We wanted to find visual ideas that approached one or more of our design principles.

Communicate visually

Make it familiar

Clean and tidy

05

Design Exploration

The modern and friendly

A vivid style with a clean interface. I used negative and colorful elements to make it visually interesting. This design has an airy and cheerful feeling, using some transparency in the cards.

Style tile 1

The minimal

A minimal style, with a more restricted usage of color. I recreated the icons to make it more visually interesting. The color contrast played a big role in the CTAs.

Style tile 2

Professional and Dark

I explored the combination of a dark background with light cards. Rounded yellow and white cards warm the design, giving it a friendly vibe. I used filled-in icons to keep the same contrast between the colors and background.

Style tile 3

When Cleancio reviewed the tiles, they had a strong affinity for the first style. The color combination was harmonious. They liked the modern vibe this style conveyed and felt the layout was approachable and clean. Cleancio’s biggest critique was that the icons were too small and not intuitive enough. They also felt the typography was too friendly and rounded. Following their feedback, I combined elements from all the tiles to make the icons more obvious and the typography more professional.

06

Iterations and testing

We designed our three individual initial mockups, then conducted a round of desirability and a round of usability testing to understand if our designs aligned with our design principles. Although we knew we faced a language barrier, we significantly underestimated how many of our users were Spanish speakers with only a slight level of English comprehension. Since I’m bilingual, I conducted all the usability testing in addition to moderating and translating conversations to my team.

My biggest takeaway from this round of testing was the language barrier of our users. The final app requires more simplified language in addition to photos and visuals to supplement the text and make it clear. I also realized I need to be more deliberate with the use of color and iconography, using the contrast of color and filled or linear icons to clarify their use as clickable or simply informational.

07

Final design and prototype

My design solutions focused on the end user, Cleancio’s housekeepers, who needed an operational platform to monitor cleaning basics with simple communication and reporting. I laid out content using negative space, a clear hierarchy, intuitive calls to action, and a modern style.

Explore prototype using InVision
Open Prototype

Prototype

Cleancio responded very positively to my designs, thanks to foundation of the initial wireframes and good communication with Cleancio’s team, who described the designs as “crisp,” “colorful,” “modern,” “easy” and “useful.” Rocio was happy to see all her ideas translated to reality, and I was happy to leave the company with a good set of designed screens. In our final meeting, Rocio commented that she wanted to work on more projects with Designation again.

Having a background in systems engineering, I can easily identify systems everywhere—even in design. For me, it’s important to design elements that matter in a creative and systematically way. For that reason, as part of delivering high-fidelity mockups I created a detailed UI Kit and style guide to use as a guideline in development. I paid attention to the use of color, CTAs, typography, grids, layouts and more. I’m glad I can build designs that matter, collaborating and working along with engineers and designers to clarify my designs throughout the lifecycle of a product.

UI kit

Explore interactive style guide
Open Style Guide
08

Future considerations

Although I enjoyed working with Cleancio, I can easily identify some areas of improvement if I had more time to work on the project. Knowing the majority of housekeepers don’t speak English, I suggest developing a Spanish version. Cleancio might also consider an Android version of the app.

Additionally, because my designs were focused on the wireframes and improving the basic functionality of the app, we ignored some important extra features like messaging. I would like to conduct some other usability tests to tackle this function.

Finally, we focused on Cleancio’s housekeepers as the main users. However, more tests to study how managers and homeowners interact with the app will further improve the design flow and theme integration, encouraging them to continue return to Cleancio for their housekeeping needs.

09

What I learned

During my time at Designation, I worked with teams in an agile environment, refining my design process in each iteration quickly and effectively. The variety of clients gave me the ability to be flexible with my designs and always align them with clients’ brands.

Building a connection with Cleancio’s team from the very first meeting made me feel comfortable opening up and speaking frankly. Learning about their personalities and needs enabled me to transform their product using effective designs that reached my client’s expectations. I feel very proud that Rocio was amazed how, in only three weeks, I understood their needs and included features that made their tasks more efficient. I learned to connect bridges between Rocio and her workers through my work and tests.

Through my creative director’s feedback, I learned how to think about color in a systematic way, build a design system where every color matters, and understand how color can be integrated into multiple levels of functions.

Most surprisingly, working with Cleancio showed me that my bilingual skills are an asset that make me more prepared to work and communicate with different stakeholders. This experience, my final client project at Designation, has taught me that I can value myself to take control of a situation in a way others can’t.

Our design team with Rocio, Norma and Brittne from Cleancio after the final meeting. They were astonished with the results we presented in only three weeks.

Next Project