{{ activeCase.tag }}
{{ activeCase.title }}
{{ activeCase.summary }}
{{ t.cd_l_tldr }}
- {{ td.l }}
- {{ td.d }}
{{ activeCase.overview }}
{{ activeCase.challenge }}
{{ ap.t }}
{{ ap.d }}
Redesigned end to end, with the in-house studio
I worked with SysAid's in-house studio, led by Tomer Gilat, alongside the product manager, engineering and our design partners, who joined interviews, live sessions and prototype tests. Together we ran competitor and user research with qualitative and quantitative interviews, then took the queue and ticket page from wireframes to tested prototypes. What came out was a design system and an entirely new end-user UI.
Read as text
- Context: Classic, the legacy platform in use since 2002 → Spaces.
- Who: me, Senior UI/UX Designer · SysAid's in-house studio, led by Tomer Gilat · product manager · design partners · engineering and senior stakeholders.
- 1 Research: competitor and user research, design partners, qualitative and quantitative interviews. 18 interviews · 240+ surveys · 6 competitors.
- 2 Synthesis: 3 recurring themes · 4 segments · 4 principles.
- 3 Wireframes: the queue as a clear table with fast filtering · the ticket page as a labeled, sectioned layout.
- 4 Prototypes and testing: 3 usability rounds on service-record resolution, related items and action-item workflows.
- 5 Delivered: a design system · an entirely new end-user UI · Template Designer.
Sources: the case text and Daniel's notes. No invented data.
{{ activeCase.researchNote }}
Read as text
- Methods: 18 user interviews (admins and agents) · 240+ survey responses · 6 competitors benchmarked · 3 usability testing rounds.
- Who: SysAid's in-house studio (led by Tomer Gilat), the PM and design partners.
- Design partners (interviews, live sessions, prototype tests). Valued: the reliability of Classic. Pain: complex UI · limited customization · clunky asset management.
- Customer surveys. Valued: customization · API integration · ticket tracking. Pain: customization complexity · unresolved tickets.
- Competitors (ServiceNow, Jira and 4 more). Valued: strong customization and dashboards. Pain: overwhelming UI · steep learning curves, industry-wide.
- Segments: small existing, need simple workflows, struggle with the outdated UI and migration · large existing, need advanced customization, face workflow strain · small new, want intuitive design and quick onboarding · large new, demand scalability, wary of steep learning curves.
- Recurring themes: the queue was overwhelming · bulk work was slow · non-technical teams could not shape their own templates.
Sources: the case text and Daniel's notes. No invented data.
{{ rp.t }}
{{ rp.d }}
{{ pe.d }}
{{ pr2.d }}
Every fix traced to a problem
The research pointed at four clear problems with the legacy queue. I designed a deliberate answer to each, and each answer shipped as a feature.
Read as text
- Row 1. Theme: the queue was overwhelming. Problem: an outdated interface, dense tables and text that made it hard to spot what was urgent. Move: a modern queue with chips, avatars and dynamic cues. Shipped: graphic chips. Shift: not stated.
- Row 2. Theme: bulk work was slow. Problem: losing to competitors with a dated look. Move: time-saving power, with inline editing and bulk actions. Shipped: inline edit, every cell edits in a single click. Shift: editing a ticket field, 6 clicks → 1 click.
- Row 3. Problem: a steep learning curve. Move: personal queue views to add, reorder and save columns. Shipped: custom columns and queue views. Shift: queue columns, fixed → configurable.
- Row 4. Theme: non-technical teams could not shape their own templates. Problem: dependence on support, where small changes needed pro services. Move: self-sufficiency. Shipped: Template Designer, no-code. Shift: building a ticket template, pro services → self-serve.
- Foundation, across all rows: one governed design system. Shift: UI components, ad-hoc → 50+ governed.
Sources: the case text and Daniel's notes. No invented data.
The main ticket table
The heart of SysAid. I rebuilt it around scannability and speed - clearer hierarchy, status and priority cues, bulk actions and multi-select - so agents move through queues with far less friction.
{{ activeCase.wireNote }}
- Priority: plain text became colored chips that read at a glance.
- Due date: time left shows as a bar, so urgent tickets stand out.
- Status: labeled chips replace plain text, so a ticket's state is quick to scan.
{{ qf.d }}
Ticket page & insight panel
I rebuilt the single ticket into a focused two-column view with a contextual insight panel (open SRs, relevant KB, time-to-repair) and a clear activity journey - plus complex reusable components like the multi-select assignee.
{{ tt.d }}
The design system
I created and maintained the design system from scratch - color, typography, an icon set and complex components with every state documented - so the whole platform stays consistent and ships faster.
What changed for admins
{{ activeCase.metricsNote }}
{{ mt.d }}
{{ activeCase.challengeTitle }}
{{ activeCase.challenge }}
The system they had
This is the interface operators actually worked in before we arrived - a dense grid of near-identical panels, color-coded state, and repeated controls with no hierarchy or search. Everything competed for attention at once. It set the bar the new system had to beat, and it is the reason a flexible, no-code, search-first console mattered so much.
Research without access to users
Classified meant no interviews, no analytics, no recordings and no way to benchmark competitors. So I worked through the people closest to the system. The Product Owner was effectively its super-user, who built and operated the screens and brought insight from the field. With the Product Owner and the development team I ran recurring on-site sessions at the client's offices, gathered as much internal client data as I could and mapped the commands operators fire most, the failures they chase daily and how critical uptime is to the whole operation. Then I iterated, by trial and error, until one design served every user level. Every decision traced back to that picture.
Read as text
- The frame, a classified program: no access to end users · no analytics · no remote sessions · competitor research blocked, because systems like this are classified.
- Outside the frame: operators, reached through the Product Owner.
- People inside: the Product Owner, the system's super-user, who built and operated the screens and brought insight from the field · the development team.
- Methods inside: on-site working sessions at the client's offices · internal client data, as much as could be gathered · a legacy system audit · a frequent-actions inventory of commands, checks and calibrations, ranked by frequency and criticality.
- The loop: iterative trial and error across different user levels · a Concept Design Review with the client and development · every iteration reviewed against real usage.
- Note: all manual, a pre-AI workflow.
Sources: the case text and Daniel's notes. No invented data.
From daily work to what shipped
With no analytics to lean on, prioritization came straight from the ranked frequent-actions inventory. Commands, checks and calibrations, ranked by frequency and criticality, became requirements, principles and a prioritized plan. Below, each daily need sits next to the answer that shipped and the shift it made.
Read as text
- Ranked by frequency and criticality → requirements, principles and a prioritized plan.
- Reaching a screen. Answer: tabs, where every new tab opens on search plus the common pages. Shift: menu digging → tab + search.
- Firing a frequent command. Answer: quick actions on the common pages. Shift: seconds, not menus.
- Running checks and calibrations. Answer: macros, step by step, with live progress and failure drill-down. Shift: expert-only → guided macros.
- Chasing failures. Answer: one real-time console with a live status panel. Shift: scattered → one console.
- Building a new operator screen. Answer: UI Builder, dragging elements from the ICD, no code. Shift: dev task → drag and drop.
- Across all five, different user levels: operators with 20+ years kept the dense layout of about 60 elements, and hierarchy and search were added instead.
Sources: the case text and Daniel's notes. No invented data.
Two concepts, one validated direction
Before committing to build, I ran a CDR - a Concept Design Review with the client and development - to validate a direction both operationally and technically. I brought two concepts to the table.
Read as text
- Reviewed with the client and development, operationally and technically.
- Concept A, tabbed workspace, selected. Navigation: browser-like tabs, each a full screen of operational elements. Real-time operation: built for it. Speed and feel: the least time and fewest clicks possible, fast and familiar. Outcome: earned technical and practical validation and became the operator console.
- Concept B, aircraft hologram, explored. Navigation: a 3D model of the aircraft as the navigation surface. Real-time operation: never gave real comfort for it. Speed and feel: looked striking, but more gimmick than tool. Outcome: set aside.
Sources: the case text and Daniel's notes. No invented data.
The client and development loved the tabbed workspace, and it earned the technical and practical validation to move forward - it became the operator console that follows.
Trade-offs I made
Real programs are full of tension between the ideal design, engineering reality and how people actually work. A few calls I owned:
{{ dc.idea }}
{{ dc.tension }}
{{ dc.call }}
The operator console
Live telemetry streams into configurable sections - sensors, meters, cameras, toggles and commands - while a status panel surfaces connection state and activity failures the moment they happen. Operators see, decide and act on a single screen, at speed.
Automated macros for maintenance & calibration
Routine check and calibration flows run as macros - step-by-step sequences with live progress, remaining time and a drill-down into every failure with its recommended action. Work that used to demand deep technical knowledge became a guided flow operators move through quickly.
Browser-fast navigation
Screens live in tabs, and every new tab opens on search plus the most common pages with their quick actions attached - so reaching any screen or firing a frequent command takes seconds, not menus.
The system behind the system
{{ activeCase.dsIntro }}
{{ df.d }}
Real frames from the IAI design-system and Element Index files in Figma - the reference developers implemented against.
What changed in daily work
{{ activeCase.metricsNote }}
{{ mt.d }}
{{ activeCase.reflection }}
Requirements-led, to a strict brand book
This was a short project, led by requirements rather than a research phase. I worked closely with the PM, the development team and the Clalit studio, to a brand book with specific do's and don'ts. Each requirement below has the design response it got.
Read as text
- At the center: a workshop portal for members of every health plan.
- Audience: every age, every level of digital comfort, diverse abilities. Response: a prominent search field and layered filters up front.
- Catalog: a wide range, held in person or online, from smoking cessation, alcohol withdrawal and weight management to many more. Response: filters for topic, audience, region, language and format, and the essentials on every card.
- Accessibility: strict adherence to accessibility principles. Response: high-contrast modes and accessibility testing throughout.
- Responsive: one experience from mobile to desktop. Response: catalog, filters and registration rebuilt for touch.
- Brand book: a clear brand book with specific do's and don'ts. Response: a portal style guide aligned to it.
- Registration: guide people through registration without friction. Response: one clear path to register.
- Around it: a short project, 3 months from brief to handoff · close collaboration with the PM, the development team and the Clalit studio.
Sources: the case text and Daniel's notes. No invented data.
From discovery to done
{{ activeCase.flowIntro }}
Read as text
- 1 Discovery and catalog: search, filters (topic, audience, region, language, format) and cards with date, time, seats and cost.
- If no online sessions are available: an empty state keeps the member oriented and offers a way back to step 1.
- 2 Workshop page: session details, the session list, a booking summary and a single path to register.
- 3 Sign-in and registration.
- 4 Summary and confirmation: personal details, consent and one clear action.
- 5 Success: an on-brand thank-you with Clalit's mascot.
- The same flow on desktop and mobile.
Sources: the case text and Daniel's notes. No invented data.
A style guide to keep it whole
{{ activeCase.styleNote }}
Built for every screen
{{ activeCase.mobileIntro }}
{{ activeCase.outcomesNote }}
One designer, product to brand
{{ activeCase.ovIntro }}
- {{ op.t }}
- {{ ob.t }}
Part 1 · Product
Operators needed control, not chat
{{ activeCase.researchNote }}
Read as text
- Wonderful: sells outcomes and hides the machinery.
- Jeen.ai: an AI operating layer sold to IT.
- Blocks: lets anyone build an agent in plain language.
- The gap: one hides the machine, one governs it for IT, one opens building to everyone. None of them gives one operator outcomes, spend and retrieval in one place.
- Scully's brief: outcomes, spend and retrieval in one place, for one operator. That gap became the brief.
- Method: competitor research, run fast with the AI agent team.
Sources: the case text and Daniel's notes. No invented data.
Read as text
- Inputs, shared by all three calls: a market gap (no one place for outcomes, spend and retrieval) · four people from the product's real roles: operations admin, analyst, content lead, viewer · constraint: not based on interviews.
- Call 1: the fleet view opens with outcomes. Shipped: the fleet dashboard, outcomes first, then the one alert worth opening.
- Call 2: cost got its own page, because an over-budget agent is an incident, not a setting. Trade-off: it cost a slot in a short navigation. Shipped: FinOps, spend per agent against policy, with the one over budget named.
- Call 3: Hebrew is built in. Shipped: bilingual EN/HE, RTL.
Sources: the case text and Daniel's notes. No invented data.
One designer, a team of AI agents
{{ activeCase.howIntro }}
{{ activeCase.pipelineIntro }}
Read as text
- Constraints: very tight timeframes · strict prioritization by urgency.
- AI agent team: UI/UX · animation · product branding · brand book · tone of voice · competitor research · user testing. The agent best suited to each task was the one used.
- At the center: Daniel, the only human designer. Owns product, design and marketing.
- What shipped: back office, 16 feature pages · design system, 478 variables and 5 color modes · development storyboard · marketing website, scully-ai.com · brand book · film · brand portal.
- The pipeline: 01 Prototype, live in Claude Design, every state real · 02 MCP into Figma, tokens and structure moved across, not redrawn · 03 Two Figma files, the system and the screens, linked · 04 Developers build from the files, not from screenshots.
Sources: the case text and Daniel's notes. No invented data.
A system you change in one place
{{ activeCase.dsIntro }}
Every feature is a script
{{ activeCase.handoffIntro }}
Script cover{{ cv.c }}
Sixteen features, four that carry it
{{ activeCase.flagshipNote }}
Watch two of them run
What I chose, and what I left
{{ activeCase.decisionsIntro }}
{{ dc.title }}
{{ dc.d }}
Part 2 · Brand
One lockup, one accent, a calm voice
{{ activeCase.identityIntro }}
- 1Navy lockup on cream and white.
- 2White lockup on navy and dark images.
- 3No third version: no amber, gray, gradient or outline.
- Cream#f4f1e9 · about 60%Ground · brand-cream
- Navy#0a0f2e · about 25%Ink and headlines · brand-navy
- Warm grey#55504a · about 10%Body text · text-body
- Amber#fe9f03 · 5% or lessAccent · brand-amber
White (brand-white #ffffff): cards only.
Agents that do the work, under your rules.
Plain, specific and calm. The senior architect who's done it.
A design system for people and AI tools
{{ activeCase.brandSysIntro }}
- Components
- 35
- Color tokens
- 39 x 2 themes
- Imagery families
- 7
- DS
- v1.6.1
| Pair | Ratio | Level |
|---|---|---|
| Ink on creambrand-navy on brand-cream | 16.6:1 | AAA |
| Text body on creamtext-body on brand-cream | 7.1:1 | AAA |
| Accent text on creamaccent-text on brand-cream | 5.3:1 | AA |
| Amber on navybrand-amber on brand-navy | 9.1:1 | AAA |
| White on navybrand-white on brand-navy | 18.7:1 | AAA |
| Text muted on creamtext-muted on brand-cream | 3.3:1 | Large only |
| Amber on creambrand-amber on brand-cream | 1.8:1 | Never text |
Navy Silk opens and closes; navy plates hold charts. The amber line is never cropped out.
A book for the rules, a portal for everyone else
{{ activeCase.bookIntro }}
-
Extended edition
113
pages · rules and wording
-
26
pages · slim edition, for teams and agencies
-
Recipe kit
106
pages · the prompts behind the imagery
Recipe kit · 1a Sculpted ribbon plate · part 1 of 2
- Fixed: keep word for word
- {Slot}: change within the range
Pure abstract texture photograph, no typography whatsoever. Soft sculpted matte ribbons of warm cream and pale ivory with faint cool pale-blue shadows, gentle diffused studio light from the upper left, subtle fine grain. {FORM: Parallel ribbons flow horizontally edge to edge; near the center, slightly above the middle, they gently crowd together and rise into one smooth calm audio-waveform swell, tallest at the center, tapering to flat quiet ribbons at both sides.} A single very thin warm amber highlight line runs along the top of the crest of the tallest ribbon only, not in a groove.
Slot range: 3 approved forms (horizontal swell, concentric arcs, diagonal pulse).
- Brand book, slim editionThe 26 boards behind this page.PDF · 6.6 MB
- Lockup, navyFor cream and white grounds.SVG · 12.3 KB
- Lockup, whiteFor navy and dark images.SVG · 12.2 KB
- Small SFavicons and app icons, 32px or smaller.SVG · 0.7 KB
- Silk backgrounds · 1920For slides, social and web.ZIP · 8 JPG · 2.0 MB
- Silk print mastersFor print and large screens.ZIP · 8 JPG · 21.5 MB
Portal message when reduced motion is on: Motion is reduced to match your device setting.
The portal's Pause button for the moving hero, reading: Motion off
prefers-reduced-motion: reduce
Three sources, one version line
- Brand book (Figma)Rules and wording
- From Brand book to Portal: wording: the book wins
- PortalSlim edition and downloads
- From Design system to Portal: files: same names
- Design systemValues and files
- From Portal back to Brand book: sync-check.py: portal text vs book
Every plan that touches one ends with a sync step.
Brand book v2.2 · DS v1.6.1 · Nov 2026book footer, 108 of 113 Extended and 24 of 26 Slim pagesBrand book v2.2 · DS v1.6.1 · Brand owner: Daniel Motzaportal, 8 section footersversion: 1.6.1DESIGN.md front matter, which names book v2.2
On all three: Brand book v2.2 · DS v1.6.1
A website an executive gets in 30 seconds
{{ activeCase.siteIntro }}
See it live: scully-ai.com (opens in a new tab)
A film led by one agent
{{ activeCase.filmIntro }}
Product and brand, shipped and in step
{{ activeCase.outcomesIntro }}
Mobbin