ANODA Discuss your product

Quality inspections, from phone to decision

Qarma is a quality and compliance platform for brands, retailers and their suppliers.We designed its web product, inspector app and marketing site.

Qarma Corrective Actions dashboard: findings with their supplier, production unit, responsible and approver, created, resolved and due dates, and a status of open, in review or closed; Qarma mobile app, a corrective action: Exit Sign Missing, its due date, the approver, a comment, a photo of the new exit sign and Resolve
Web + mobile
a management platform and one app for iOS and Android
Product
then site the product first, the marketing site after
2021–22
releases one continuing engagement

Qarma helps brands and retailers check the quality and compliance of what their suppliers make: inspections, audits, defects, reports and the fixes that follow. We did end-to-end SaaS product design for its web platform and one mobile app for inspectors , with a style guide and UI kit on Qarma’s existing identity, then the marketing site . Development was not part of our work.

What runs through the product

One chain, from an order at a supplier to a problem fixed:

  1. Planning

    • Suppliers
    • Orders
    • Inspectors

  2. Inspection

    • Checklists
    • Photos
    • Comments

  3. Defects

    • Severity
    • Quantity
    • Category

  4. Report

    • AQL
    • Conclusion
    • Approval

  5. Follow-up

    • Corrective actions
    • Evidence
    • Approver

  6. Insight

    • Defect analytics
    • Supplier audits
    • Exports
Floor Desk
The same inspection captured on a phone and read on a desktop.
Specific Consistent
A checklist per product category, in one shared structure.
Found Fixed
A defect stays attached to its evidence, its owner and its approval.

An inspection report, read before it is approved

Found
A quality manager approves or rejects an order from the report, and a page where the item, the defects and the approvals weigh the same hides the decision.
Decided
A report that reads in order: which item and order, who inspected it and when, the status with each approval, then the defects against the AQL limit and the checkpoint results.
For the user
A manager sees whether the order passed, and why, before downloading the full report.
Qarma inspection report for Leather Chair 18322: order details with order and item numbers, supplier, location, quantities, inspector and date; status with the inspector’s conclusion and the approver both approved; a summary of defects against the AQL maximum; checkpoint remarks; and watchers
After: an inspection report in the web product; all data is example data

  1. Which item

    The product, its order number and the inspection type.

  2. The order and the verdict

    Supplier, quantities and inspector beside the status, the inspector’s conclusion and the approver.

  3. What happens next

    Change the status, send it to a second inspection or create a follow-up task.

  4. Defects against AQL

    Critical and major defects, the AQL maximum and the total, then checkpoint results.

How the work progressed

The product’s structure first, then its screens and style, then the files for each release and the site built on them.

  1. Information Architecture

    How planning, inspections, checklists, reports and follow-ups connect across the web and the phone

    Artifact The product structure and its main flows

  2. UI & Design System

    How dense quality data reads at a desk and in a factory, in Qarma’s own identity

    Artifact Web and mobile screens, a style guide, a UI kit and an illustration style

  3. Delivery

    What each release needed, and how the site should explain the product

    Artifact Client files per release, the marketing site, product-feature visuals and a motion set

Two ways into an inspection

Found
An inspection starts in the field with an order, a barcode or several inspections at once, and it belongs to a stage of production that decides what gets checked.
Decided
On the phone, one list of planned, in-progress and reported inspections with every way to start one; on the web, a top menu for the dashboard, inspections, checklists and compliance.

  1. Starting an inspection on the phone

    Scan a barcode, pick an order or item, or combine inspections and choose their type.

    Open the full map
    Qarma inspector app: the inspections list with Combine Inspections, Scan Barcode to find Inspection, Start Inspection and Quick Inspection, the barcode scanner, and the sheet to choose an inspection type to combine

  2. Inspection types along the supply chain

    Pre-production, inline, final, container loading, warehouse, end-user and headquarters audits.

    Open the full map
    Qarma inspection types drawn in the product’s illustration style and linked in order: preproduction, inline, final, container loading, warehouse, end-user and headquarters
Qarma web header: the logo, Dashboard, Inspections with its dropdown, Checklists and Compliance, search, the user’s profile and the language switch

One top menu on the web

Dashboard, Inspections, Checklists and Compliance, with search, the profile and the language beside them.

  • Information architecture
  • Mobile inspection flows
  • Web navigation
  • Illustration style

Nine jobs, from the plan to the fix

Planning first, then the inspector’s and the auditor’s work on the phone, then what quality teams do with the results. Every name, figure and date on these screens is example data.

Inspections planned by supplier, order and inspector

Found
A quality team books inspections across many suppliers and orders, and a list of dates doesn’t show who is where, or which orders are still waiting.
Decided
A week calendar split into supplier self-QC, booked and planned inspections, each supplier with its progress, and an orders table below with the supplier, the inspector, the status and the order lines.
Qarma planning: a week calendar from Mon 19 to Wed 21 July with supplier QC, booked and planned rows and inspectors with their counts, and an orders table with order number, supplier, inspector, a status bar and order lines

The inspection itself, on the phone

Found
An inspector works through dozens of checkpoints on a factory floor, and a defect written up later loses its photo, its severity and its count.
Decided
A checklist grouped by section with each section’s progress and a camera on every checkpoint, and a defect screen that takes the photo, the severity, the quantity affected, the category and a comment in one place.
Two phone screens of the Qarma inspector app: a checklist with material status, process and product sections and camera buttons per checkpoint, and a defect with a circled photo, major severity, four items affected, the category Fabric Contamination and a comment

