Web app for cleaning services - UX/UI designer

Overview

Cleancode is a web application to monitor the cleanliness of different locations within a facility. My role involved re-design the entire web app experience for two types of users (users and cleaners) and revamp the visual design.

The team

UX/UI designer (me) & two Devs

My toolkit

Figma & Figjam

Context

This is a freelance project

Understanding the user

Based on the information provided by the client, I created two representative quotes for each type of user. Given the time constraints, I had to maintain a high-level approach to defining the user.

Ideation

The client shared some references to the state of the web app at that moment. Additionally, considering user insights, we established a list of sections and features to be included.

Sections

Company and location

Last cleaning and services made

Cleaning insights

Cleaner login

Help center

Features

Cleanliness rating

Request a cleaning (users)

✅ Points of action that guided the design process

Point #1 — No scrolling

Keep everything in plain sight, nothing is hidden from the user.

Point #2 — Thumb area

Keep the most used features close to the thumb.

Point #3 — Clear structure

Simplify processes for a well-organized app structure.

Wireframing (lo-fi)

My job was to improve the overall experience by optimizing the User Flow through the integration of the specified sections and features.

Request a cleaning

See Cleaning insights

Help center

Cleaner login

Cleancode’s visual identity

Visual design (Hi-fi)

The challenge was to create a flexible layout that could match any client’s branding (white label).

I created a Mockup using Cleancode’s visual identity. After a couple of iterations, the structure evolved from the Lo-fi version:

Increased space was allocated to elements like "Services performed."

"Rating" and "Request a cleaning" were combined to enhance their contextual relevance.

"Cleaner login" was simplified, with potential for further exploration in the future.

Then, I generated additional Mockups using Disney's visual identity which were used during a business meeting with them. In this phase some UX changes were made to better align with user needs.