The next step after the product spec is building a wireframe. First, figure out what you want to do. At this point, you’re only listing out what you want, no drawings yet:
- Create a list of information you want to get across to your users
- List all the screens you want to have
- List the details for the functionality of each screen
- Take each screen and think about how you want your user to navigate through your product
- Time to doodle! Draw four versions of each of your screens. Only sketches, don’t get stuck in the details. Also, make extra sure it’s intuitive, you don’t want to make your users have to think
- Create an interactive prototype: Either cut and paste pieces of paper (fun! crafty! quick! good for teams! you can throw it out and do it again!), or create a high fidelity wireframe like the one I made (not as quick, not as easy to co-develop with others, but it looks gooood when it’s done)
This info is from Kevin at One Week Product Manager, he also recommends the following for reference:
A Beginner’s Guide to Wireframing
Here is a clip of my wireframe prototype and the document I used to get there.