Photo collages, screenshot mockups and video editing in one workspace. I designed the new app experience for iPhone, iPad and Mac, alongside a website that makes the product easy to understand.
A small display makes every extra control a tradeoff: more tools can mean less room to see the result. The redesign makes the main creative tasks visible, keeps detailed adjustments contextual and preserves a clear route back to the canvas.
Put the main jobs in the main navigation
Layouts, Video, Frames and Background belong in the primary toolbar. They describe what people want to make, so users can recognize the next step without searching through a generic More menu.
Reveal precision when it is useful
Cropping and image adjustments sit with the selected image. Inserting content starts from the canvas. This keeps specialist controls close to their object and leaves the main navigation focused.
Keep the result and the next action visible
A compact tool panel leaves the composition in view. Labeled controls, a clear selected state and a consistent Done action help people understand where they are and how to return to editing.
Make experimentation recoverable
Undo and redo stay easy to find, while Export remains a distinct final action. People can compare a layout, frame or background without treating each change as a commitment.
02 / Interface in use
One visual language. Different creative tasks.
The same hierarchy, selection feedback and panel behavior carry through layouts, device mockups and video. These are real app captures with demonstration content.
Layouts within reachThe preview and layout choices share the screen.Choose by seeingFrame thumbnails show the option before it is applied.Video as a primary taskPlayback and timing belong beside the moving result.
03 / Adaptive design
Shared logic. Space used differently.
Consistency does not require identical placement. iPhone uses a bottom toolbar and compact panels. iPad and Mac use the wider workspace for a tool rail and side inspector, leaving more of the canvas visible while adjusting a composition.
The design work spans information hierarchy, touch interaction, visual feedback, reusable UI patterns and localization. A recognizable accent color and selection language connect the surfaces without turning the phone into a miniature desktop.
iPad · touch with more roomLayout choices stay beside the composition.Mac · a dedicated editing workspacePersistent tools support detailed work on a larger display.
04 / Product website
Help people understand the product before they open it.
The new Collage Easy website brings the same product story to the web: make a collage, present a screenshot or create a video. Real interface previews, short feature explanations and a clear App Store route connect discovery with the app.
Responsive layouts and naturally localized copy make the experience work across screen sizes and languages. Feature guides give each creative task a useful entry point.
The current Collage Easy website. The original app icon connects the website to the app.Behind the interface: AI product designAccess, credits, privacy and recoverable failure05 / AI product problem
An AI action has cost, trust and failure states
A prompt field and a result image do not make a viable AI product. Every action can carry variable provider cost, sensitive user content, upload latency, safety rejection, timeout, rate limit or entitlement ambiguity. The experience needed to remain understandable while the backend enforced rules the client could not safely own.
Value
Useful creative outcome
The flow must stay focused on editing and export rather than exposing infrastructure complexity.
Economics
Variable model cost
Feature-level limits and pricing have to protect margin without making usage feel arbitrary.
Trust
Photos and prompts
Provider secrets stay off-device, while analytics excludes user photos, prompts and image content.
Resilience
Failures should not feel like theft
Temporary provider errors, timeouts and safety rejects require clear states and appropriate credit refunds.
06 / AI workflow
Entitlement to outcome
01Choose an AI editing action
02Check Pro access or credits
03Validate and compress input
04Enforce quota and process
05Return result or explain and refund
System boundary
Client UX → entitlement state → server policy → AI provider → result or recoverable failure
The client explains access and progress. The server owns hard usage limits and provider credentials. The product decides which failure states consume a credit and which must reverse the charge.
07 / AI decisions
Product economics encoded as behavior
Access model
Keep the core editor useful for free, add Pro entitlement for ongoing value and use consumable credits for variable-cost AI actions.
Feature limits
Use feature-specific allowances instead of one global number because provider cost and perceived value differ by action.
Hard control
Pair client-side guidance with server-enforced D1 quotas so a modified or stale client cannot bypass policy.
Cost ceiling
Default to a lower-cost 1024 by 1024 processing mode and cap expected feature cost relative to its price budget.
Failure fairness
Refund usage on safety rejection, rate limit, timeout and temporary provider failure when no usable value is delivered.
Purchase safety
Grant credits idempotently from the StoreKit transaction ID so a repeated transaction cannot duplicate value.
08 / Guardrails
Limits that protect users and the business
Global stop
500 AI actions per day
A server-side kill cap limits unexpected provider spend across the product.
Installation limit
100 purchased-credit actions
A daily per-installation cap narrows abuse while preserving legitimate paid use.
Analytics boundary
Consent-aware events
The funnel can measure feature selection and collage export without sending photos, prompts or image contents.
Secret boundary
Provider keys stay server-side
The app receives a product result, not direct authority over the external provider account.
AI-system decisions documented from product and backend implementation. No conversion or revenue result is claimed.
09 / Product system
A complete product system, not a demo feature
AI value depends on the states surrounding the model response.
Collage Easy combines the creative workflow with access rules, pricing, cost protection, privacy, failure recovery and measurement across iOS and Mac Catalyst. The outcome is a product that can be operated and evolved, not only a technically impressive interaction.
User outcome
Clear access and recovery
People can understand why an action is available, what it costs and what happens when processing fails.
Business outcome
Bounded AI exposure
Feature quotas, global limits and server policy create controllable cost boundaries.
Engineering outcome
Separated responsibility
Client, backend, store and provider each own the state they can enforce reliably.
Next measurement
Value after export
Track whether successful AI edits improve creation completion, export and repeat use, not only feature taps.
