A mobile network is adding an AI assistant to its app to answer billing and data questions. Design how people get real help from it, trust what it says, and reach a person at the right moment without starting over.
Customers of every age who open the app when something has gone wrong: a high bill, slow data, roaming abroad. Often annoyed, and wary of chatbots.
Start the timer and think out loud, like you would with an interviewer.
45-minute interview
One clock for the whole interview. Each phase fills up as time passes.
45:00left
Each prompt gives the AI a role, the whole brief, every edge case and a palette. AI drafts, you decide.
Best for a clickable prototype, fast.
ROLE You are a senior product designer building a high-fidelity, clickable mobile app · ai prototype for a UX design interview. Make design decisions a hiring manager would respect, and keep the scope to the brief. THE CHALLENGE The bot that knows when to stop: A mobile network is adding an AI assistant to its app to answer billing and data questions. Design how people get real help from it, trust what it says, and reach a person at the right moment without starting over. THE USER Customers of every age who open the app when something has gone wrong: a high bill, slow data, roaming abroad. Often annoyed, and wary of chatbots. MUST-HAVES - Solve the most common problems without a person - Show where an answer comes from - Ask before doing anything that costs money - Hand over to a person with the whole story EDGE CASES (every one must be handled) - The AI isn't sure, or might be wrong - The customer is angry, or types in capitals - The answer needs an action the AI isn't allowed to take, like a refund - The customer shares something sensitive, like a card number - The customer just wants a person, right away SCREENS TO BUILD 1. Start (390×844): opening the assistant, with a sense of what it can do 2. Answer (390×844): an answer the customer can trust, with sources and next actions 3. Handing over (390×844): a person takes over, with the whole story Link them so the main flow is clickable end to end. Show each edge case as a real state (an error, a warning, an empty state or a confirmation), not as a note. VISUAL STYLE - Rose #B83280: the assistant, actions and highlights - Blush #FFF7FB: the screen background - Pink tint #FCE7F3: notices and sources - Ink #2A1020: text and the customer's messages - Green #15803D: solved and confirmed - Type: one clean sans-serif. One clear hero (a title or a number) per screen, then a clear order of importance. - Spacing: an 8-point grid, generous margins, touch targets of at least 44 px. - Accessibility: text contrast of at least 4.5:1, labels on every input, never colour alone to carry meaning. CONTENT Use realistic content: an Indian mobile network, a customer called Aarav, bills in rupees (₹), data plans in GB, roaming in Dubai, and a billing agent called Priya. No lorem ipsum. DON'T - Don't add features the brief doesn't ask for. - Don't use more than one primary button per screen.
2 strong answers, each with its own look and reasoning. Try it yourself first.
Done designing?
Compare your screens with 2 different solutions, decision by decision.