Information Architecture and Wireframes

picture-3After doing research for Cookbook, the next step in the redesign process is to build both information architecture and wireframes. According to “Information Architecture. Basics for Designers” by Tubik Studio,

“Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software… (IA) aims at organizing content to so that users would easily adjust to the functionality of the product and could find everything they need without big effort” ( Tubik Studio, 2017).

In addition, people often confuse IA and UX, however, their roles in product design are incredibly different. Furthermore, Tubik Studio also explains that “IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic material so that they could plan navigation system”( Tubik Studio, 2017).

When I began creating my IA I was inspired to use the program Draw.io to make my sketches come to life from the article called “The Comprehensive Guide to Information Architecture” by James Pikover. In the article, a video was a YouTube tutorial was included to show how to build IA using draw.io. Moreover, when redesigning Cookbook, I decided to break up the application into four main pages: explore, search, profile, and a shopping list. The explore page’s purpose is to recommend new recipes to the user that they are likely to enjoy based on saves. The search page is a tool to also find new recipes using a specific ingredient or a dish name. Likewise, the shopping list page is built to help the user pick ingredients they need for a recipe and easily put them into a shopping cart that is self organizes by placement in the grocery store. Finally, the profile page allows for individuals to save recipes in self-made categories.

IA

On the other hand, according to Will Fanguy on “How to make your first wireframe”, he describes wireframes as:

“a low-fidelity design layout that serves three simple but exact purposes:

  1. It presents the information that will be displayed on the page

  2. It gives an outline of structure and layout of the page

  3. It conveys the overall direction and description of the user interface” (Fanguy, 2019)

 

Moreover, when creating wireframes for Cookbook it was important that I made pages that were clear to understand with a simple navigation on the bottom. I also wanted to include a sign-in/log-in page for the app as well. One of the most mentioned problems of Cookbook in the product reviews was that there were no cross-platform meaning users were not able to switch from different devices because their information would not save. In addition, to solve this problem I created both a sign-in/log-in page and also a profile page, where users will be able to save recipes. Another feature I created when designing the wireframes for the shopping list page, there is a feature that automatically organizes ingredients by type, alphabetical order and then placement within the grocery store. Overall, it was a positive and beneficial experience creating both IA and wireframes because it allowed me to bring this design to a working and efficient level.

wireframe-sketch

Full PDF of Work –> ColoneseDiBello_artifacts2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s