Adding Wireframes to Agile User Stories

Your client — a news and entertainment website — has decided to collect more information about its users and encourage them to register. The solution is to add Like and Comment options that all users can see but only registered users can interact with.

In this sprint, you're tackling the following user story: As a registered user, I want to log in, so I can like and comment.

The acceptance criteria:

• Are fast, simple, and easy
• Request as little information as possible
• Don't interrupt the browsing experience

Start with formulating the user journey from a user persona's perspective. Mike, a 26-year old barista, is looking at a funny cat compilation article. One cat is extremely fluffy, and Mike presses the Like button under the photo. What happens next, provided that Mike is a registered user? Write it down.

When writing the user journey, use non-technical language and don't make it too long. Its purpose is to concisely explain the solution offered to the users' problem.

After having written the explanation of the user journey, it's time to map it on a flowchart. You don't need to map the entire Registration/Login flow, but a small chunk that reflects your user story. It starts when users press the Like or Comment buttons and ends when they have been logged in, redirected to the page they were looking at.

Plan how users would move through screens and how their actions and other conditions can influence their user journeys. Having done that, you'll get a pretty clear idea about how many screens you need to wireframe. In this case, it's the login screen, the retry login screen, and the confirmation modal.

When you know how many screens you need, start by deciding what should be on each page and get to sketching.

For the login page, some elements you might need are:

• Third-party login with the most commonly used apps among our target audience
• A login form with email/username and password for registered users and a Log In button
• The link to recover the password
• The link to sign up
• The brand's logo
• A meaningful headline

When you have decided what elements must be on each screen, create several wireframe designs for each one. This will help you explore different ways you could design each screen.

Don't shy away from looking up how other successful companies have solved the problem you're trying to solve.^[2] Find products and services that are similar to what you offer and study the competition.

The objective isn't to copy the things your competitors do — it's to check if you are missing anything in your design. For instance, after looking at some examples, you might consider adding links to your Terms and Conditions and Privacy Policy.

Another thing to look for is better ways to solve your users' problems. You might get inspiration and end up overhauling your design.

After you have finalized the basic structure and functionality of your screens, you can start adding details. At this stage, the wireframe should already have the actual copy instead of Lorem ipsum.

Now it's time to perfect the layout and hierarchy and add brand colors. You can add actual images instead of placeholders if you have the time and they're available. However, there's no need for polishing the wireframes to high fidelity at this stage. Simply add details that can help people to better understand the user story. 

In truth, it's very difficult to add meaningful annotations after you have finalized the wireframe. The best practice is to annotate as you go and finalize your notes once you have finished.

Annotations are there to explain things that are impossible to illustrate with the wireframe, such as design rationale, scenarios, edge cases, or interactions.^[3] What happens when users interact with these elements? Is this banner shown to all users or only those who are redirected from certain pages? Annotate it. You've succeeded if developers or clients can read your notes and understand not only what that element does but also why.