About

Swivl is an all-in-one Field Service Management platform that helps contractors manage customer relationships, schedule jobs, create digital estimates, accept mobile payments, and capture leads — all from one app. The platform now serves 5,000+ signups across 10+ service industries, including HVAC, plumbing, roofing, and landscaping, with users reporting 44% weekly growth and 12+ hours saved per week on admin work.

Swivl's product philosophy is built around three principles: Transparent (real-time data, zero guesswork), Intelligent (AI that learns from usage patterns), and Simple (turning complex workflows into short, intuitive steps). These principles directly shaped the design decisions across the features I worked on.

Target User Persona

• Small and medium-sized field service management companies catering to 95% of the US market.
• Primarily non-tech-savvy users.
• Commonly use laptops, desktops, tablets, and mobile phones.
• Users might leave or will not remain as an active user if they don’t immediately understand them.
• Typically prefer guided instructions or templates for setup.
• Users might be using other field service management company softwares or non-field service management company softwares like sheets, doc, etc.

My responsibilities

I led the redesign of the role-based CRM features and designed several key new features from concept through to developer handoff. I worked in a team with 5 more designers where I was a Senior, so mentorship was a part of my work. I also adapted and documented the Shadcn design system.

Key features I worked on: AI Website Builder, Dashboard, Subscriptions & Credit System, Global map, Message Center, Smart Templates, Users & Roles and other.

Background

Swivl didn’t have the design system in first launch and the design looked chaotic and not professional. Since company planned to grow their platform they needed to organise design processes and decided to collaborate with the design agency who firstly choose Shadcn design system, changed colours to our branded and started adapt old screens.

Design Process

Discovery phase → Competitors review → Notes → Features prioritising → Design

First when i jumped into the project i started with discovery. I learned about the product specific, checked competitors , spoke to product managers to understand the mission and target users.

My first module was the Dashboard that gives users real-time visibility into current jobs, technician locations and status, business metrics, and leads in one place where i have to improve both ux and ui parts.

Open design in Figma

Target Users

• Admin/Super Admins who monitor business performance
• Operations & Finance Teams who manage tasks, payments, and bills
• Business Owners who need a quick glance at company health

Competitors analize

We analysed 4 main competitors: Workiz, Jobber, Service Titan and HouseCall Pro. Created comparison table of their dashboards and defined main features that we can implement in our product. After prioritised features with the product and development team i started the design.

Main problems & solutions

Problem

Five KPI cards, three colourful charts, a tabbed table, and a map were stacked in one long stream. Users had to scan everything to find what mattered.

Solution

Widgets are grouped into purpose-based sections: Finance, Jobs, Customers, Leads, AI Receptionist, Realtime Tracking, Open Invoices & Estimates, and Top Zones/Tags/Assets. Each has a consistent header, period label, and footer.

Problem

Create New Invoice / Estimate / Job / Add Costs" sat in a list beside the greeting and competed with the content.

Solution

A single Create button now lives in the sidebar, and contextual "+" buttons sit inside the relevant widgets (Jobs, Customers, Invoices). Actions are available where the user is looking at the data

Problem

Charts had no labels and were hard to read, and metrics gave no context for what they measured or how they compared.

Solution

Charts were simplified with labeled axes and a consistent palette; every widget now shows a period label, info tooltips, and trend badges against the previous month.

Problem

The Live Map and the task list lived in different places, so users had to connect them mentally.

Solution

Realtime Tracking now shows today's and tomorrow's tasks alongside technicians: job addresses on the map, live technician location once a task is in progress, and status badges. Teams can track efficiency in real time and resolve issues before anything is missed.

Problem

Cards like "Vault Balance" and "Total Customers" showed status but not what was happening in the business.

Solution

The Leads by Source widget now shows a funnel: leads → converted customers → jobs → estimates → invoices → revenue. Users see where leads come from (AI Receptionist, Instant Quote, Website) and how they turn into revenue.

Few more solutions

Components

Since every widget on the dashboard shares the same underlying structure — header, metrics, content, footer — I built a single master component with swappable slots and access-level variants (Full, No Access, Subscribe, Upgrade). This lets other designers customize existing widgets or create new ones without rebuilding the pattern from scratch.

