Sitemaps and user flow in product design

Overview

Sitemap and user flow are hierarchical diagrams that show the information architecture of a software product. This process comes before the user experience, user interface design, and product development.

Here is an illustration of a sitemap for a web page yet to be developed.

Deliverable of sitemaps :

1. Key Product feature: As shown in the illustration above, the sitemap helps showcase the critical pages of a website.
2. Page paths: The connecting lines from the above image describe the web page relationship on the website.
3. Page function: Every box is an existing page in the design phase. The tag represents its function or a possible child page.

Below are industrial tools for user flow identification.

Result

The implication of user flows, and sitemap in the design of a product can be seen below :

1. Understanding of a product's purpose: The representation of products in information architecture formats helps ensure the product's purpose is identified before development.
2. Elimination of Excesses: With a clear purpose envisioning, extra pages, and excesses can be eliminated from a product design process.
3. Cost Reduction: The information architecture in place makes it possible to perform iterations before development. This saves cost and time throughout the process.

Deliverables

1. The login is an action carried out by the user, which is indicated through a circle.
2. The home, product review, and product pages are screens viewable to the user upon login and are indicated through the use of a rectangle.
3. "Add to cart" is a decision that can be made by the user while viewing the pages on the screen.
4. The connecting lines show the possible paths for the user through the application.

User flow helps explain and guide one to understand the user's journey in using the product.