This past week, my partner and I have spent time building out our information architecture and then going on to create wireframes for all the app pages. We used the information from all of our prior research when creating the information architecture to help guide us in the pursuit of a user centric design. We want all the feature to reflect the information we gather in the user research to make sure we are providing the best app available. 

Information Architecture (IA)

An information architecture establishes how a website or an is organized. It structures the content into different levels of hierarchy and organizes everything into a readable flow from page to page. An “information architecture is the practice of deciding how to arrange the parts of something to be understandable.” The IA flushes out how everything is connected and works out how to get from point A to point B in the easiest and fastest way possible. The less that the user has to click through, the better. 

“IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority.”

Source

This is the information architecture that we created for our smoothie app. We chose to design it horizontally, going from left to right. On the left side are the main navigation points in the menu, which are the main pages of the app. From those pages, there are additional pages that connect to them from the right side of the IA. There are clear lines that connect all of the pages so that it is easy to follow along with and clear to the viewer how the app would be set up and how it flows. 

Wireframes

The next step, after finishing an information architecture, is to create wireframes for each page. Wireframes are like the blueprints of a design. They lack color and movement but provide the basic layout of how the page will look and follow the IA for how the pages interact and connect together. There are different types of wireframes. These include low-fidelity, mid-fidelity, and high-fidelity wireframes. Low-fidelity wireframes have minimal detail and appear very quick and sketchy. Mid-fidelity wireframes have more detail and neatness and are the most commonly used wireframes. High-fidelity wireframes are the most detailed and closest to what the actual comp will look like. Wireframes are an integral part of a good design and require a lot of thought and planning. 

“If we don’t have a strong skeleton to start, then all the stuff we put on top of it, like the functionalities or style, really don’t stand a chance.Think about the process of building a new house. If you focus all your energy on the interior design, like the colors of the walls and the fabric for the couches, rather than the blueprint of the structure of the house, do you think it will serve its purpose? Probably not.”

Source

For our wireframes, we spent hours making them as detailed as possible. We created our content and put it into our wireframes, so we coils see exactly how everything would be laid out and fit on the page. We created icons and played with shades of grey, but still left them without color or images. 

To create our wireframes, we decided to use Adobe XD, since there is a feature that allows us to share the project, so that we can work together on it at the same time. In total, we created 34 wireframes, but we expect that by the time we are done the app, the number of pages will have grown, as we continue to test, fix, and change our design.

Sources:

https://uxplanet.org/information-architecture-basics-for-designers-b5d43df62e20

https://protoio.medium.com/why-wireframes-are-important-in-the-design-process-de4e773e611

https://www.invisionapp.com/inside-design/how-to-wireframe/https://protoio.medium.com/why-wireframes-are-important-in-the-design-process-de4e773e611

https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/