Overview
- The problem
- Turning an AI-generated image into something wearable involves more than getting a striking result. People need a clear route from photo and style choices to a product they can inspect before ordering.
- My contribution
- I designed the mobile UI/UX concept across photo input, style selection, generation feedback, result actions, product preview, shipping, payment, confirmation, and receipt states.
- The outcome
- A connected Figma design concept for an AI creation-to-commerce journey, with inspectable choices before checkout.
Problem
The supplied Figma section shows a connected mobile flow from photo input and style choices to generation, result actions, product preview, and checkout. It contains interface states and prototype organization, not a research protocol, participant findings, or production analytics.
The challenge: connect creative intent to a purchasable object
The GoCoco section is organized as a long mobile journey: onboarding, sign-up, photo input, styles, generation, result, product application, preview, shipment, payment, confirmation, and a return home. The challenge documented by the design is continuity: the artwork someone creates needs to remain connected to what they configure and pay for.
The file provides interface and state evidence, not a research report. Pain points in this case are design questions raised by that journey, not interview findings or analytics discoveries: what input is needed, what is happening while the image changes, when the result can be edited, and what exactly is being ordered.
My Role
- Company / product context
- GoCoco AI · Personal mobile product-design concept
- Users
- People exploring personalized merchandise made from a photo and AI-styled artwork. This is the design scenario, not a research-validated persona.
- My role & scope
- I designed the mobile UI/UX concept across photo input, style selection, generation feedback, result actions, product preview, shipping, payment, confirmation, and receipt states.
- Evidence available
- Original project narrative and design artifacts retained in this case study.
Process
The source organizes screens into input, styling, generation, product application, and purchase stages. It includes alternative product-application loading states and several shipping/payment form states. Those are inspectable design variations, not a chronological experiment log or evidence that one option outperformed another.
- Choose a photo source
- Capture or select an image
- Choose a visual style
- Wait for and inspect the result
- Apply artwork to a product
- Configure and preview the item
- Provide shipping and payment
- Review, pay, and receive confirmation
From photo input to an inspectable style choice
The introduction presents the product as Snap, Design, Wear. The home state translates that promise into two visible actions: Photo Gallery and Take a snap. This makes the input decision concrete rather than asking the user to begin with an unspecified creative request.
Original onboarding and home designs. They describe the intended entry, not onboarding-conversion results.The capture screen uses familiar camera controls. The next state keeps the image visible while named presets such as Cyberpunk, Fairyland, and Future provide a style choice. Create Own Style is also present, but these frames do not establish how custom prompting or model configuration would work.
Input and style are separate decisions. The supplied reference photos are design imagery, not evidence of model performance or identity consent.Design the wait without pretending it is the result
The generation state keeps the input and style controls in context, shows Generating your photo, and makes Apply to Product unavailable. An advertisement occupies the middle of that wait. Later frames use a different Applying Your Image to Real Product state to connect the artwork to a product preview.
Two distinct processing states in the source. Progress indicators and ads do not establish actual latency, completion percentage, or a working advertising integration.This creates a real trade-off in the concept: an ad-supported flow may support access, but it can compete with the information someone needs while waiting. Before implementation, the experience needs clear separation between advertising and system status, together with cancellation, retry, and failure behavior. Those recovery paths are proposed next work, not completed research or verified functionality.
Key Decisions
The experience combines an uncertain creative result with a concrete purchase commitment. Style selection and result review need room for correction before ordering. Ads compete with generation status, while preview accuracy, image consent, print requirements, and payment behavior need validation beyond interface mockups.
Key design decisions
Start with an image, then make the style selectable
Gallery and camera entry points support an existing image or a new capture. Named style choices provide a more structured starting point than an empty prompt alone.
Inspect the photo and style flowKeep creation separate from the purchase commitment
Download, sharing, adjustment, and Apply to Product surround the generated result. Product preview is a separate step before shipping and payment.
See result actions and product previewReview the configured product before paying
The confirmation design groups the item, delivery, fees, address, and payment method with Change actions. It creates a review boundary before Pay Now.
Review checkout and receipt evidence
Trade-offs
- Structured style presets reduce the need to invent a prompt, while custom-style creation needs its own explanation and boundaries.
- Advertising during generation competes with progress information and should not obscure cancellation or recovery.
- A separate product preview gives the user another decision point, but cannot guarantee print accuracy without production checks.
- A staged checkout clarifies the sequence while adding screens; its value depends on preserving the configured item and making corrections easy.
Final Solution
The selected original screens below show how the result becomes a configured product, then an order the user can review. They preserve the design's appearance and sample content; the portfolio does not simulate a working generator, merchant, or payment service.
Make the result a decision point
The generated result exposes download, share, adjustment, style options, and Apply to Product. It is not treated as an automatic order. The next screen places the artwork on a T-shirt and exposes product and color choices with a price and Place Order action.
Original result and product-preview designs. The illustration and sample price are not a print-quality guarantee or current commercial terms.This boundary matters because image satisfaction and purchase confidence are different decisions. A convincing preview still needs practical information about crop, print area, color, size, materials, and fulfillment. The visible product choices document the interface direction; physical production and preview accuracy have not been validated in the supplied record.
Carry the configured product into checkout
The purchasing flow uses named steps: Product Preview, Shipment, Payment, and Confirmation. Shipping fields have visible labels, and the payment design presents method choices before card details. The disabled Continue examples represent intended prerequisites, not verified validation logic.
The source documents the intended form states. It does not establish provider support, payment security, stored-card behavior, or completed transactions.Confirmation brings the artwork back into view alongside the item, delivery, tax, administration fee, address, and payment method. Change actions keep address and payment review actionable before Pay Now. The receipt design then offers a reference, payment details, Get PDF Receipt, and Back to Home.
These are separate design examples. The confirmation total is $18.7 and the receipt shows $20.0; this mismatch needs reconciliation before implementation and is not presented as a real transaction.Outcomes
The outcome is the original mobile Figma design concept. No launch, conversion uplift, generation-quality score, print fulfillment result, or autonomous agent capability is established. A visible source inconsistency, $18.7 at confirmation versus $20.0 on the receipt, is recorded as a validation issue rather than treated as a real transaction.
Evidence & limitations
The original Figma frames establish interface design, not a launched app, working AI model, print pipeline, payment integration, or autonomous agent. Sample people, generated portraits, prices, payment details, dates, and progress indicators are design content. No research sample, production analytics, or impact metrics are supplied.
The happy-path frames do not establish generation recovery, print accuracy, pricing consistency, secure payment, or real-user comprehension.
What to validate next
The following is a proposed validation plan, not research already conducted:
- Test whether people understand the photo requirements, style choices, and difference between creating an image and ordering a product.
- Evaluate generation wait, advertising comprehension, cancellation, failure, retry, and what happens when a result is unsuitable.
- Compare the preview against a real sample and test how people interpret print placement, color, size, and product options.
- Reconcile order totals and preserve product, delivery, and payment details through edits, failed payment, duplicate submission, and receipt generation.
- Before release, define consent and image-retention rules, content rights and safety boundaries, payment responsibilities, and task/funnel baselines.
Learnings
- What worked in the design
- The design separates choosing an AI result, previewing a physical product, and committing to payment.
- What I would change next
- Resolve the order-total mismatch, design generation/payment failure and retry states, validate consent and image retention, and test the full creation-to-order task before measuring a live funnel.
Delivery and reflection
The design connects an expressive AI creation moment to a more deliberate purchase journey. Its strongest distinction is the decision boundary between liking an image, applying it to a product, and committing to an order. The next step is to validate that continuity, including the uncomfortable states that the successful path alone cannot explain.