A checklist for each product category

Found
Leather goods, suits, outerwear and socks fail in different ways, and one generic checklist either misses those checks or buries them.
Decided
Checklists built per category in one shared structure: packing, product overview, product detail and on-site checks, each with the checks that category needs and whether it takes a photo or a scan.
Qarma checklist for leather products: packing and package, product overview, product detail, and on-site checks such as lot shading, mold and mildew, hand feel, smell, cracking and adhesion tests
Qarma checklist for suits and formal wear: hanging-pack packing checks, product overview, product detail with the hang loop, and on-site checks such as metal detection, fabric weight and stitches per inch

Supplier audits, planned and walked on the phone

Found
An auditor visits several factories, and each audit needs its address, its checklist and a score that adds up by section.
Decided
The auditor’s planned audits with each supplier, unit and address; a checkpoint with a photo, a rating and a comment; and an audit summary that scores each section before it is submitted.
Three phone screens of the Qarma audit flow: My Planned Audits with supplier, production unit and address, a checklist question on lighting with a photo, a rating and a comment, and the Audit Summary with section scores and Submit Audit

The audit report, for the office

Found
A factory audit ends as a document, and a quality team reading it on the web needs the verdict before the details.
Decided
The audit’s details, the auditor’s comment and status first, then each section’s checkpoints with their results and a summary score, and the qualified-audit report to download.
Qarma audit report on the web: audit details with the production unit, date, auditor, checklist and location, checkpoint remarks by section with a summary score, the auditor’s comment with Reported status, and the Qualified Audit report cover

Defects, counted across inspections

Found
Hundreds of defects across suppliers mean nothing as a list; a quality team needs to see which categories and which defect types keep coming back.
Decided
A distribution of defects by category, a table of categories with minor, major and critical counts, and the defect types behind each category.
Qarma defect analytics: a defects distribution chart, a table of categories such as packing, fabric, sewing, accessories and finishing with minor, major, critical and general counts, and the defect types of the packing category

Messages across countries and languages

Found
Quality teams and suppliers work in different countries and languages, and a question about a defect that nobody can read stalls the fix.
Decided
Messages attached to the work, with photos, and a Translate link under every message.
A Qarma conversation: a quality manager, shown with her photo, asks about major defects in a report and sends a photo of broken wood; the supplier, shown with his photo, answers that the line is fixed; each message has Translate, surrounded by flags of different countries

Users, groups and roles

Found
Admins, inspectors, suppliers and local admins see different things, and access set one person at a time goes wrong as teams grow.
Decided
A users table with each person’s role and groups, filters by group, role and status, and an approval card that shows who concluded and who still has to approve.
Qarma users table with name, email, role such as admin, user, inspector and supplier, and groups such as China, Vietnam and Factory A, and a status card where the inspector’s conclusion is approved and the approver is pending

Corrective actions, from finding to fix

Found
A finding without an owner, a due date and proof of the fix stays open, and nobody knows until the next inspection.
Decided
A corrective actions dashboard with every finding’s supplier, unit, responsible and approver, dates and status, and on the phone the action itself: what to do, by when, the approver, a comment, a photo and Resolve.
Qarma corrective actions: the web dashboard with findings, suppliers, production units, responsible and approver, created, resolved and due dates and status, and a phone with the Exit Sign Missing action, its approver, a comment, a photo of the new sign and Resolve

A style guide on Qarma’s own identity

Found
The web product, the reports, the mobile app and the site had to look like one Qarma, built on the identity Qarma already had.
Decided
A style guide and UI kit built on the existing identity: type, colours, a background blur, buttons and an illustration style, reused across the web, the phone and the site.

Type and colour, set once

Inter in every weight, and a palette of Qarma’s greens and navy with red, yellow and violet as additional colours.

  • Qarma style guide page About Font: Inter, a variable family, with its weights from Thin to Black
    Type: One variable family for the web, the app and the site.
  • Qarma style guide colour palette: main colours green, navy and light blue, and additional red, yellow and violet, each with its hex code and opacity
    Colour: Main colours, then the additional ones.

Buttons in each state

Round add and remove buttons and the main button, each inactive, active and on hover.

  • Qarma buttons: green add and red remove bubble buttons and the main button, each shown inactive, active and on hover
    Inactive, active, hover

Where the product ended up

Qarma’s web product and its mobile inspector app designed end to end: planning, inspections on the phone, category checklists, defects, reports with AQL, supplier audits, analytics, users and roles, multilingual messages and corrective actions, on a style guide and UI kit built on Qarma’s identity.

Then the marketing site and its product-feature visuals, and a motion set.

a management platform and one inspector app
Web + mobile
releases in one continuing engagement
2021–22

In the client's words

ANODA helped bring the inspection workflows into a consistent interface direction. We appreciated the attention to information hierarchy and multilingual layouts, giving us concrete designs to review across the product’s different tasks.

Philip Mahler CMO, Qarma

5.0

Afraid your quality data won’t fit a phone in a factory?

In Qarma, checklists, defects and reports read on an inspector’s phone and on a quality team’s desktop, and stay connected from the photo to the fix. Show us yours, and we’ll tell you where it breaks.

Discuss your product Explore more case studies

What we brought to Qarma

The product

The work