iOSEnd-to-End UXAI-AssistedIn Progress

QuickStop iOS

Role

Product Designer + iOS Developer

Type

Personal Project

Tools

Claude · Cursor · Figma · Figma MCP

Tech Stack

SwiftUI · UIKit · Convex

Overview

QuickStop is a convenience store app built around a single premise: give customers their time back. 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?

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

The Problem

The opportunity was to build for certainty— and let speed follow naturally from that. The five distinct user mindsets driving the project each have a different definition of “fast,” but share one unifying need: confidence that the trip will take exactly as long as expected.

Existing apps

that solve in-store uncertainty

Distinct personas

each with a different 'fast'

Unifying insight

certainty drives speed

User Research & Personas

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.

Marcus Hale, 32

The Commuter

Order-ahead, 90-second in-and-out

Speed

Reliability

Freshness

Discovery

Priya Ramanathan, 28

The Night Shifter

Curbside pickup, fresh food transparency at 3am

Speed

Reliability

Freshness

Discovery

Danny Reyes, 41

The Bulk Buyer

Group orders, business receipts, crew presets

Speed

Reliability

Freshness

Discovery

Zoe Kapoor, 19

The Impulse Local

Scan-and-go, discovery, three-tap max

Speed

Reliability

Freshness

Discovery

Sarah Mitchell, 38

The Emergency Errand

Sub-15min delivery, verified real-time stock

Speed

Reliability

Freshness

Discovery

Key Insight

Across all five personas, the unifying need is certainty— certainty that the item is in stock, that the line won't kill them, that the trip will take exactly as long as expected.

Information Architecture

The IA was worked out iteratively — proposing structures, stress-testing them against each persona's flow, and revising. Two key decisions shaped the final nav.

Scan & Go promoted to top-level tab

Originally nested inside Shop as a mode. Promoted because it's a mode of being in the store — not a browsing mode — with a fundamentally different input model (camera-first vs. browse/search). Zoe's three-tap constraint is much easier to hit from the tab bar.

Store tab merged into Home smart header

To keep the nav at five tabs, live inventory, hours, and locations were surfaced in Home's header rather than as a standalone tab. This pulls the 'certainty layer' closer to the first screen every user sees.

Final Nav — v0.3

[ Home ] [ Shop ] [ Scan ] [ Orders ] [ You ]

HomeSmart entry — reorder, quick actions, store statusMarcus, Sarah

ShopBrowse catalog, Order Ahead + Delivery modesZoe, Priya

ScanCamera-first in-store checkoutZoe, Marcus

OrdersActive + historical, all pickup/delivery methodsAll

YouProfile, payment, loyaltyAll

Shop Taxonomy

The Shop section required the most structural work — 10 top-level categories with subcategories, special filters, and two age-gated categories requiring a distinct verification model.

Hot Food & Pizza

Coffee & Hot Drinks

Cold Drinks

Snacks & Candy

Fresh Food

Ice Cream & Frozen

0718+

Beer, Wine & Spirits

0818+

Tobacco & Vaping

Grocery & Household

Health & Beauty

Design System

Before designing screens, the color system was established. The brand palette was extracted from Figma's Apple Design System file via Figma MCP, then exported as a production-ready Swift file — DSColors.swift — covering 70+ tokens across brand, system backgrounds, labels, fills, and separators, all with Light/Dark mode values.

brandPrimary

Teal · #30C5FF

Light & Dark identical

brandAccent1

Forest · #5C946E

Primary accent

brandAccent12

Sage · #80C2AF

Secondary accent

brandAccent13

Sky · #A0DDE6

Tertiary accent

AI Workflow note

DSColors.swift was generated by connecting to the Figma file via MCP and extracting variable values directly — removing the manual copy-paste step entirely. The token file bridges design and code: SwiftUI views reference Color.brandPrimary, never hardcoded hex values.

Screen Design in Figma

Screens were built in Figma using components from the Apple Design System library, with QuickStop brand tokens applied. The Figma MCP connection allowed writing and executing plugin code directly in the file — creating frames, placing components, setting fills, and wiring up auto-layout — rather than manually building each screen.

Onboarding (6 screens)

Value prop → Location permission → Category preferences → Sign-in → First order preset → Success + habit prompt

Shop Landing

Search bar, mode selector (Order Ahead / Delivery), 'The Usual' card, 10-category grid with age-gated lock badges

Cold Drinks Category

Subcategory chips, featured banner, sectioned product grid with real-time stock indicators

Screenshot coming soon

Product Detail

Product image, nutrition facts grid (Calories / Sugar / Caffeine / Serving), 'Frequently bought together' strip

Screenshot coming soon

iOS Development in Swift

The designs were ported to native iOS using SwiftUI and UIKit, using the DSColors.swift token file as the bridge between design and code.

Implementation highlights

Color tokens from DSColors.swift used directly in SwiftUI views via Color.brandPrimary, Color.backgroundSecondary, etc. — no hardcoded hex values in view code
UIKit extensions on UIColor for components that required UIKit interop
Asset catalog structure follows the Figma variable group hierarchy (Brand/Primary, Backgrounds/Secondary, Labels/Primary, etc.) — making design-to-code handoff mechanical rather than interpretive
Light/Dark mode handled entirely at the token level — no conditional appearance checks in view logic

