MODULE 2 – Information Architecture with Prof. Patrick Hogan
Every good UX Designer is also a competent information architect. Information architecture is all about helping users navigate complex sets of information. The critical beginning of any interactive design project is identifying content and understanding how users want to navigate and interact with it. Information Architecture is about paths, journeys and clarity. Designing an experience for others is ensuring that they do not get lost in it, get frustrated and can achieve their goals. Providing desired outcomes is also a good business policy, customers who have positive experiences with your product or service will return. Content is the heart of every app or website, and it should be taken seriously from the very start of a project.
Dan Brown who is an Information Architecture expert, founder and principal at his firm Eightshapes has identified the following 8 basic principles of content strategy for interactive design. He has presented these widely accepted guidelines as a framework all designers and developers could use to form their decisions on mapping out content relationships early in projects:
Treat content as a living, breathing thing with a life cycle, behaviors and attributes.
Create pages that offer meaningful choices to users, keeping the range of choices available focused on a particular task.
Show only enough information to help people understand what kinds of information they’ll find as they dig deeper.
Describe the contents of categories by showing examples of the contents
- Front doors
Assume at least half of the website’s visitors will come through some page other than the home page.
- Multiple classification
Offer users several different classification schemes to browse the site’s content.
- Focused navigation
The principle of focused navigation – Don’t mix apples and oranges in your navigation scheme.
Assume the content you have today is a small fraction of the content you will have tomorrow.
Personally, I feel almost guilty using the word architecture for what we are doing here. I am sure architects and engineers from the modern planners of element defying skyscrapers to the past artisan builders of cathedrals would chuckle at the idea. Hence my homage in the header image…but in lieu of a more apt term for this relatively new field and practice, we will keep it for presenting virtual relationships between types of content.
Not that Information Architects do not have to address many challenges and balance the needs of users, business objectives, context, technological concerns and limitations. It is not easy, but there are no building codes yet, and every virtual structure that we envision and construct in virtual space is unique and may or may not obey the rules of physics.
This week we were asked to exercise our IA development skills. We were asked to pick a municipal website, which have a poor reputation for being well laid out, identify its current structure and present a new website map for a redesign proposal. I selected the nearby town of Accokeek. Accokeek which means “at the edge of the hill” is the area next to Fort Washington along Indian Head Highway, Route 210, located in Prince George’s County, Maryland. It borders Charles County and is approximately 17 miles from Washington, D.C. It is a part of the Washington metropolitan area. Over the summer, my boys have had their swim league there and we visit often. The population as of the 2010 United States Census was 10,573, making it the 118th most populous place in the state of Maryland. Unfortunately Fort Washington’s municipal online presence is a web page on a sprawling county website, so I chose my familiar neighbors http://accokeekmd.com/ as literally the closest thing.
Quick Update: As of July 26, 2019, the accokeek.md website that this post was originally based on has gone down. I have removed the live link and uploaded an image from the internet archive to reference what the redesign would be targeting.
Preliminary Guides: User Types
As I began to research municipal website construction, I quickly identified two basic types of users: area residents and area visitors. These types of users may have overlapping needs and objectives, they may even be in search of the same or similar content, but what makes them different is their intent and approach once they enter the site. Area residents may behave like area visitors and vice versa, for example, someone who may be a long time resident may be interested in learning about new local activities, in this scenario, the person may be resident but their intent would be that of a visitor. These are broad categories that provide a basic framework. IA is about relationships between different types of content so I wanted to emphasize grouping and cross linking in the mapping. The other couple of guidelines Brown offers was choices, front doors and focused navigation…so my effort was to create a non-linear format where if someone entered via a non-homepage path, it would allow them clearly defined choices in terms of content (and function in the case of the mobile app).
Of course, there is shared content that will be of interest to both categories, these are generalizations that we can use to start creating provisional personas as we attempt to best imagine and address user needs through an information heirarchy. This understanding helped us develop a content schema based on user interests and paths they may take to reach desired content. We have grouped content based on this schema, utilizing cross linking and global links for shared content.
In addition, we were tasked with creating a mobile app IA for the same municipality.
Mobile Application IA Notes
You may have noticed that the “site map” for the mobile app looks similar to a flow chart. This was done on purpose. Mobile apps are not websites, they are a different medium with a different experience. Users do not experience mobile apps in sections or pages. Often a single page changes based on the user action or loads information and menus asynchronously where part of the interface changes while other elements remain. A flowchart seems to convey the structure of an application better than a traditional web site map.
My general approach to the information architecture of a mobile application is different from a website map in the sense that a useful mobile application is centralized on functionality rather than providing information. Mobile screens are smaller than websites and hence the navigation requires minimized controls and options.
For example, rather than just providing a calendar of events, in a mobile app, the user may be able to RSVP or add the event to their personal calendar. In most cases, the user will need to register or provide some personal details in order to use a mobile app, the experience can be more personally tailored to that specific users needs rather than an anonymous website visitor who we may or may not know or understand the intentions. A wealth of user information and analytics can be sourced from mobile applications. User navigation can be dynamically created by preferences or activity history.
I didn’t imagine these as finished, but rather a way of expressing a vision to a client and a starting point for discussion with my team or stakeholders about identifying content types, approaching features and functions and defining purpose. I guess the approach would be characterized as learning through iterations.
Based on comments from my peers I revised the maps. On the site map, I have added a “multiple pages” to my key and additional notes about reading the maps. I have thickened the primary information paths that I imagine a user would take and tried to better explain “logged in content vs. non-logged in content”. In this imaginary project, the app is supplementary to the website and will act as a way for users to engage with the community/upload content while they are out and about.
Resources & References
Babich, N. (2019). A Beginner’s Guide to Information Architecture for UX Designers. Adobe Blog. Retrieved from https://theblog.adobe.com/a-beginners-guide-to-information-architecture-for-ux-designers
Eight Principles of Information Architecture | Design Principles FTW. (2019, July 15). Retrieved from https://www.designprinciplesftw.com/collections/eight-principles-of-information-architecture
Brown, Dan. (2010). Eight Principles of Information Architecture. Bulletin of the American Society for Information Science and Technology. 36. 30 – 34. 10.1002/bult.2010.1720360609.
Best Examples of Municipal Government Websites. (2019, July 17). Retrieved from https://www.intechnic.com/blog/best-examples-of-municipal-government-websites
Charles County. (2019, July 18). Retrieved from https://www.meetcharlescounty.com
5 Tips for Creating a Successful Municipal Website | vtrural.org. (2019, July 16). Retrieved from https://www.vtrural.org/programs/digital-economy/updates/5-website-tips
Creating and Managing a Municipal Website | vtrural.org. (2019, July 16). Retrieved from https://www.vtrural.org/programs/digital-economy/services/municipal-websites/toolkits
Top 100 UX Design Tips from a User Experience Master. (2019, July 17). Retrieved from https://www.intechnic.com/blog/100-ux-design-pro-tips-from-user-experience-master
Create or Generate an Interactive Visual Sitemap | Rarchy. (2019, July 16). Retrieved from https://app.rarchy.com/create
Bigby, G. (2019, July 16). Top 50 Sitemap Generator Tools for Creating Visual Sitemaps. Retrieved from https://dynomapper.com/blog/16-sitemap-generator/164-top-50-sitemap-generators-for-creating-sitemaps
XML Sitemap Generator – creates Free Google site-maps online. (2019, July 16). Retrieved from http://www.web-site-map.com
MindMup. (2019, May 30). Retrieved from https://www.mindmup.com/#storage
Brown, D. M. (2010). Communicating Design: Developing Web Site Documentation for Design and Planning (2nd Edition) (Voices That Matter). New Riders. Retrieved from
Bentley, F., & Barrett, E. (2012). Building Mobile Experiences (The MIT Press). The MIT Press. Retrieved from
Recent Posts from the Graduate Series:
- LoFi Prototypes: Rubber meets the road. - MODULE 3 - Low Fidelity Prototyping with Prof. Patrick Hogan Low fidelity prototyping is about ideas. Low fidelity means that…
- Flowcharts: Finding The One Best Way. - MODULE 3 - User Journeys and Flowcharts with Prof. Patrick Hogan As we continue our journey into the practice of…
- Ideation Techniques - MODULE 1 - Ideation, Prototyping and Testing with Prof. Patrick Hogan Ideas are the most powerful things in human existence.…
- The Case for Space: DataViz Final Project - STORYTELLING THROUGH VISUALIZATIONS Sourcing Data My final project and very first interactive data story will be about the long term…
- Be Tufte on Bull! - MODULE 5 - Persuasion Versus Deception Persuasion In our last blog post we explored some best practices and common mistakes…
- Dear Data Project 2 - JUST GIVE ME A UNIFORM! I am getting more comfortable with manually creating data and realize that software programs actually…