Information Architecture for Design
Wireframes are the blueprints of any design project, but before you can jump into them, it is first important to establish a good information architecture. So what is information architecture (IA)? “IA is a science of structuring content of the websites, web and mobile applications, and social media software. Information Architecture study aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort.”
How to build an IA
An Information Architecture is like a flowchart, that displays how all the screens are connected and what leads where. Another way of putting it is that Information Architecture is created in a “hierarchical fashion to demonstrate the parent/child relationship of content.” The Information Architecture helps map out what the different pages are that the user can access and how they will travel between them.
An Information Architecture can either be built out vertically or horizontally, going from top to bottom or left to right. Typically a good IA displays the hierarchical order very clearly and can either contain differences in color or shape of each tier.
Additionally, there are many different ways to go about making an IA. You can either draw it by hand, or there are plenty of different programs you can use. If you own the adobe suite, XD is a great tool to help make an IA, but other adobe programs work as well, such as Illustrator. Other programs include InVision, Marvel, or Figma. You can also create one on any digital drawing space like draw.io or Procreate.
Planty IA
This past week, I have spent expanding upon my research from last week and trying to build in more functionality into my redesign of the app Planty. The overall functionality is very basic. There are three different actions in the menu bar, adding a plant, watering the plants, and recognizing a plant via the camera. You can access the settings and log out change your password, or turn on or off water notifications. And lastly, when you click on a plant, you can change its name, type, and watering frequency, access a watering calendar, and add some notes. There is a ton of potential for this app, but its biggest downfall is not including enough functionality.
In the Information Architecture, I created for my Planty app redesign, I started by expanding the main menu, having it include a home, my plants, find plant, blog, and profile pages. From there, I added sub-sections, which I built on from the original app, as well as taking ideas from other plant apps, the reviews, and user interviews. I decided to make my IA in Adobe XD and to show the difference in tiers, I colored my IA in shades of green to fit with the plant theme. While I have not decided on an official color pallet yet, these colors will be placeholders until then.
As can be seen, though my example of an IA, and IA is very important and helpful for mapping out the flow of an app or website. From here, it is easy to build the wireframes of the planned pages in the IA.
Sources:
Arhipova, Alina. “Information Architecture. Basics for Designers.” Tubik Blog: Articles About Design, Tubik Studio, 21 Mar. 2020, blog.tubikstudio.com/information-architecture-basics-for-designers/.
Rea, Matt. “5 Examples of Effective Information Architecture: Adobe XD Ideas.” Adobe, 12 June 2020, xd.adobe.com/ideas/process/information-architecture/information-architecture-examples/.
Studio, Tubik. “Information Architecture: Effective Techniques For Designers.” Medium, UX Planet, 16 June 2017, uxplanet.org/information-architecture-effective-techniques-for-designers-3c993956b1e1.
Studio, Tubik. “Information Architecture: Effective Techniques For Designers.” Medium, UX Planet, 16 June 2017, uxplanet.org/information-architecture-effective-techniques-for-designers-3c993956b1e1.
