---
title: "Revamp sign up flow for Camelo"
company: "Camelo"
description: "Redesign the sign up flow for Camelo workforce management app to increase completion rate and reduce drop-off."
tags: ["SaaS", "Web"]
cover: "/static/web screenshot.png"
intro: |
Camelo is a workforce management tool for shift-based teams and hourly workers. When I joined the project, the team was trying to improve user activation, but the signup flow had only a 48% completion rate, with many users dropping off at the first step.
With a tight timeline and a small team, I ran a focused UX audit to find the main friction points, then redesigned the flow by restructuring steps, simplifying choices, and improving visual hierarchy to reduce cognitive load. The clearer, more progressive experience helped users move through signup more confidently and increased completion from 48% to 55%.
projectInfo:
- { label: "Role", value: "Product Designer" }
- { label: "Timeframe", value: "~2 months" }
- { label: "Team", value: "Product Manager, Product Designers, UX Writer" }
metrics:
- { label: "Completion increase", value: "+25%" }
- { label: "Drop-off reduction", value: "-40%" }
testimonial: "Mai brought clarity to a complex problem. The result was a clearer, more progressive signup experience that helped users move through the flow more confidently and increased completion from 48% to 55%."
testimonialAuthor: "Product Lead, Camelo"
relatedProjects:
- title: "Revamp Sign Up Flow"
company: "Camelo"
description: "Simplified a multi-step onboarding to reduce drop-off."
href: "/works/camelo"
- title: "Time Off Calendar"
company: "Camelo"
description: "Redesigned the time-off request flow for shift-based teams."
href: "/works/time-off"
---
Carousel
<Carousel>
<img src="4 cat.jpg" alt="Description of image 1"/>
<img src="4 cat.jpg" alt="Description of image 1"/>
</Carousel>
2-column content
<div class="content-grid">
<div class="content-grid-text">
<h3>Restructure into a progressive flow, with clear progress indication</h3>
<p>The original signup flow presented too many fields on a single screen, creating cognitive overload and making the process feel heavy.
I redesigned the flow into smaller, progressive steps so users could focus on one decision at a time and better understand their progress.
Although the engineering team raised concerns about added complexity, I used a consistent layout pattern and minimized conditional logic to keep the implementation manageable.
There’s also a progress indicator to help users understand how far they are in the process.
</p>
</div>
<div class="content-grid-image">
<img src="4 cat.jpg" alt="Description of image 1"/>
</div>
</div>
<div class="full-width">
<img src="/works/attachments/old sign up screen 1.png" alt="Description of image 1"/>
</div>
Image grid can be messed up on mobile:
<div class="full-width">
<div class="gallery-grid gallery-grid-3">
<img src="/works/attachments/old sign up screen 1.png" alt="Description of image 1"/>
<img src="/works/attachments/old sign up screen 2.png" alt="Description of image 1"/>
<img src="/works/attachments/old sign up screen 3.png" alt="Description of image 1"/>
</div>
</div>
Highlight cards (3 columns)
<div class="highlight-cards">
<div class="highlight-card">
<p class="highlight-card-label">Problem 01</p>
<p class="highlight-card-title">Flow structure</p>
<p>The onboarding pushed users down a rigid path. Steps were out of order, and the entire checklist focused only on scheduling — leaving the rest of the product without any guidance.</p>
</div>
<div class="highlight-card">
<p class="highlight-card-label">Problem 02</p>
<p class="highlight-card-title">Friction at key moments</p>
<p>Users scrolled through a long position list with no filtering. There was no way to add a position while adding a team member. Blue text was mistaken for buttons.</p>
</div>
<div class="highlight-card">
<p class="highlight-card-label">Problem 02</p>
<p class="highlight-card-title">Friction at key moments</p>
<p>Users scrolled through a long position list with no filtering. There was no way to add a position while adding a team member. Blue text was mistaken for buttons.</p>
</div>
</div>
Checklist
<div class="checklist-grid">
<div class="checklist-item">
<div class="checklist-header">
<span class="checklist-icon">✓</span>
<p class="checklist-title">Restructure into a progressive flow</p>
</div>
<p class="checklist-desc">Break the information-heavy signup into smaller steps.</p>
</div>
<div class="checklist-item">
<div class="checklist-header">
<span class="checklist-icon">✓</span>
<p class="checklist-title">Restructure into a progressive flow</p>
</div>
<p class="checklist-desc">Break the information-heavy signup into smaller steps.</p>
</div>
<div class="checklist-item">
<div class="checklist-header">
<span class="checklist-icon">✓</span>
<p class="checklist-title">Restructure into a progressive flow</p>
</div>
<p class="checklist-desc">Break the information-heavy signup into smaller steps.</p>
</div>
</div>
Embed video
<video width="100%" autoplay muted playsinline loop controls>
<source src="/works/attachments/time off conflict with shift and resolve.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Impact card
<div class="content-grid">
<div class="content-grid-text">
### Smarter UX leads to stronger outcomes
This project was about solving business and user problems through smart strategy and focused execution.
- I started with strategy, not screens
- I prioritized business goals and user needs
- I designed a scalable system, not just static mocks
- I delivered smart solutions (not just what was asked, but what was needed)
</div>
<div class="impact-card">
#### Projected Results:
**Completion rate:** 28% → 50%
**Conversion:** 31% → 35%
</div>
</div>
Eyebrow section
<p class="eyebrow">Reflections</p>
## Reflections
Scrolling carousel
<ScrollCarousel>
<img src="/works/attachments/home-w-bg.png" alt="Camelo Home page redesign"/>
<video width="100%" autoplay muted playsinline loop controls>
<source src="/works/attachments/schedule-warnings.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<img src="/works/attachments/documents.png" alt="Documents page"/>
<img src="/works/attachments/time-off-policies.png" alt="Time off policy setup"/>
<img src="/works/attachments/policy-details.png" alt="Time off policy setup"/>
</ScrollCarousel>