If I were creating a screen explanation slide for the user sign-up page, I would insert the screenshot and detail the type of sign-ups the app will accept. For example, people can sign up with email or through Facebook. When they sign up with email, we’re going to send them a confirmation email to verify their email address. And when they sign up with Facebook, we’re going to collect their name, their birthday, and their email address.
The objective is to describe as many elements on the screen as possible by explaining what they are and the next steps when a user interacts with them. When a user taps the sign up with Facebook button, what happens next? Walking through the functionality and flow creates a detailed map, which will help the developer understand the screens they need to build and the requirements of each.
Benefits of the Product Spec
Sketching and wireframing are steps that help you to better understand the app, so you have more accurate and thoughtful information to create the product spec. The first two steps feed into the last, but they all ultimately help to better communicate your vision to the developer and designer.
Communication is the best way to ensure the final product accurately mirrors your vision. If you approach your freelance team with a vague idea like, “I want to build an app where you can connect with people in your area,” odds are the product they create won’t align with your vision…at all.
