How to?

How to do a proper specs document for the product design team?

Max M., Design Director at Metacarbon
Copy article link

Nailing down the proper format of product specs for product design team could be quite a big deal. Keeping it light and native, with no irrelevant info, no clericalism and at the same time making sure it streamlines the design process and gives solid starting ground for designers to kick off their effort – that’s definitely the process that requires some back and forth.

An approach to PRD should be tailored for each product development tradition and its specific, but starting from some common, well tested ground could be helpful. We have gathered all our templates, PRDs from product teams we work with and our own documents and came up with the simple unified approach that could help bridge the gap between business needs, product vision, design intentions and technical requirements, ensuring alignment across all teams. We skip the high level things like Value Proposition Canvas, Business Model Canvas, etc., since product people usually don’t have problems explaining the overall essence of their product. Complexity appears when it comes to pretty detailed feature-level discussion.

Perceive this as the granulated PRD template to kick off some particular feature/feature set design. If you are about to prepare the specs for the whole product – split the features by epics (categories of features) and use this for each feature. As an example, we put some imaginary neobank product.

1. Problem Statement

What are we trying to solve with this feature?

Example:

Current money transfer options in the app are too segmented, requiring multiple steps and screens, which frustrates users and leads to high drop-off rates during the transfer process.

2. Success Criteria

What indicates that this task is completed correctly?

Example:

  • A 30% increase in the completion rate of money transfers within the app after the feature launch.
  • A decrease in the average time taken for users to complete a transfer from 2 minutes to under 30 seconds.
  • Positive feedback from at least 70% of surveyed users on the new transfer experience.

3. Business Goal

How is this feature valuable for the business? What business goals should it solve?

Example:

Improving the user experience by reducing friction in money transfers. Should lead to higher customer satisfaction and retention rates. Also, we expect users getting encouraged to explore and use other app services like expenses tracker more frequently.

4. User Stories

Deeper drill-down into the main user goal.

Example:

  • Primary User Story: "As a user, I want to transfer money between my accounts quickly and easily, so I can manage my funds without hassle."
  • Secondary User Story 1: "As a frequent app user, I want to see real-time updates of my account balances before and after transactions to keep track of my financial status accurately."
  • Secondary User Story 2: “As a frequent user, I want to have an ability to set up recurring payments with prior confirmation before each next payment or without such confirmation”.
  • Secondary User Story 3: "As a user, I also want to see all fees I am about to pay for each transaction and know what each fee stands for"
  • Secondary User Story 4: "As a user, I want to have an ability to change card I am about to do the transfer from even on the last minute before the confirmation”
  • Secondary User Story 5: "As a user, I want to know if I pay from my own money, or the overdraft funds”.

5. User Goal

Why is this important for users, and what are the main use-case scenarios?

Example:

Users want a streamlined transfer experience that saves time and reduces effort. This is critical for daily transactions like moving funds between checking and savings accounts or transferring money to family members quickly.

6. Functional Requirements

Design-sensitive tech specs to understand tech limitations and cover potential edge cases more consistently.

Example:

  • The transfer interface should be visually simple, with clear calls to action, minimal input fields, and progress indicators.
  • The design should support both light and dark modes to cater to user preferences.
  • Ensure the design accommodates real-time data updates for account balances and transaction confirmation.
  • Ensure having all states including long loading state that communicates a need to wait longer without quitting the app.

Functional Requirements

Design-sensitive tech specs to understand tech limitations and cover potential edge cases more consistently.

Example:

  1. Quick and Easy Money Transfers
    • The app must provide a streamlined transfer interface with minimal input fields and clear instructions to guide users through the process.
    • Transfers between accounts should be completed within a maximum of three steps: Select account, Enter amount, and Confirm.
    • The app should include a 'Quick Transfer' feature accessible from the home screen or main dashboard, enabling users to start a transfer with a single tap.
  2. Real-Time Updates of Account Balances
    • The app must display real-time updates of account balances before initiating the transfer and immediately after the transfer is completed.
    • Use visual indicators (like loading spinners or progress bars) to show real-time updates during the transaction process.
    • The app should provide a transaction history screen that is automatically refreshed upon the completion of a transaction to show the updated balances.
  3. Recurring Payment Setup with Confirmation Options
    • Provide an option within the transfer settings to set up recurring payments.
    • Include an option for users to choose between having a confirmation request before each recurring payment or executing without such confirmation.
    • Notifications (push or email) must be enabled for upcoming payments when the user opts for confirmation, and an easy way to confirm or cancel the payment should be included within the notification.
  4. Fee Transparency
    • Before confirming a transfer, the app must display a breakdown of all fees associated with the transaction.
    • Include explanations for each fee type (e.g., service fee, foreign exchange fee) with hover or clickable info icons.
    • The total fee should be clearly shown, with a final amount inclusive of fees highlighted for user clarity.
  5. Ability to Change Payment Card Before Confirmation
    • Allow users to select or change the payment card/account up until the final confirmation step of the transfer process.
    • Include a visible ‘Change Card’ button on the confirmation screen that enables users to select a different card or account without restarting the transfer process.
    • Show a summary of the selected card details for verification before finalizing the transaction.
  6. Indicate Funding Source (Own Money or Overdraft Funds)
    • Clearly display the source of funds (e.g., "Own Money" or "Overdraft Funds") at the time of transfer initiation.
    • Provide an option for users to choose their preferred funding source (own funds or overdraft) if multiple options are available.
    • Include a warning message or alert when using overdraft funds, explaining any associated fees or interest rates.

7. Key Stakeholder Insights / Inspiration

Personal insights/ideas/vision on some specific things to help keep both sides aligned.

Example:

  • Consider “Revolut” transfer flow as the reference;
  • Color code cards for easier cards management in minimized view.
  • Ensure that the new design is validated through usability testing, capturing user feedback on ease of use and visual appeal.

That’s it!

We hope this framework will help you structure your thoughts in a pretty light, yet efficient kind of way. It really doesn’t take too much effort to quickly jam some input for the product design team, but the end results you may expect from the design iterations should be much closer to your expectations. Skilled product designers usually tend to not limit themselves really strict with the initial specs, so don’t be afraid of framing them too much with such an input. On the other hand though, make sure you communicate all the “hard stops” and tech constraints to be followed, if there are any.

And have a great time building!

July 27, 2024