Value Delivered

Measured across six weeks before and after the August 19, 2026 redesign · PostHog analytics

Read honestly: unique visitors dropped in the same window (449 → 319), consistent with fewer new customers reaching the platform rather than a design effect — the gain is in depth of engagement per customer, not raw traffic.

Next iteration: Empty-state widgets (Leads, Finance, AI Receptionist) each reach 180–230 customers but convert under 10% to a first action. This validates an earlier research note from the redesign's discovery phase — "Add call-to-action when data is empty" — and points directly to the next design iteration: a single, specific CTA per empty widget (e.g. "Add your first lead").

Subscriptions & Credits System

The existing per-feature subscription model created real business risk: relying on end-of-month billing exposed the company to payment defaults, AI usage spikes led to bill shock for customers, and Stripe's unit-price model made fixed and hybrid pricing hard to support. The team evaluated three billing approaches — hybrid, unified monthly, and unified pre-filled credits — and selected a prepaid credits model as the solution with the lowest financial and UX risk.

Check clickable prototype here (*some interactions don’t work properly)

Open prototype in Figma

Problem & Solution

Problem

Charging high-usage customers only at month-end exposed the company to real revenue risk — a failed payment meant losing that revenue with no safeguard in between. This was made worse by Stripe's pricing model, which requires a unit price × quantity structure and doesn't map cleanly onto fixed-rate or hybrid plans, making it hard to price features consistently or bundle them into tiers.

Solution

Moved to a prepaid credits model. Users buy credits upfront (Starter: 250/month free, Growth: 1,500/month, Scale Pro: 4,800/month, Organization: 12,000/month), and usage is deducted from an existing balance rather than billed after the fact — removing the payment-default risk entirely. A single credits currency also abstracts away per-feature unit pricing, letting each tier bundle a flat monthly allowance at a decreasing cost-per-credit as tiers go up (Growth: 3.3¢/credit, Scale Pro: 3.1¢/credit, Organization: 2.5¢/credit) — solving both the revenue-risk and the fixed-vs-usage-based pricing problem in one system.

Problem

Billing AI-heavy usage in one lump sum at the end of the cycle caused unpredictable charges and disputes.

Solution

Every AI feature (AI Estimate, AI Document Scanner, Instant Quote, AI Receptionist) has a fixed, visible credit rate (e.g., "60 credits/Estimate", "10 credits/scan"). The Features Usage table shows units used and credits consumed per feature in real time, so nothing is a surprise at renewal.

Problem

The old "All Bills" table showed failed payments (e.g., "Payment Failed") with no visible next step.

Solution

The new Invoice History shows a status per invoice (Pending, Paid, Failed) with an inline Pay action directly next to failed or pending invoices, so users can resolve issues without leaving the page.

Problem

The old structure split "Current Month / Swivl Features / All Bills / Shop Hardware" as separate flat tabs with duplicated cards for paid and free features.

Solution

Consolidated into three clear tabs — Overview, Features Usage, Manage Subscription — separating "what am I using" from "what's my plan" from "what have I paid," which better matches how the different personas (Business Owner, Finance Team, Operator) actually use this data.
*Shop Hardware feature was hidden for this phase.

Few more solutions

Impact (Apr – Sep, 2026):

AI Website Builder

Swivl's AI Website Builder lets home service and field service business owners generate a professional website in minutes, without design skills or a separate platform. Users describe their business, AI creates a first draft — content, sections, and images — and users keep full control to edit from there. Since launch, 80 customer websites have been published through the builder.

Business needs

The earlier version of the builder had no AI. Building a site meant manually configuring components — picking sections one by one, choosing a color palette and font, then publishing with no content actually written for you. It took at least an hour and still produced a generic, unpolished result with no lead-generation features like instant contact, scheduling, or chat.

The deeper cost was invisible: business owners were spending thousands of dollars a month on lead-generation platforms like Angi and Thumbtack — tools disconnected from their actual operations. Swivl repositioned the redesigned builder not as a general website tool, but as a customer acquisition channel built directly into the platform business owners already used to run their day-to-day work — jobs, scheduling, customer communication.

