Breaking the problem down into features
In the previous chapter, we chose to identify a larger area, “Authentication,” and break that down into specific features. Let’s recall what that feature breakdown looked like. After that, we’ll see if we need to change it to instead be more design oriented. But first, let’s show the list of features:
- Area: Authentication
- Log in: User should be able to log in.
- Log out: User should be able to log out.
- Create new user: It should be possible to create a new user.
- Update password: An existing user should be able to update their password.
- Reset password: If a user forgets their password, it should be possible to reset it in a safe way.
The above list of features constitutes a good high-level list of what we need to support. However, from a design viewpoint, we need to consider things like catering to different devices or support accessibility, for example. Therefore, a prompt for, let’s say, the first feature might need to be tweaked to look like so:
[Prompt]
Generate a login page. It should have fields for username, password, and repeat password, as well as a login button. It should also support accessibility via tooltips and ARIA keys so that it can be used with just the keyboard and mouse.
[End of prompt]
As you can see from the above prompt, our concern is not only with what UI elements we need, like inputs and buttons, but also how it should work.
As before, we recommend that you break down the web app you’re about to build into areas and each area into features so as to make prompting easier.