Internal order-processing & fulfillment platform

Design Strategy

Workflow Mapping

Based on the interview, I mapped out their existing workflow to identify where it could be streamlined. This map became my blueprint for the information architecture, the actual screens, and the prompts I used to guide the AI-assisted build.

Sitemap

Before wireframing, I mapped out a sitemap to cover all of the processes of the business, laying out the screen hierarchy so I knew what pages existed and how they connected before designing any of them.

AI-assisted coding

I drafted a working document laying out the intent behind the app, what it was and wasn’t meant to do, then enumerated each screen with its expected functionality, including both happy-path and sad-path scenarios.

I used a prompt to translate this draft into a formal Product Requirements Document, referencing the workflow map to show expected behavior and feeding in the design system and UI wireframes as visual references.

After a few rounds of back-and-forth, the app was live on localhost for testing.

Debugging

The initial build was still full of bugs. As a debugging discipline, I worked through the system role by role, starting with the agent account, then admin, then logistics.

Early debugging passes covered a lot of ground, so for each issue I explained which part of the flow was faulty and what my intended behavior was. I used AI to help package this into a structured QA document, and feed it to AI as follows:

Use the attached document as your reference for the changes. Before making any edits, ask me clarifying questions until you're 100% certain of the intended direction.

As bugs became fewer and more minor, I used the following formula to hyper-focus on a single element or feature at a time.

[account]->[screen name]->[element]

1 [Current behavior]
2 [Intended behavior]

For example:

Agent account - Overview page - Create an order button
1 Clicking the button redirects to a 404 error page
2 Clicking the button should redirect to a blank Order Form page

For context, I was using Claude Sonnet 4.6. Even though I’d fed it my design system, it still defaulted to plain Tailwind styling on some elements, making the initial build visually inconsistent with my design.

This was a minor annoyance rather than a blocker, so for the first pass, I intentionally prioritized functionality over UI polish and planned to reconcile the visual details later.

Code review

II reviewed a prompt from a fellow vibe coder, checking it for prompt injection risks and structuring it around four review criteria: security, correctness, performance, and maintainability. I set this as the AI’s standing reference for whenever I asked for a code review going forward.

The first round of code review actually broke some elements, making them unusable so I ran additional rounds of QA and debugging to recover. Since then, I’ve made code review a standard step whenever major changes are applied.

Outcomes & Impact

Agents

• Order processing time dropped from the average of 10 minutes to 3 minutes per order.
• Agents have a monthly quota of 60 orders to qualify for commission. With the app, one agent cleared her quota including a backlog of unprocessed orders within 2 days.
• Automated invoicing, order enumeration, and in-app recording eliminated the intake, computation, and recording errors that used to cost the business money. Mistakes from human judgment, like picking the wrong item or variant, or mixing up orders, still happen and are outside what the platform can fix.
• The owner can now accurately track each agent’s fulfilled orders, so commissions are calculated and paid correctly, with zero disputes.

Overall operations

• Freed the owners’ time from day-to-day admin tasks. That reclaimed time went into marketing and fulfillment which directly attracted more customers.
• Orders are now verified through an invoice before any payment is made, cutting order-intake mistakes to near zero.
• Payment tracking is streamlined, with payments monitored and verified before delivery.
• Procurement is tracked end-to-end, preventing mistakes in quantity, size, and variety.
• Fulfillment status is tracked at every stage, visible to all users.

Logistics

• The team can trust the records they’re working from, without double-checking for errors which gave them more time for item verification.
• They’re notified immediately when an order is fully paid and ready to ship.
• Sending tracking numbers to customers is fast and straightforward.
• Real-time status updates eliminated the need for manual reporting. Shift handovers are now seamless. The lengthy handover report has been eliminated entirely.
• The team’s focus has shifted from status-chasing to quality control: verifying item accuracy and shipment details.