# Product Spec Design: Instagram

There are 3 steps to creating your product outline:

1. Describe required and optional user stories
1. Identify the screens in your app
1. Document your navigation flow

You can find a [product outline template to add to Github here](https://hackmd.io/SR5ovxoOTQ6cCrvQ33qnGw). Copy this template to a HackMD and work on this as a team.

## 1. User Stories (Required and Optional)

To kick off this session, we want to list out the things a user can do within our app, and tag them as "must-have" (required) or "nice-to-have" (optional)

**Required Must-have Stories**

For Instagram, we identified the following "must-have" features which a user needs to be able to perform for the app to work:

- User can post a new photo to their feed
- User can create a new account
- User can login
- User can search for other users
- User can like a photo
- User can follow/unfollow another user
- User can view a feed of photos

**Optional Nice-to-have Stories**

- User can add a comment to a photo
- User can tap a photo to view a more detailed photo screen with comments
- User can see trending photos
- User can search for photos by a hashtag
- User can see notifications when their photo is liked or they are followed
- User can see their profile page with their photos
- User can see a list of their followers
- User can see a list of their following
- User can view other user's profiles and see their photo feed

:::info
Try to order your required user stories above by the rough "importance" of that story to the functioning of the app.
:::

## 2. Screen Archetypes

Based on your required user stories, the next step is identifying your [core screen archetypes](https://guides.codepath.com/android/Mobile-Screen-Archetypes), these are the different screens your app will have to have to function. For example:

* Login Screen
* User can login
* Registration Screen
* User can create a new account
* Stream
* User can view a feed of photos
* User can double tap a photo to like
* Creation
* User can post a new photo to their feed
* Search
* User can search for other users
* User can follow/unfollow another user

:::info
Notice that we've listed every required user story to a screen archetype above.
:::

## 3. Navigation

Next we want to take our screen archetypes and required user stories and define the navigation within our apps. There are 2 key navigation types within an app:

* Tab Navigation - This is when the user switches between screens by simply clicking on a tab displayed at the top or bottom of the app.
* Flow Navigation - This is when the user taps on something on a screen and is taken to another screen. From that screen, they can go back to the previous screen, or navigate to another screen.

For example, for our simplified version of Instagram:

**Tab Navigation** (Tab to Screen)

* Home Feed
* Search User
* Post a Photo

**Flow Navigation** (Screen to Screen)

List all your screens from above. Under each screen, list the screens you can navigate to from that screen.

* Login Screen
=> Home
* Registration Screen
=> Home
* Stream Screen
=> None, but future version will likely involve navigation to a detailed screen to see comments for each photo.
* Creation Screen
=> Home (after you finish posting the photo)
=> In the actual wireframe, you will need multiple screens to represent the creation process to add filters, etc.
* Search Screen
=> None

:::info
There are other types of navigation in apps, but flow and tab are the most common, and many apps use only those navigation types.
:::