Project Structure

The Swift project is organised around a strict separation of concerns, using an atomic design hierarchy for UI components and a feature-based structure for product areas.

Quickpitstop/ ├── Resources/ ├── Sources/ │ ├── App/ # Entry points │ │ ├── ContentView │ │ ├── QuickStopApp │ │ └── RootView │ ├── Components/ # Atomic design system │ │ ├── Atoms/ # Primitive, single-purpose components │ │ │ ├── DSBadge │ │ │ ├── DSButton │ │ │ ├── DSDivider │ │ │ ├── DSIcon │ │ │ ├── DSLabel │ │ │ ├── DSSpinner │ │ │ ├── DSTag │ │ │ ├── DSTextField │ │ │ └── DSToggle │ │ ├── Molecules/ # Composed components │ │ │ ├── CartItemRow │ │ │ ├── CategoryPill │ │ │ ├── PriceLabel │ │ │ ├── ProductCard │ │ │ ├── PromoBanner │ │ │ ├── QuantityStepper │ │ │ ├── SearchBar │ │ │ └── StockBadge │ │ ├── Navigation/ │ │ │ ├── DSTabBar │ │ │ └── DSToolbar │ │ └── Organisms/ # Full UI sections │ │ ├── CartSummary │ │ ├── CheckoutPaymentSelector │ │ ├── DSInsetSettingsMenu │ │ ├── DSNavHeader │ │ ├── ProductGrid │ │ └── PromoBannerCarousel │ ├── Config/ │ ├── DesignSystem/ │ │ ├── Extensions/ │ │ │ └── View+DS # SwiftUI view modifiers │ │ └── Tokens/ │ │ ├── DSColors │ │ ├── DSRadius │ │ ├── DSShadow │ │ ├── DSSpacing │ │ └── DSTypography │ ├── Features/ # Screen-level product areas │ │ ├── Account/ │ │ ├── Auth/ │ │ ├── Cart/ │ │ ├── Home/ │ │ ├── Orders/ │ │ └── Search/ │ ├── Models/ │ ├── Utilities/ │ ├── ViewModels/ │ └── PreviewMocks └── Products/ Package Dependencies: - ConvexMobile 0.7.0 - Stripe 23.32.0

Architecture Decisions

Atomic Design for Components

Components are split into three tiers matching the Figma file structure. Atoms are single-purpose primitives with tokens applied (DSButton, DSLabel) — no business logic. Molecules compose atoms into product concepts (ProductCard, CartItemRow). Organisms assemble full UI sections (ProductGrid, PromoBannerCarousel). This mirrors the Figma component hierarchy directly, making design-to-code handoff straightforward.

Design System Tokens

All visual decisions are centralised in DesignSystem/Tokens/: DSColors (brand and semantic colors), DSTypography (SF Pro type scale), DSSpacing, DSRadius (14pt cards, 10pt buttons), DSShadow, and View+DS modifiers. No hardcoded hex values or magic numbers appear in feature or component code.

Feature-Based Organisation

Product areas (Home, Cart, Orders, Search, Account, Auth) each live in their own folder under Features/. Each feature owns its views, with state managed through the shared ViewModels/ layer. PreviewMocks provides fixture data for SwiftUI previews without requiring a live backend.

Package Dependencies

ConvexMobile 0.7.0 handles real-time backend sync for live inventory, order status, and stock levels — directly addressing the core product promise of certainty. Stripe 23.32.0 powers payment processing for checkout flows.

Cursor-Assisted Development

The Swift implementation was built using Cursor with the project structure and DSColors.swift token file as persistent context.

Component scaffolding — Cursor generated boilerplate for each atom and molecule from a description of its Figma equivalent, with tokens applied from DSColors and DSTypography automatically
Token referencing — rather than looking up hex values or sizes, Cursor resolved the correct token for each use case from the existing design system files in context
Preview generation — PreviewMocks stubs were generated alongside each component so SwiftUI previews worked immediately without a backend connection
Refactoring — when token names changed during design system iteration, Cursor propagated the rename across all component files in a single pass

AI Workflow — What Actually Changed

This project was used as a test of how far an AI-assisted workflow could go end-to-end. The honest summary:

AI accelerated significantly

→Persona generation and synthesis — hours → under an hour
→IA iteration — proposing, critiquing, and revising structure in the same session
→Shop taxonomy — category naming, subcategory logic, age-gating model, edge cases
→DSColors.swift — extracted directly from Figma rather than transcribed manually
→Figma screen construction — plugin code written and executed via MCP

Still required human judgment

–Deciding which structural options were right (e.g. Scan & Go promotion, merging Store into Home)
–Visual taste — verifying designs looked right, not just structurally correct
–Scoping decisions — what goes in v1 vs. v2
–Swift architecture decisions during the native port

The net effect: the gap between concept and testable designs compressed substantially. The workflow didn't remove design judgment — it removed the time between having a judgment and seeing it rendered.

Product Demo

Native iOS build captured on device — browse, cart, and checkout in the QuickStop app.

Loading video…