The Blueprints of Design

Artwork created with Adobe Illustrator by Brandi Pinette

This week (02/07/2021 – 02/13/2021) I focused on the flow, content, and structure of the app I’m redesigning for class, Tropical Smoothie Cafe. I began with the information architecture, piecing the journey together from start to finish, ensuring everything needed has a location and is accessible. Then, I began sketching my wireframes, establishing basic navigation and interactivity. These are not detailed wireframes, but they will be useful in the development of the app and show the means by which the user can get to the page they need. 

Information Architecture

“Similar to building architects using a blueprint to construct every part of a house, from physical structures to more complex inner workings like electrical and plumbing, information architecture describes the hierarchy, navigation, features, and interactions of a website or application.”

James Pikover for Toptal, 2018

Through user interviews and research, developers uncover what people really want- structure and ease. Information architecture is the blueprint behind every website and application. Information architecture allows creators to see how their program flows from point A to point Z, and all the steps in between. It shows how each screen or page is accessed and where they lead to. Content structure is based on the product itself and the target audience. User satisfaction is the top priority of UX/UI design (Tubik Studio, 2017), and information architecture allows designers to lay out the best way to organize content for their users. Unorganized applications and sites can cause frustration, driving away users. First impressions are vital, as well, so it’s best to be thorough the first time and make smaller adjustments as you go, compared to failing then overhauling. 

Information architectures are like blueprints and are similar to flowcharts, using both shapes and hierarchy. However, placement and labeling are most important in information architecture, as they explain the flow clearly, showing touchpoints and how each page is interacted with (Pikover, 2018). The information architecture should be able to be understood by users before they even see the page. 

Wireframes

“If a user doesn’t know where to go on a plain hand-drawn diagram of your site page, then it is irrelevant what colors or fancy text eventually get used.”

Rosie Allabarton for CareerFoundry, 2019

Wireframes are low-fidelity sketches that show the function, structure, and purpose of each page (Fanguy, 2019). Wireframes, like information architecture, help with understanding how the user will navigate through the app, much like a blueprint. They are made from basic shapes and text, with little to no design elements- they are focused on functionality and user experience. Wireframes help allocate a place for all of the content, show the navigation features that users will use to get from page to page, and show the basic structure of each of these pages. They are key in website and application development and serve as an intermediate point between idea and prototype, resulting in fewer issues in the design process (Allabarton, 2019).

Recap

Information architecture and simple wireframes are crucial to developing an app that works correctly and efficiently- no screens are left behind, everything has a meaning, and all the content fits. They also help to reduce the number of problems that may arise later in the process by planning ahead. It seems like every part of creating a product is ‘crucial’, but that’s because each part is. As I’ve said before, design is all about trusting the process. These two steps, combined with all the research I’ve done and will continue to do, will help me throughout my design process, and help me make the final product the best it can be.