Prototyping and MVP Design in Prague

A prototype is the cheapest place to make mistakes. We sketch, wire and put a clickable version in front of real people before a line of code exists, so the expensive part of development starts with a design someone has already used. It works the same for a single screen and for a whole MVP, where the call is what goes into the first version.

From€400per project

  • 5users surface about 80% of problems
  • 1-2 wksto a clickable prototype
  • 2 roundsof feedback included in the design
  • €0for a change while it is still a design

A prototype is a clickable model of an app or site that shows whether people find what they need before a single line of code is written. Wireframes cost from €400, a clickable prototype from €600. Fixing a flaw in a prototype takes an hour, in finished code it takes weeks.

We test the prototype with five to eight people from your audience who get a task and no hints.

We test the prototype with five to eight people from your audience who get a task and no hints.

The test produces a list of places where people got lost and a revised prototype before development spend starts.

The test produces a list of places where people got lost and a revised prototype before development spend starts.

Everything is drawn in Figma and handed over in full, so any team can build from it.

Everything is drawn in Figma and handed over in full, so any team can build from it.

Developers sit in the same team, so we know already at the prototype stage what's cheap to build and what isn't.

Developers sit in the same team, so we know already at the prototype stage what's cheap to build and what isn't.

Every service in this category, explained

  • Interaction design

    How the interface behaves on click, while loading and on error.

    In short We design how the interface behaves as well as how it looks: states, transitions, feedback, animation with a purpose. It's the difference between a UI that works and one that feels good to use.

    How we workFor every screen, we write down what happens after a click and what loading, an empty list and an error look like. Transitions are designed with a purpose and tested right away with reduced motion switched on. We check the behavior on a live, working prototype.

    What you getA state-by-state description of interface behavior, covering loading, empty lists, errors and confirmations, with timing and transition type spelled out for every animation. Developers can build from it directly, with no guessing about how a button should behave while it waits on the server.

    What's included

    • Loading, error and empty screens
    • Animation that means something
    • Respects the reduce motion setting
    • Every behavior spelled out

    Interactive prototype

    A clickable model you walk through before any code.

    In short A clickable model of the product, ready before development starts, that you can put in front of users or investors. It's realistic enough that people forget it's a mock-up.

    How we workFrom the signed-off screens, we assemble a clickable model and decide how realistic it needs to be for the question it's meant to answer. We send the model out for testing, to the sales team or to an investor, and collect feedback right inside it. Anything the tests show is unnecessary gets cut before a developer ever touches it.

    What you getA link to a clickable prototype covering the whole journey, with feedback already built in and a list of features that fell out of scope. Once it's signed off, it becomes the brief for development.

    What's included

    • Click through the product before development
    • Test it on users or investors
    • Doubles as the development brief
    • Cuts features nobody needs

    What's in the box

    You do not order these separately: they are in every job, and they are ours to do.

    Wireframes

    Fast, low-fidelity layouts that settle structure and hierarchy before visual design starts. Ten cheap changes at this stage save you one expensive rebuild later.

    We draw them deliberately without color or type, using real content from the start. We walk you through the layouts and rearrange them as many times as it takes, because at this stage a change only costs minutes. The signed-off wireframes then become the basis for the visual design and the work estimate.

    OutputWireframes for every key screen, using real copy, with priority order marked and notes on what should happen on each one. They also serve as the basis for estimating the development scope.

    • Structure decided before visuals
    • Real copy from the first sketch
    • Cheap changes before the costly build
    • A basis for your cost estimate

    User flow

    We diagram every path a user takes to finish a task, including the unhappy ones: errors, dead ends, the back button. Fixing a flow on paper takes minutes. Fixing it in production takes sprints.

    We map every path step by step and add the unhappy branches straight away. For each step, we note what happens, what the user sees and what gets saved or sent. We review the diagrams with the developer before anyone builds from them.

    OutputDiagrams of every path a person takes to finish a task in your product, including error branches, with the behavior spelled out at each step. Developers build from them directly, and testers pull their test cases straight from the same diagrams.

    • Errors and dead ends included
    • A brief developers can build from
    • Surfaces steps the brief left out
    • Cheaper than a fix after launch

    Sitemaps

    A page-level blueprint of your site: what exists, what links where, what gets cut in a redesign. It matters most for migrations, because a lost page means a lost ranking.

    We list everything that exists on the site today, pull the URLs carrying traffic or links, and decide what stays, what merges and what gets cut. The plan also covers pages that still need to be built. For a redesign, we pair every old URL with its new one, one by one.

    OutputA page-by-page sitemap showing what's created, what's retired and what leads where, in a form you can tick off as you fill in content. For a redesign, you also get a table of redirects from old URLs to new ones.

    • A URL for every service
    • Redirects mapped for the redesign
    • Room planned for content to come
    • Tick off pages as you fill them

    Technologies

    Sound familiar?

    John Doefirst call
    1. Investors want to see the product and all we have is a deck

    2. A clickable prototype looks and behaves like a finished app at a fraction of the cost. In the meeting an investor taps through it on a phone and gets the product faster than from twenty slides.

    3. The developers built something other than we meant

    4. Everyone reads a written brief their own way. A prototype shows every screen and every state, so there's nothing left to interpret. Changes happen in Figma, where they take minutes.

    5. The development budget is fixed and we don't know what fits

    6. On the prototype we sort features into must-haves for the MVP and ones that can wait. Developers estimate each one, so you know what your money buys before you sign.

    7. The app is live and people get lost in it

    8. Flow problems are expensive to fix in code. We draw and test the new flow in a prototype, and only the version that passed the test goes into code. Developers rewrite once.

    Which one sounds like you?

    Pick your case and enter your own numbers. The screen works out what you're losing or gaining.

    People leave and I can't tell why

    Visitors a month2,000
    How many visitors buy1.5%
    Average order€120

    For a UI/UX audit to pay for itself in 3 months, you just need

    +8.3% on conversion

    Right now the site brings in about €3,600 a month: 2,000 visitors, of which 1.5% buy at €120. A UI/UX audit typically costs €900.

    Typical price from the studio price list. Revenue here ignores margin. This is the breakeven point, no one can guarantee a conversion increase in advance.

    I'm starting something new

    Development budget€20,000
    How many screens you think will need reworking25%

    At risk of rework after launch

    €5,000 of the budget

    Reworking 25% of the screens after launch means paying another €5,000 out of €20,000. A clickable prototype typically costs €1,200, and these changes happen there before any code is written.

    You set the share that needs reworking. The prototype's typical price comes from the studio price list.

    My product drifted

    How many people work on the interface4
    Hours a week each spends tweaking screens3 h
    How much your hour is worth€30

    Inconsistency costs you

    €1,559 a month

    4 people at 3 h a week each, at €30 an hour. A design system typically costs €2,650 and pays for itself in 1.7 months.

    You set the hours and the rate. This is an upper estimate: we assume the system removes the tweaking entirely. Typical price from the studio price list.

    Skip straight to code and save a step?

    Skipping the prototype looks like saving a week and a couple of thousand euros. On a small, clear project it really is. On a product still searching for what people want, the saving usually comes back as rework.

    When you can do without a prototype

    • A simple site with a familiar structure, like a company presentation
    • You're reusing a proven flow, such as a standard shopping cart
    • The developer is also the designer and the client sits right next to them
    • It's an internal tool for a few people who'll say what's wrong

    When it backfires

    • A new product where you're still testing whether anyone wants it
    • Many screens and user roles, where nobody can hold the flow in their head
    • A fixed budget, where every rework eats into features
    • Investors or management want to see and try the product before paying for it

    From idea to a tested prototype

    1. You know what to build first

      Call and MVP scope

      We go through who the product is for and what problem it solves. Features split into must-haves for the first version and ones that wait. You get a fixed price.

    2. You see the whole journey

      Sitemap and flows

      We map the screens and user flows: how someone gets from arrival to goal and where they can get lost. This is where unnecessary steps usually get cut.

    3. You have the skeleton

      Wireframes

      A black-and-white layout of every screen without colours or graphics, so the discussion stays on content and order. Changes at this stage take minutes.

    4. You hold the product

      Clickable prototype

      We link the wireframes in Figma into a model that clicks through like a finished app, on desktop and phone, with states such as error, empty list and loading.

    5. You know where people get lost

      Test with people

      Five to eight people from your audience get tasks and we watch where they hesitate. You get the recordings and a summary.

    6. The prototype is ready

      Revisions and handover

      We fix what the test showed and hand over the Figma files with screen descriptions. You can continue with us on design and development or with another team.

    What a prototype and wireframes cost

    Wireframes from €400, user flows from €500, a clickable prototype from €600. You know the price after the first call and it doesn't change. Nothing is added on top, the price is final.

    Check pricing

    Evidence first, taste second

    Evidence drives our design decisions: research tells us what to fix, prototypes prove it works on real people, and analytics confirm whether it worked after launch. Everything sits on one design system, a single source of truth for color, type, spacing and components. A screen that used to take days now takes hours, and the product stays consistent as it grows. We don't vanish at handoff either: a designer stays on call through development, so the shipped product matches the one we tested.

    What you ask most often

    What is an MVP?

    An MVP (minimum viable product) is the smallest version of a product you can put in people's hands to find out whether they want it. It holds only the features the product can't work without. A prototype is often the first step towards an MVP: it tests the flow before it's built.

    What's the difference between a wireframe and a prototype?

    A wireframe is a static black-and-white layout of one screen that settles content and order. A prototype links screens into a model you can click through and shows how the product behaves. Wireframes usually feed the prototype.

    How much does a prototype cost?

    Wireframes from €400, a clickable prototype from €600, typically around €1,200 for a larger app. A sitemap from €250. You get the exact price after a call where we count screens and roles. Nothing is added on top, the price is final.

    How long does it take?

    Wireframes for a smaller product take a week, a clickable prototype with testing two to three weeks. Scheduling test participants usually takes the most time, the drawing itself is quicker.

    What do you build prototypes in?

    Figma. The prototype runs in a browser and on a phone through a link, nothing to install. We hand over the full files, so you can keep working on them yourself or with another designer.

    Do you test the prototype with users?

    Yes, that's the main reason to build one. Five to eight people from your audience get tasks and we watch where they get stuck. According to Nielsen Norman Group, five participants surface about 85% of problems.

    Can another team build from the prototype?

    Yes. We hand over Figma files describing screens, states and flows, so any developer can build it. If you'd like, we build it ourselves, design and development are one team.

    Is a prototype enough for an investor meeting?

    Often, yes. A clickable prototype on a phone explains a product faster than a deck, and investors can try it themselves. For serious talks we'd also show the results of testing with real people.

    What if testing shows the idea doesn't work?

    Then you've saved the whole development budget. A prototype is the cheapest place to learn that people don't understand or want a product. We test a revised flow again, or talk through whether to change direction.

    Ready to build something solid?

    Drop us a message. We reply within a few hours to set up a quick chat.

    1. 1Within hours: a human reply: first thoughts, maybe a question or two.
    2. 2Within days: a 30-minute call. You talk, we listen. Free, no obligations.
    3. 3After the call: a written fixed quote, or an honest answer that we're not the right fit, with a tip on who to ask instead.

    No sales scripts. You'll be talking to the people who'll actually build it.

    Allergic to forms? Fair.info@chronicles.cz+420 773 230 278

    By submitting this form, you're agreeing that we can use the details above to answer your enquiry. How we handle your data. We use it only to reply. We never sell it or add you to a mailing list.