Client: Cleancio
Duration: 3 weeks
Role: UI/UX designer
Platform: Mobile application
Tools: Sketch, InVision
Deliverables: Style tiles, high-fidelity screens, prototype, UI kit, and style guide.
Client: Cleancio
Duration: 3 weeks
Role: UI/UX designer
Platform: Mobile application
Tools: Sketch, InVision
Deliverables: Style tiles, high-fidelity screens, prototype, UI kit, and style guide.
Visual competitive analysis
Design principle
Style tiles
Wireframe evaluation
Mockups building
User testing & Iterations
Interactive Prototype
UI kit
Style Guide
Cleancio is a company that offers cleaning services for vacation and short-term rentals. Rocio, the Founder of Cleancio, wanted to create a smart mobile platform to better manage her cleaning staff and help them complete their assigned tasks efficiently and effortlessly. My team consisted of myself and two other talented designers, Vivianne and Philip, who collaborated and worked with Rocio and her team for three weeks on getting know their business goals, identifying and analyzing visual competitors, producing design principles, defining a visual design language, and creating a design system to help Cleancio create cohesion between platforms through design.
Seeking to create a smart platform, Rocio reached out Designation and worked with a UX team to develop a set of comprehensive wireframes focusing on providing effective mobile experience. Bridging their work, we sought to align ourselves with their design direction and Cleancio’s business goals.
During our initial client meeting, we learned that Cleancio was using a third party platform called Podio to manage and collaborate. However, the cleaning staff (also called Cleancios) always struggled with spending a lot of time on seeking and uploading information about each specific assignment. Also, the majority of the cleaning staff were Spanish speakers. It always took them a long learning curve to familiar with the platform. Therefore we needed to visually optimize the user flow with an operational platform and break their language barrier based on the UX research and wireframes.
Cleaning staff were frustrated by their current collaboration platform, Podio: 1) Reporting flow wasn’t straightforward. 2) It was difficult to navigate without any visual hints.
We also noticed Cleancio had a strong branding and an active website which clearly told “who they are” and “what they do” and resonating with the target audience. They liked the imagery usage and font pairing on their current webpage. However, they were interested in seeing a distinct design for the mobile app.
Cleancio’s current webpage
By doing a 20-second gut test with Rocio and her team during the kickoff meeting, we realized they were thrilled about the dark interface and enjoyed seeing modern, cool and minimal designs. On the other hand, they wanted their app to be clean, simple, straightforward, intuitive and familiar. Their reactions on those gut test images also revealed that they were not fans of illustration but eager to have visualized information.
With all the expectations from the Rocio and her team, UX studies and our understanding of Cleancio brand, I could anticipate the biggest challenge was creating a visual aesthetic that balanced all aspects mentioned above, and I was excited to explore and see how I could incorporate all the considerations into my design.
Instead of directly diving into the design process, we explored both direct and indirect competitors in the market to determine the visual trends. The competitors we looked at were either had the similar features as Cleancio or aesthetically pleasing our clients. We researched Care.com, Handy, Properly, Airbnb, Skyscanner, and TaskRabbit, and observed that they all shared the same strengths:
We also noticed that we were designing for internal enterprise users instead of consumers. Cleancios knew precisely what improvements they were looking for. They needed a platform that was easy to go through the workflow. During the subsequent designs, I tried to use negative space and visual hierarchy to break down content into bite-size chunks, incorporate styling imagery to convey informational content and decrease user frustration on going through all content word by word, use iconography to label and supplement information to increase ease of use, and stick to conventional sans serif typefaces to avoid distraction and ensure readability.
Based on competitor analysis, client insights and visual inspiration, our team generated design principle ideas from the adjectives the client was looking for. We wrote down all the thoughts, grouped them and ranked the importance.
Our team brainstormed. We listed out the brand adjectives and grouped them to find out the design principles
Cleancios would use this application on the go, so the platform would need to be intuitive so that they could access the information and tasks efficiently.
Cleancios needed the platform to be easily navigated. The design should structure content using typographic hierarchy, chunked content, and negative space in a decent way to help them process the information.
The design of the platform would be usable in a rush. By giving Cleancios familiar elements which they already understand, they would quickly engage, move through it and get closer to achieve their goals.
By providing communication through imagery, iconography, and color coding, the cognitive load and language gap would be minimized. Cleancio could focus on their workflow instead of understanding the information.
With the design principles that the entire design team agreed on and designed to, we allowed us to share an understanding of Cleancio’s core value, which was efficiency and intuitiveness and its core audience, in-house cleaning staff. We were able to align our creative design decisions, creating clean and familiar interfaces. The client enthusiastically approved the design principles and felt they were aligned with their expectation for the app. With such a clear direction, we started our next step: creating style tiles.
With those insights, researches, and endorsed design principles, I created three divergent style tiles with distinct visual language to communicate with the client.
In the first style, I selected sky blue as the primary color which was also used by current Cleancio brand, and it was recognizable and familiar to Cleancio staff. With a minimal usage of color, I intended to convey the feelings of elegant, simple and modern. The primary color would be used for buttons to draw users attention. It stood out especially on top of the dark interface. To organize the information in a fresh and clean way, I introduced a card layout and made rounded corners to enable it to look friendly and reachable. I leveraged iconography in a simple line style to minimize the text volume and be consistent with the overall atmosphere.
I was trying to visually translate the personality of Cleancio, warm, passionate and easy-going, into the second style. I added the warm color to balance the coldness of blue and used vivid colors (yellow and green) to emphasize important information. Iconography was customized to give a feeling of fun and friendliness.
Cleancio put itself in a position of professional hospitality. Therefore, the vibe I was going for here was a flat, professional, and familiar look. In this style, two contrast colors, blue and orange, were combined in harmony. UI elements were simplified to call upon the aesthetic of familiarity. Photography was treated with a dark blue filter, to make the overall look of the design more consistent and elegant.
Exploring design directions by style tiles is always one of my favorite parts. I can creatively visualize all the black and white research, wireframes and design principles as well as express my passion on the project. I liked all three tiles and was excited to continue with any of them. My clients were big fans of the first and third ones. Instead of seeing a colorful interface, they were keen to see a minimal, sleek and transparent interface. They were interested in having dark images as background, elegant iconography and a card layout. They also liked the font pairing of sans serif and serif. Following their feedback, I grabbed the elements they liked from each style tile to continue with the high-fidelity mockups confidently.
I was raring to enter the first round mockup design to see how my style tile and wireframes could ignite a spark. Our team selected key screens of the workflow which contained unique UI elements and in different layouts from the wireframe set to start the design.
During the design process, I individually evaluated and collaborated with my team and the previous UX team to find areas of opportunity within the wireframes. The wireframes focused on the flows of finding and finishing cleaning tasks, reporting abnormalities and adding after photos. I restructured the screens of schedule and the clock-in process to enable the information more intuitive and the flow more fluent. I also made minor adjustment to the reporting screens to allow action buttons stand out.
Based on the wireframes, I experimented with different layouts to organize the same information, consulted my teammates and creative director in Designation to share their insights, and finally came out with the first round of design for desirability testing. For this round of testing, our goal was to test the user’s emotional response to the visual designs (color, legibility, and readability, iconography, graphics, negative space, layout) and to test whether their understanding of the function was as intended.
During the desirability testing, we tested our key screens with three housekeepers who worked for Cleancio and spoke Spanish. I found that users valued the use of color on information-dense screens. Also due to the language barrier, the majority of the users relied on iconography, photography, and graphs to understand the information. Despite testing the visual aspect, the user talked about the functionality of the app. So I carefully analyzed the wireframes and figured out the solutions via rounds of internal iteration. Also, I built up more screens with different color versions. Then we conducted usability testing to explore users’ reactions and expectations.
During two rounds of testing and many iterations, I identified Cleancio’s need for each screen and generated ideas to meet those needs. I realized that it was virtually impossible to design an interface that had no usability problems without listening to actual users’ voices. The testing and iterations told us our efforts were focused on adding value for users and gave both Rocio and myself better visibility of progress of my design.
After a second round of testing and many fun internal iterations which revolved around both UI and UX, I landed at my final design. The client was thrilled with my final design, which incorporated all the feedback from users and stakeholders. They mentioned that the design was so detail-oriented and they didn’t expect to see such a significant improvement of the design by addressing minor changes.
I enjoyed a lot in doing testing and the tireless iterations based on the feedback from users and clients, and I was so proud to see my design rapidly grew and got more and more comprehensive by rounds of iteration. Please check out the prototype, in which you can interact with the app, experience the workflow of Cleancios and see how they complete their cleaning report effortless without interruptions.
The interface only focused on the workflow of checking in cleanings, reporting abnormalities and adding after photos. To help Cleancio implement my design in a consistent way for other flows, I created a style guide to provide guidelines for delivering the color palette, typography, UI elements, and layout to help developers and future UI designers continue development in alignment with the style.
By working on the style guide and UI kit, I got a chance to systemize the visual elements I created for Cleancio. They also strengthened and contributed to Cleancio branding which was clean, simple, modern and effortless. By sticking to the style guide, Cleancio could consistently identify its brand across different platforms.
Despite all the feedback tied to visual aspects, during user testing, we also gained valuable insights unrelated to UI, including the need for multiple language options and an Android platform. Cleancio’s cleaning staff might come from different countries—Ecuador, Colombia, Mexico, and Poland. Besides Spanish, Polish might also be considered as a core language for the app. All three designers were designing and building prototypes for the iOS system; however, we noticed some testers were experienced Android users, and they had habitual actions when interacting with iOS design patterns.
Also, I was consciously looking for opportunities to surprise and delight the users during the design process, not only through UI elements, layout and color, but also microinteractions. If I continued with the project, I would have liked to introduce more microinteractions in my design to increase users’ engagement and explore different states of screens (e.g., loading page, blank page, and splash screens.) Microinteractions would be a valuable feature to speed up Cleancio’s workflow and make the application much more intuitive and interesting. I created animations in Principle and After Effects for previous projects, and I found that they played a significant role in improving the user experience even though they were slightly noticeable before they fade away.
Last but not least, due to the limited timeframe, both the previous UX team and my team targeted solving the cleaning staff’s frustrations. Rocio desired to see how she and her team would use the platform to manage and coordinate with her cleaning staff and how the property owners would use the platform to track the cleaning status and communicate with Cleanico.
We wrapped up all the findings and considerations to Rocio to help Cleancio build a robust platform for its staff in the later stage.
The project cycle was three weeks. However, I wished it could have lasted longer. I enjoyed being part of a team where I could work productively and happily. We had discussions, brainstorms, and debates at the beginning of the project but we always came out with a solution efficiently. During the individual design phase, we shared, helped and inspired each other on producing comprehensive designs. For the desirability and usability testing part, it was a challenge that all testers spoke Spanish. Luckily, my teammate Vivianne was from Colombia and spoke Spanish, so she took both roles of moderator and translator. Philip and I took notes based on her translation, users’ reactions and facial expressions. The testing was conducted smoothly and efficiently, and finally, we collected a lot of valuable feedback which contribute to my final design.
Cleancio was my second client project at Designation, and I was able to apply my experiences from earlier ones. I deepened my understanding of a working flow and my process as a UI designer. I realized if I was to create a quality design, I needed to listen to users’ voices and produce iterations tirelessly. I learned that educating and directing the client to provide valuable feedback related to UI ensured us being able to align with their expectations and improved their satisfaction.
