Available for work
Case study · UX/UI · Complex system

Crewly.

Customer service, one shift at a time. Crewly is a customer-service and shift-operations system for delivery businesses, built for the three people who work on the same conversation: the agent, the shift manager and the operations manager.

Sign in as an agent, a shift manager or an operations manager. No password needed.

Type
Personal project · concept product
Demo client
BurgerCo, a burger chain with its own branches and couriers
Platform
B2B SaaS for desktop and phone, light and dark
Built with
Figma, Claude and Claude Code, Netlify
Timeline
2 weeks, part-time, alongside a full-time job. Built on a concept from my UX studies
Role
Product designer, solo: research, UX, UI, interaction and prototyping
Crewly shift manager dashboard
About the project

1 conversation, 3 sides

When a delivery order goes wrong, the customer contacts an agent. The cause may be the branch, the courier or the app. The agent has to investigate, compensate and get back to the customer without losing the other conversations in the queue.

Research

Where the insights come from

My years as an agent and an instructor

UX design

Roles, flows and decisions

One flow per role

UI design

A system in two themes

Light and dark, checked for contrast

3roles, one shared conversation
2themes, light and dark
1live demo you can sign in to
24semantic colors per theme
Research insights

All the information exists. It is scattered.

Waiting conversations go unnoticed

An agent can’t tell when a conversation has been left unanswered while another one is demanding attention.

Managers see problems late

A shift manager learns who went over quota after the fact, and approvals queue up behind other work.

No picture of the branches

An operations manager gets numbers in pieces, with no single view of the branches and how customers rate them.

The insights come from my own years as a customer-service agent in large call centers, and later as an instructor who collected what new agents found hard in the system and reported what to fix. They come from that experience, not from a new survey.
Conclusion: whoever needs to act should see immediately what needs attention. That sentence shaped the structure and priorities of every screen.
Pain points and solutions

Each role gets a different answer

Every pain point maps to something you can find on a screen.

Agent

Losing track of a conversation

Several conversations at once, timers to remember, and the context of past conversations spread across other places.

Solution: Up to five active chats with a timer on each, a summary and previous conversations beside the chat, and internal notes inside the same thread.

Shift manager

Seeing who needs help, now

No live view of who is over quota or slow, and refund requests that wait without a clear owner of the problem.

Solution: A dashboard that tags only the exceptions, approval requests with the responsible party and a wait timer, a shift budget, and a read-only watch with a private note to the agent.

Operations manager

No nationwide view

Branch data arrives in pieces, so there is no single picture of the chain.

Solution: A nationwide dashboard with detail per branch, customer satisfaction, and reports that are distributed automatically.

Personas

3 people, 3 goals

NB

Noa Ben-David

Agent · 27 · two years on the floor

About

Noa handles several delivery complaints at once. She wants to solve each one properly and keep her response times down.

Pain points

Forgetting a conversation that has been waiting Chasing approvals while a customer waits Re-asking for context the last agent already had

Goals

Never lose a conversation Know what the customer already told us Get a clear decision on refunds

What the system gives

Timers and a five-chat limit Summary and previous conversations Refund decisions that return as a note

DL

Dana Levi

Shift manager · 36 · eight years in service operations

About

Dana runs a shift of fourteen agents. She decides on refunds, protects the shift budget and steps in when someone is struggling.

Pain points

Finding out too late that an agent went over a limit or got stuck with a customer Approvals piling up Not knowing who is responsible for the problem

Goals

See who needs help right now Decide fast without losing control of the budget Help an agent mid-chat, out of the customer’s view

What the system gives

Tags for over limit, over break and slow response Approvals with responsible party and budget Read-only watch and private notes

EN

Eli Navon

Operations manager · 44 · responsible for all branches

About

Eli answers for the chain’s service quality. He looks at trends across branches, not at individual conversations.

Pain points

Branch data that arrives in pieces Hard to compare branches Reports built by hand

Goals

A nationwide picture at a glance Spot weak branches early Reports that reach the right people

What the system gives

Nationwide dashboard and branch detail Customer satisfaction Automatic report distribution

Customers are not users of the system. The personas are fictional, written to represent the three roles of the system.

User flows

From the first screen to the decision

One flow per role. The highlighted step is the moment the role exists for.

Agent

01Sign in02Active chats03Open a conversation04Reply or add an internal note05Request refund approval06Decision returns as a note07Send the refund and close

Shift manager

01Sign in02Dashboard overview03Spot an exception or a request04Watch the chat or review the request05Approve, give a voucher instead, or reject06Check the shift budget