Research

Research covered Jobber, Wix, Durable, Framer, and WordPress. The team deliberately chose not to compete with general-purpose builders like Framer and WordPress, which are built for launching full-fledged websites as the end product. For Swivl users, a website isn't the goal — it's one channel feeding a business they already run through the platform. This reframing shaped every decision that followed: speed and simplicity over design flexibility.

Before: Users manually picked a domain, then manually selected which sections to include from a numbered checklist, chose colors and fonts with no content written for them, and published a static result with no lead-generation tools attached.

After: Users describe their business in plain language (or migrate an existing site by URL), AI generates the site's content and layout automatically, and users land directly in a live-editing view — web and mobile preview side by side, with each section's content, images, and design editable in place. Built-in Scheduler, AI Chatbot, and Instant Quote turn the published site into a lead-generation channel connected to the rest of the platform.

My responsibilities

I owned the design of the Website Builder — the business-facing tool used to create and edit a site — including the AI-generation flow, the live content-editing experience, and the template system. Another designer built out the templates under my direction, based on the structure and design direction I defined. In total, we designed 4 templates per section for the main site, plus 15 supporting pages (About, Media, Contact, Privacy Policy, Scheduler popup, and others).

I worked closely with the product manager and engineering team throughout: presenting design solutions, handing off to development with detailed annotations, testing the production build, and compiling a bug list for fixes before and after launch.

Workflow

Competitive research and market analysis: 2–3 weeks → Design → Engineering handoff → Launch (second week of January 2026). The product continues to iterate based on real usage.

Value delivered

• 80 customer websites published since launch
• 40 section templates (4 per section) plus 15 supporting pages designed and directed
• Lead-generation tools (Scheduler, AI Chatbot, Instant Quote) built directly into every published site

Key design decisions

1. AI drafts the site — it doesn't build the whole thing.

Users describe their business and select services; AI generates the initial sections, writes service-based copy, and picks relevant images. From there, users have full editing control — swapping images, rewriting text, adjusting design — avoiding the common AI-builder trap of a rigid, uneditable output.

2. Section-based editing instead of drag-and-drop.

Drag-and-drop adds complexity and lets non-technical users break their own layout. The redesigned builder uses fixed, editable sections instead — users can change content and images freely within each one (Header, Sections, Colours and Fonts, Footer, Scheduler, Chatbot, AI Estimate, SEO) without risk of breaking the page

3. Migration path for existing websites.

Users with an existing site can enter its URL, and AI generates a new Swivl-hosted version from it — removing the "start from a blank page" barrier entirely for businesses migrating from another platform.

4. Mobile web, not full mobile-app editing.

Most competitors lack a mobile version at all — website editing's multi-layered nature makes it hard to do well on a small screen. Rather than skip mobile or force the full builder onto a phone, mobile web supports core editing tasks while advanced features stay on desktop, so users can start or make quick edits without being tied to a desk.

5. Integrated lead generation, not a standalone site.

