Screen-by-Screen Requirements

What you have so far

- A name
- A short explanation of your app
- A list of the problems your users are trying to solve
- Your reason for doing this
- A list of users that we will target
- A persona (based on user needs) for our first set of users
- A user journey map for our first users
- A list of assumptions and ways to de-risk those assumptions
- A short description of your MRP
- Feature Sets (v1, v2, icebox)
- A list of your competitors
- A list of keywords and searches your customers might use
- A chart showing which problems your competitors solve and how well they solve them
- A list of table stakes jobs
- Your USP 
- A list of User Groups
- A list of User Stories  (v1, v2, icebox)
- A list and screenshots of inspiration sites, screens and features
- Notes on what you like about each site or app

Objectives

• Separate our app into screens and break our user stories down into smaller pieces

Tasks

1. Write a list of your pages (for a website) or screens (for an app)
2. For each user story for V1, write down the functionality on each screen that would allow the user to accomplish that story
3. Review and tweak your app/website structure
4. Give a weight value to each functionality

Tasks (with instructions)

1. Write a list of your pages (for a website) or screens (for an app)

We’re going to start by splitting our app or website into screens.

For an iOS app, you’ll want to split your app into a maximum of 5 main screens (think of these as the tabs on your tab bar at the bottom of your phone). You may want to refer to your lookalike and inspiration apps for ideas on which screens might be necessary.

These screens should be the main functional screens of the app. Don’t worry about pages like login, registration, FAQs, etc. for now.

Write each screen name on a post-it note, and post it on a wall.

2. For each user story for V1, write down the functionality that allows the user to accomplish that story

Start with your highest value user story; write out the function that helps the user accomplish this task, and put it underneath the corresponding screen. Do this for every user story. If there are additional screens that the user will navigate to, add those screens as additional post-it notes (in the same color as the screen post-its).

Use arrows to indicate when a user can transition to another screen using a function.

3. Review and tweak your app/website structure

Long, unstructured processes are difficult to teach and to navigate. Initially, every user experience needs to be pared down to its minimal task. We want it to be obvious for our users.

For any behaviour that will be used often or is important, we don’t want our users to have to tap more than 3 times. The less taps, the better. We want it to be obvious for the user how to accomplish their goals. Think back to your first user journey that you wrote — how easy is it for your user to accomplish that task?

4. Give an importance value to each functionality

Now, on each post-it note we’re going to write an importance value for each of the functions we’ve written. We’re going to use squares of 2 again (1, 2, 4, 8, 16). This will help us when we start wireframing our screens.

——

Outputs

• A list of all the pages/screens for your app
• A list of all the functionality that is required on each screen with importance values