Operations manager

01Sign in02Nationwide dashboard03Open a branch04Check customer satisfaction05Share a report
1 case, 3 sides

1 burger, 3 people

One order that went wrong, followed through all three roles. It is the same story the live demo tells.

01

Agent: the burger came without cheese

Shira sends a photo: no cheese, no lettuce. Noa asks Dana to refund ₪52, with the branch as the responsible party. While she waits, a suggested-next-step bar tells her what to do.

02

Shift manager: a voucher instead

Dana sees the photo and the policy side by side. A full refund isn’t standard for missing toppings, so she offers a ₪30 voucher. Her decision returns to Noa as a private note, with the reply ready to send.

03

Operations manager: Dizengoff, again

At the end of the week Eli sees the chats behind the numbers: Dizengoff has the most complaints, mostly missing items. He asks the branch manager for a packing check and makes a responsible party required on every refund.

Design decisions

What I chose, and why

Usability led each decision: efficiency, clarity, and preventing mistakes before they happen.

01

A private note looks different from a message

One conversation mixes what the customer sees, an agent’s internal note and a private message from the shift manager. Notes are amber with an outline, so they can’t be sent to the customer by mistake. The manager’s outline is solid and the agent’s is dashed.

02

Sensitive data is hidden automatically

When a customer types a card number, the conversation shows only the last four digits and a warning, with a button for a ready reply that explains the refund returns to the original payment method. The agent doesn’t have to think about it.

03

Refunds with a responsible party

A refund request shows who is responsible: branch, courier or platform. The shift manager approves, gives a voucher instead or rejects, and the decision returns to the agent as a note. The shift budget and the split by responsible party sit on the same screen.

04

Flag only the exception

Tables have no row background colors. A solid red tag appears only when someone goes over a quota, so the eye stops only where action is needed. An agent on break appears in the list only if they went over.

05

Dark mode for night shifts

The system is open all shift, so it has a complete dark theme. The primary button is lighter with dark text, and status colors are brightened to stay readable.

The screens

One key screen per role

Each in a light and a dark theme. Every role can also be tried in the live demo.

Agent · one conversation, with the customer and order beside it

Agent · one conversation, with the customer and order beside it

Shift manager · live dashboard of exceptions

Shift manager · live dashboard of exceptions

Operations manager · overview of all 21 branches

Operations manager · overview of all 21 branches

Design system

1 palette, 2 themes

I chose a clean blue on a cool grey. Earlier directions were dropped because they felt cold or heavy. The final palette was checked for contrast in both themes.

Ink · #1F242EPrimary · #2563EBDark primary · #60A5FAHighlight · #DBEAFESurface · #F3F4F6
24semantic colors per theme
12pxsmallest text size; body text is 16px
4.5:1minimum text contrast, per Israeli standard SI 5568
2themes, both checked
The primary button is #2563EB rather than the brand blue #3B82F6, because white text on the lighter blue reaches only 3.7:1. The brand blue is kept for progress bars and decoration. Status tags (available, on break, offline) always carry a word, never color alone. The orange dot on white reaches only 2.2:1, so it never stands by itself.
Process

How I worked with AI

I’m a designer, not a developer. I worked with Claude in two stages and made the product decisions myself.

01

Research and design in Claude chat

We defined the problem, the three personas and their flows, then the design system: colors, type, light and dark, contrast. The screens were built on a shared canvas and polished round after round. I chose the clean blue direction and what stayed out.

02

From design to a working demo in Claude Code

We turned the screens into a web app with three roles and put it online. Claude wrote the code. I set the scenarios, the rules and the copy, and went through every flow myself.

03

What changed once it ran

A ticking countdown felt stressful, so times became calm labels. Hold kept its name and got an explanation in the tour. Moving chats away from a slow agent isn’t a real scenario, so a handoff happens when an agent leaves. On a phone, tables turn into cards.

04

What I bring from the floor

I worked as a customer-service agent. That is where the rules come from: who approves a refund, why a responsible party matters, and why a manager should hear about the exception, not every chat.

Live demo

Try it yourself

AgentHandle Shira’s burger, ask Dana for a refund, and end your shift with a handoff.Shift managerBrief the team, decide on refunds, help an agent with an upset customer, and hand the shift over.Operations managerFind the weakest branch, read the survey ratings behind a shift, and change a policy.Each role has a short tour. All people and orders are fictional, and everything stays in your browser.

Open the live demo ↗

All work ↗Get in touch ↗