QuickStop

Overview

QuickStop is a convenience store app built around a single premise: give customers their time back. Convenience stores fail at the one thing in their name — lines, out-of-stock items, awkward checkout — so the app targets five distinct user mindsets, each with a different definition of “fast.”

This case study documents an end-to-end AI-assisted workflow: research and strategy, information architecture, interaction design in Figma, and a full port to native iOS in Swift.

01 · The problem

Current convenience store apps, where they exist at all, are glorified loyalty cards. They don't solve the core friction: uncertainty. Is the item in stock? How long is the line? Will my mobile order be ready, or sitting open on a shelf anyone can grab?

The opportunity was to build for certainty — and let speed follow naturally from that.

02 · User research & personas

Using Claude, five personas were developed from a bottom-up analysis of real convenience store use patterns — not broad demographics, but specific jobs to be done at different times of day. Each came with pain points, needs, and a priority weighting across Speed, Freshness, Reliability, and Discovery, which became the decision criteria for the rest of the project.

03 · Information architecture

The IA was worked out iteratively with Claude — proposing structures, stress-testing them against each persona's flow, and revising. The starting point was five tabs: Home, Shop, Orders, Store, You.

04 · Shop taxonomy

Shop was the most structurally complex section: ten top-level categories, each with subcategories and special filters, plus two age-gated categories that need a separate verification model.

1. 01Hot Food & Pizza
2. 02Coffee & Hot Drinks
3. 03Cold Drinks
4. 04Snacks & Candy
5. 05Fresh Food
6. 06Ice Cream & Frozen
7. 07Beer, Wine & Spirits (age-gated)
8. 08Tobacco & Vaping (age-gated)
9. 09Grocery & Household
10. 10Health & Beauty

Persona-driven features

05 · Design system setup

Before designing screens, I established the color system. The palette was extracted from Figma's Apple Design System file through Figma MCP and exported as a production-ready Swift file, which removed the manual copy-paste step entirely.

The output, DSColors.swift, is a SwiftUI + UIKit extension covering brand colors, system and grouped backgrounds, labels, fills, separators, and overlays — 70+ tokens, all with Light and Dark values.

06 · Screen design in Figma

Screens were built in Figma from the Apple Design System library with QuickStop tokens applied. Through Figma MCP, Claude wrote and executed plugin code directly in the file — creating frames, placing components, setting fills, wiring auto-layout — instead of me building each screen by hand.

SF Pro throughout, QuickStop teal for primary actions, iOS system greens, oranges, and reds for stock status, #F2F2F7 grouped backgrounds, and a 14pt card radius with continuous corners.

07 · iOS development in Swift

The designs were ported to native SwiftUI and UIKit, with DSColors.swift as the bridge between design and code. The project separates concerns strictly: an atomic hierarchy for UI components, and a feature-based structure for product areas.

Quickpitstop/
└── Sources/
    ├── App/            # Entry points
    ├── Components/     # Atomic design system
    │   ├── Atoms/        DSButton, DSBadge, DSTextField…
    │   ├── Molecules/    ProductCard, StockBadge, CartItemRow…
    │   ├── Navigation/   DSTabBar, DSToolbar
    │   └── Organisms/    ProductGrid, CartSummary…
    ├── DesignSystem/
    │   └── Tokens/       DSColors, DSTypography, DSSpacing,
    │                     DSRadius, DSShadow
    ├── Features/       # Home, Cart, Orders, Search, Account, Auth
    ├── ViewModels/
    └── PreviewMocks

08 · AI workflow — what actually changed

The workflow didn't remove design judgment — it removed the time between having a judgment and seeing it rendered.

09 · Open questions & what's next