Information architecture is a part of the design process where we define the complete screen flow and necessary information for the new app or a website.
It helps us keep the app simple and structured so that users can navigate through different features easily. Having a defined information architecture before designing screens helps us stay focused on the screen content and elements.
Usually, it overlaps with clients' app/website API or serves as a foundation for creating a future API.
Here you can find an expert's explanation.
We usually keep system attributes and flowcharts in the same Figma file as the wireframes, for reference.
One of the main benefits of defining information architecture is to have a complete list of necessary information which need to be visible in a single feature or on a screen.
A list of attributes for the Instagram profile feature can include, for example:
- first name
- last name
- Instagram handle
- profile photo
- biography text
- number of followers
- number of following
- edit profile action
- my posts
- tagged photos
The attributes help us remember all the relevant information when we get to design a profile screen.
A flowchart is the flow diagram which represents the complete map of an app or a website. That means it precisely shows how screens in the flow are connected.
We usually create a flowchart for the features based on the previous customer journey map.
You can draw flowcharts in Figma with the help of the Autoflow plugin.
Each square in a flowchart represents one screen of an app or a website.
You can also have more flowcharts for different use cases. For example, first-time user login will have a different flow than a regular user login.
Flowchart usually helps us sync with the backend team, clients and developers on how to set up the whole system. It is also a good time for them to say if we can organize or connect some features differently.