Every published site can enable a Scheduler (bookings go directly into the business's calendar), an AI Chatbot (24/7 lead qualification), an Instant Quote generator, and SEO optimization — each toggled directly from the same content panel used to edit the page.

6. Templates & Customization

Four templates per section — 40 items total — give visual variety without overwhelming choice. All templates are fully cross-compatible, so sections can be mixed and matched freely. Users can set an exact color palette and typography, including matching an existing brand's hex codes for brand consistency.

Some Other Modules

Smart Templates (Checklists)

The Checklist template type lets admins define structured, step-by-step tasks that field technicians complete on the job — covering safety checks, compliance steps, and quality control that standard custom fields can't enforce on their own.

Problem: Technicians often missed steps without structured guidance, there was no proof-of-work for safety or compliance tasks, and the system had no way to distinguish an optional data point from a mandatory procedural step.

What I designed: Both sides of the flow — the admin experience for building a checklist (sections, item types, required/optional toggles, AI-assisted generation) and the technician experience for filling one out in the field, including different input types (text, number, date, file upload, before/after photo pairs, signature) and completion states.

Global Map

A location-based view of every address type in the system — customers, suppliers, subcontractors, jobs — plus real-time technician location tracking, with search and drill-down into any pin's details.

Problem: There was no place in the product where a business owner could see all entities on one map and find the nearest available technician when something went wrong — a cancellation, an emergency job, a technician running late. Without this, reassigning work in an unpredictable situation meant checking schedules and addresses manually.

What I designed: This started as a component inside the Dashboard's Realtime Tracking widget. I took that pattern and scaled it into a standalone, full map module — expanding it to support more pin types, states, and filtering options per entity type (Technicians, Jobs, Suppliers, Subcontractors, Leads, Customers), plus a "Nearby" panel for location-based search.

Message Center

Swivl's unified communications inbox — one threaded view per customer, lead, or technician, combining SMS, email, and platform-generated transactional notifications (estimate sent, deposit paid, job scheduled). The same thread is accessible from the main Messages view or in context from Customers, Leads, Jobs, Tasks, Estimates, and Invoices via a side sheet.

Problem: Before this module, tenants had no single place to see customer communications. SMS went through Twilio, email through SendGrid, and system notifications through a separate sub-app — with inbound replies rarely converging into one per-customer view. Support tickets showed the real cost: tenants couldn't reference what had previously been sent to a customer when working accounts receivable, since the record was scattered across disconnected surfaces. Competitor research confirmed a unified message center as a retention-critical feature across the category (Jobber, Workiz, Housecall Pro, ServiceTitan).

My role: This was shipped first as an experimental feature, built directly from the product manager's prototype to launch quickly without a full design pass. I joined afterward to improve the production UX and compile a list of UI inconsistencies against the design system — including fixing a textarea that was unusable on mobile web and clarifying the visual distinction between incoming and outgoing messages, which hadn't been obvious in the original build.

Users & Roles

Gives admins full control over managing users and assigning roles and permissions — ensuring the right people have the right access for secure, scalable team management across field service operations.

Problem: The previous permissions setup was very basic — it didn't cover all modules or account for different types of access within a module. There was also no explanation of what access levels like "Technician Access" or "Partial Access" actually meant, leaving admins to guess at what they were granting.

What I designed: Role creation with granular, per-module access control (View Only / Full Access / Technician Access / Partial Access, with tooltips explaining exactly what each level permits), user invitation flows (via SMS, email, or both), and tracking of invited vs. existing users.

Design System documentation

I was also responsible for adapting the Shadcn design system to our brand colours and completely redesigning some components to make them more convenient for use in our files. Our design system includes around 70 core components. I created a set of rules and documented them in Figma, then in Notion, so any designer can open the file and check the correct usage instructions for each component.

Example of component documentation in Notion

Badge Component

The story behind

The idea for the Beep! app came from concerns that car owners have to use different services to solve their basic issues, such as washing the car, paying fines, buying insurance. There are also unpredictable situations on the road in which people do not know what to do. There is no single resource for searching, booking and paying for car services.

My Responsibility

I worked in a team with two other designers and was responsible for the Insurance and Loyalty modules end-to-end. I also maintained the design system and created illustrations. I presented designs to stakeholders and prepared them for developers.

Design Process

Requirements review → Competitor analysis → User flow map → High-fidelity prototype → User interviews & usability testing → Ideas validation → Design → Handoff → Usability testing

When I joined the project, a design system and part of the functionality already existed, but there had been no interaction with real users. We wanted to test ideas, so I created a high-fidelity prototype in Figma and conducted usability testing and user interviews.

Research

Participation in user interviews helped to find target groups insights to better address their core needs in the Beep! app.

I started by reviewing the requirements document and analyzing the most popular competitors (Hotline and Polis.ua). I created a user flow map in Miro to cover all edge cases and used it as the basis for a high-fidelity Figma prototype.

View full map on Miro

User interview & Usability testing

Our team conducted user interviews that helped us identify target groups and create user personas. I interviewed about 20 people (both offline and online) about how they use their car, how they usually buy insurance, and what influences their purchasing decisions. Their emotional connection to the car and level of involvement in car maintenance gave me a clear understanding of which features would be most valuable for them in our app.

Ideas Validation

We validated ideas together with developers and the product manager, focusing on features that required less effort but delivered high value. For example, we prioritized adding Apple Pay and Google Pay over payment with bonuses. Entering card details manually for a small discount felt annoying and time-consuming for users, while one-tap payments significantly improved the experience. Bonus payments were added later, once the main flow had become faster and smoother.

Design system

Beep! design system based on atomic design methodology. It helped me to maintain a consistent style and create new components for the Insurance and Loyalty modules.

The Design

The high-fidelity prototype was close to the final design, but usability testing revealed several issues that needed to be addressed before launch.

I started by designing the insurance experience, then expanded it by integrating loyalty features that encouraged user engagement and retention. These included paying for insurance with bonus points, earning bonuses through purchases, and a referral program that rewarded users for inviting others to the platform.

View prototype in Figma

Problem & Solution

Adding of existing insurance

Problem

Insurance that the user purchased outside the app is not displayed. There is no way to add it.

Solution

The Add current insurance feature has been added to several screens of the app. The user also receives notifications about the expiration of the insurance so that he can renew it or choose another insurance offer in Beep!.

Actions after an accident

Problem

Many people don’t know what steps to take after a road accident, including when to contact the police or their insurance company and how to document the incident correctly.

Solution

Provided users with step-by-step instructions on what to do after an accident. Users now can complete a European Accident Statement directly in the app.

Bonuses

Problem

Users want to purchase insurance and other services at a better price or receive rewards that provide benefits on future purchases.

Solution

Introduce a loyalty program that allows users to earn bonus points on purchases and redeem them to pay for insurance and other services. A referral program provides additional opportunities to earn bonuses by inviting new users to the platform.

Some more solutions

Finalisation

Impact: 200K downloads / 130K registrations (Q1 2021 – Feb 2022)

I went through all the stages of the interface design and in the end got a high-quality product that can be downloaded from the Apple Store and Play Market. I also use Beep! application for the insurance purchase and collect bonuses.

View case study on Behance

About

E-kyash is the first Belize’s digital wallet, fast and convenient solution to making digital payments and transfers in Belize. Users can top up their digital wallets from any of Retail Operators located countrywide or via a Belize Bank account or other financial institution in Belize. It can be used to make Peer-to-Peer transfers, Bill payments, Merchant Payments using QR Codes, Salary Payments, Payments for Government services. E-kyash users can also purchase electronic gift certificates, top up mobile phones, and conduct business to business transactions.

Business needs and requirements

Addressing high numbers of unbanked population and low card penetration rates, the task was to develop two applications for customers and businesses.

For the customer side flexible and scalable e-wallet application to enable robust online payment services. Business application for Merchants to accept QR payments and for Retail operators to take cash out or put cash into customers wallet.

My responsibilities

I was responsible for the end-to-end UX/UI design of both E-Kyash Customer and Business applications — from adapting our white-label digital wallet solution to developer handoff.

This included:

• Conducting stakeholder interviews to understand business goals, user needs, and pain points around financial inclusion
• Adapting our existing white-label digital wallet solution to the client's specific functional requirements and branding it according to the client's brand guidelines
• Designing the information architecture for a multi-role system (Retail operator, Merchant, Employee, Supervisor, Admin, Super Admin), ensuring each role saw only relevant functions
• Working closely with the business analyst to translate detailed functional specifications directly into high-fidelity Figma designs
• Establishing a visual system that used color to clearly differentiate user types (Merchants vs. Retailers, Business vs. Customer apps) while staying aligned with corporate brand guidelines
• Presenting design solutions to stakeholders, gathering feedback, and iterating across multiple review cycles
• Preparing final design specifications and assets for the development team

Workflow

Discovery phase (Interview with the client, Business requirements review) → Design → Presentation for the client → Client feedback gathering → Edits → Client feedback gathering → Preparing materials for developers → Testing

Discovery phase

The first step was stakeholder interviews. My team and I kicked off with interviews with the client to understand the problem, the users, and the business goals before jumping into design solutions.

Interview key insights:

• Focus on attracting unbanked users in Belize

• Give an opportunity to people in rural areas and villages make financial operations easily. So they can have access to cash in their wallets at the retail stores and then transfer money across the country.
• To make financial operations for young people under 18 accessible
• To integrate businesses in E-Kyash to expand payment options and attract more customers
• QR payments at the restaurants, supermarkets
• Transaction history is a financial education, users can track their spendings.

• E-Kyash is a daily-use platform for p2p, payments at the supermarkets, restaurants etc.

E-Kyash business

Business application for Retail operators and Merchants was the first product that I was working with. I received clear functional requirements from business analyst to create the designs.

User types: Retail operator, Merchant

Roles: Employee, Supervisor, Admin and Super Admin.

There are 2 user types and 4 roles, depending on the role, it was determined what functions would be available after authorization. Quick switching between accounts available as one manager can be both Retail operator and Merchant.

The main functions for the Retail operator was to Cash in and Cash out from customers wallet, for the Merchant - to Generate QR codes to receive payments from customers.

Business Admin have to get an overview of the business wallet balance and recent activity to collect and analyze real-time data, manage stuff.

Main functions needed to be accessible from the main screen and if any were hidden, it had to be done in a way that preserved the integrity of the interface.

From the design perspective color was used as the primary means to differentiate Merchants and Retailers. I used a light color scheme with bright accent buttons and account cards featuring graphics.

Features and functionality

E-Kyash Business Figma prototype (not full version)

View prototype in Figma

E-kyash customers

The customer application shares the same layout as the business application but uses a primary green color in accordance with the corporate brand guidelines. The app is available to both Belize Bank customers and non-customers, with transaction limits depending on the user's verification level. Bank customers go through a simplified verification process and, upon confirmation, are automatically upgraded to the Premium wallet level with the highest limits.

Main features and functionality

Onboarding & Verification

KYC. Users who want higher transaction limits complete a 5-step verification process: selecting a document type, photographing it, taking a selfie, and verifying their address via a utility bill, bank statement, or property tax statement. Once approved, the user's wallet level is upgraded automatically.

Money Movement

1. Cash in / Cash out. Users can cash in via QR code at a retail store or directly from a bank account, and cash out via QR code at a retail store or to a bank account.

2. Salary deposits. E-Kyash allows employers to deposit salaries directly into an employee's wallet without requiring a bank account — using their existing payroll process, employers simply enter the employee's phone number in place of a bank account number.

3. P2P and P2M payments. Users can send money to any contact by selecting them from their address book and entering an amount; the recipient is notified instantly. To pay a merchant, users can scan the merchant's QR code and confirm the payment.

4. Bill payments. Users can search for a payee and enter their account details, or save frequent payees as favorites for faster repeat payments.

5. Western Union payments. Users can receive Western Union transfers by entering the MTCN number, or send a transfer directly from their bank account.

6. Payment requests. Users can request money from one or multiple recipients by entering an amount and selecting recipients from a list, or by generating a payment link or QR code to share via messaging apps.

7. Split the bill. Users can split a bill evenly or unevenly among friends directly from their transaction history.

Engagement & Loyalty

1. Loyalty programs. Users earn bonuses for welcome sign-up, friend referrals, and social media engagement. Bonuses are credited to the wallet balance 1:1.

2. Gift purchasing. Users can send gift cards from various merchants to friends or family.

E-Kyash Customers Prototype (not full version)

View prototype in Figma

UI Kit

To ensure visual and functional consistency across both applications — and to speed up future development — I built a comprehensive UI kit from scratch: buttons, cards, form inputs, navigation patterns, and colors shared between the Customer and Business apps.

Value delivered

The results speak for themselves — both customer and business users quickly adopted E-Kyash into their daily banking routines:

Feedback from the client's leadership on the product's impact:

“E-kyash has revolutionized the way financial services are delivered today in Belize. The FinTech app has won widespread approval by both B2B and B2C bank customers with its usage growth rates exceeding exponentially. Together with Wallet Factory, we already have a strategy roadmap that will add much value to the Belizean market, drive financial inclusion, and bring not only modern financial services but also refreshing experience providing a brand new payment method for the everyday usage along with a lot of excitement to the Caribbean market and beyond.”

Agata Ruta, Head – Digital, Retail & Corporate Banking at Belize Bank Limited (Belize)