This week (04/04/2021 – 04/10/2021) my project partner and I built out our information architecture and wireframes for our Connecticut Wine Guide & Passport app redesign/recreation. I outlined this process when I was redesigning another app here, but I’ll go into more depth with this post.
Information Architecture
Information architecture is incredibly important when beginning to design a website or app. Organizing everything you want in the app and showing how users can navigate to and from pages will give you an idea of how many screens you need and what kind of menu or options to include in the design. “Information architecture is the practice of deciding how to arrange the parts of something to be understandable (…) visual elements, functionality, interaction, and navigation are built according to the information architecture principles. The thing is that even compelling content elements and powerful UI design can fail without appropriate IA, (Information Architecture. Basics for Designers by tubik for UX Planet).” Without information architecture, designing a site would be pretty difficult in terms of knowing what you need. Changes would occur more often than if you had a plan (aka, the information architecture), so just do it! Consider your audience and what they’ll be using the site or app for, and starting planning. Remember to use a user centered approach. Information architecture could be the piece that sets your product apart from the rest, and while it takes time and resources, it’s going to make a real difference in the final product and reception. You could make your IA using some pretty simple programs or websites, anything that can make a flowchart or boxes and arrows will do. I’ve used Illustrator and draw.io personally (draw.io is free!), but I’ve heard good things about FlowMapp and some classmates have done theirs in XD. Information architecture should include the home page, branching off to your ‘main’ pages and pages directly attached to the home page. From there, each page should have branches to the pages directly attached to them, until everything you want to include is there. Be thorough, look back to the target user, and keep it clean.
Wireframes
Wireframes go hand in hand with information architecture. Sometimes, the steps are combined and wireframes are used in place of blocks with a label in information architecture. Wireframes are low-fidelity drafts of the basic layout and organization of an individual page or screen. According to inVision, the purpose of wireframes is to present the information that will be displayed on the page, create an outline of structure and layout of the page, and convey the overall direction and description of the user interface. While most wireframes aren’t super detailed and contain very minimal, if any, visual design elements, they set the scene for that content to be used in the best way by outlining the necessary elements and working the rest in around it. Rosie Allabarton of CareerFoundry suggests asking yourself these questions when creating wireframes: “How can you organise the content to support your users’ goals? Which information should be most prominent? Where should your main message go? What should the user see first when arriving at the page? What will the user expect to see on certain areas of the page? Which buttons or touch points does the user need to complete the desired actions?” Is what you’re creating useful and usable? Remember to maintain the user centered approach. Focus on aesthetics later, and build out your pages!
Recap
Next week, we’ll be working on our design comps and collaborating to make one final design. We have some ideas in mind, but it’ll be great to see them finally come to life. I’ll be back to talk about user interfaces and how to build a brand. Until then, happy designing!
brandi pinette 