Introduction: What is information architecture?
Information architecture is everywhere; in websites, apps, software, printed materials, and even in physical places. Its aim is to “help people to understand their surroundings and find what they’re looking for — in the real world as well as online”, as The Information Architecture Institute describes the term.
Rosenfeld et al. mention in chapter four of their book Information Architecture: For the Web and Beyond, that a structured, clear information architecture that is understandable and usable by human beings, and which can grow and adapt over time to meet the needs of users is key for a well-performing website. But how do we make an IA — in our case of a website — understandable and usable? And how do we do it if we are not designing a new site from scratch, but redesigning an existing one, probably a website that has grown for many years? Not an easy task, let us tell you this.
We suggest starting your evaluation by asking questions and digging deeper into your website’s architecture, excavating the challenges it is facing and finding quick as well as long-term solutions for current problems. To provide you with a guiding thread, we show you how we managed the task using the example of the website elevate.at. Follow our lead!
Information architecture case study: Elevate festival website
What is the website about?
Elevate is an annual interdisciplinary festival held in various venues. With a combination of critical political discourse and contemporary music and art, the Elevate festival is positioning itself differently than other national and international music festivals.
The Elevate festival website provides information about the program, artists, speakers and projects associated with the Elevate festival in Graz, Austria. Besides, an archive offers photos, videos and other media for users interested in previous events.
Apart from the vast archive reaching back to 2008, the website is facing the challenge to satisfy different user needs during the festival’s lifecycle as well as to provide useful and usable information to their various audiences. At the same time, a goal is to sell tickets and grow as a brand.
How is content organized?
The website is hierarchically structured and uses a topic-based approach to cluster content, not only on the website but also in the global navigation and the second-level navigation. The website has a deep structure with six levels. The lowest level does not appear in the site structure and only becomes visible through breadcrumbs if the user digs deeper into the site.
The three main content sections of the Elevate site that constitute the festival programme (Music, Discourse, Arts) are generally structured logically and don’t go too deep when it comes to navigational levels. In general, the navigation is not very coherent, though, as we will discuss later.
There is a lot of different content on the website, yet Elevate does not necessarily use the same templates for the same content types (e.g. programme pages do not always look the same). The URL structure does not reflect the content hierarchy even though it should be considered as assisting information to help the user comprehend the website structure.
What navigation elements are available?
The Elevate website features the following navigation elements :
- Global navigation,
- breadcrumb trail,
- contextual navigation as in related links (such as related artists, latest articles),
- local navigation (filter feature on media archive page)
The navigational patterns are wide and deep and navigating or finding the right content is not easy for the user. The main way to navigate the website is via the global navigation, which currently contains six main menu items. All these items have drop-down menus with sub menus:
The website uses a mix of breadcrumbs and local navigation. The breadcrumbs reveal additional sub navigation levels on hover. This unusual way of navigating a website might not be understandable to all users, and they might have trouble navigating through the site. Furthermore, the breadcrumb trail is often not accurate.
There is no additional or supplemental navigation or help content provided on the website, which is surprising since the site has its logic of browsing the archive (for example, by typing 2017.elevate.at in the address bar, you can browse the website and the content from 2017).
In the footer, the only links available are social media icons, there are no additional links provided.
How are labels used?
The website could do a better job of communicating the core values of the festival: Music, Art and Political Discourse. The structure of the site, as well as its content, should reflect the festival’s foundational principles. The sections of the website could reflect the festival better and should categorise the information the target group will be looking for. For partners and guests, it is hard to find information about the vibe of the festival, though. The logical place to look for information should be under “Festival”, the first category on the main navigation, but the subcategories don’t show much clarity for what the festival is actually about. In the “About” category the user gets a better understanding of the festival, but there are also additional subcategories that could be in the footer instead. Examples for these would be “Imprint” and “Web Attitude”.
As you can see on the site map above, there are a few categories that overlap: “We are Europe” is a category in the global navigation as well as a subcategory of “Festival”. “Photos” is a subcategory of “Festival” and of “About”. This can be confusing when the user checks the breadcrumb, because regardless of the path taken by the user, the breadcrumb looks the same; when clicking on the main category “Festival”, the content presented in the subcategory “Video” is the same as the content from the main category “Media/Videos”.
Under “Festival” and “Programme”, the user would expect to find details about the lineup. Therefore it is recommended to use widely used terms for inscriptions. “Festival” contains a lot of duplicated content — so this point should be removed. Instead of a program, the more common term “line up” would be recommended, even if not only music acts will be findable here. At the moment, “Festival” contains “Music” and “Lineup”. At first glance, this seems to be the same.
Other widespread terms should be used, e.g. “FAQ”, where all the information about the (ongoing) festival could be shown.
The core aim of the website is to sell tickets. So the ticket-area should be on the first place in the menu. Out of the ticket-sale season, information about the prices and the next pre-selling date could be presented.
The site uses “cool” terms like “Web Attitude”. E.g. this says that the festival-website runs on a private server and that users data are protected. Again it would be better to use simple and common terms like “Privacy”. This is a good example for the point mentioned above: The wordings seem to be addressed to people, who are familiar with all those terms and wordings.
Site use cases
The site poorly serves the needs of a visitor who is unfamiliar with the festival. It is difficult to find general information about the festival and its purpose. The site seems overloaded with information and makes it difficult for the user to filter the important ones. It takes some time to find what you are looking for.
Ticket use case from a user
“A few weeks ago I had free tickets for the festival and I had a look on the website for information about the lineup. As a newbie, it was not clear to me what the different programs were about and what I could expect from the events. I gave the tickets away because the website didn’t deliver what I was looking for.”
Improving archive discovery and navigation
The site offers a unique way of navigating the archive content as well as their hashtags, additional help content e.g. a how to navigate video could support the user. Furthermore, an index for the archive would be useful. Since the huge volume of content makes effective categorization and browsing difficult, we recommend using a search option in the main menu. Therefore, the content has to have relevant metadata and taxonomy.
The usage of the website differs through the year, depending on whether it is the pre- or the post-event phase. The following table shows, when and which content should be provided on the site and which goals should be reached at this point:
|Raise interest for the festival and the discussed topics||Provide visitors with news||Present a review of the festival|
|Optimise the categorisation of content||Display line up including artists and further information (stage time,…)||Collect and archive the festival content (internally and externally)|
|Create anticipation about main attractions and discussions||Promote last-minute tickets||Convert festival followers to reliable users (follow up content)|
|Sell tickets||Set up live stream and/or live ticker|
|Provide insights about this year’s location||Set up push notifications for engaging users|
Recommendations & Quick Wins for a better information architecture
After analysing the information architecture of your website, we recommend you to set up a list of operative improvements. In our case, we divided them into two categories — “Recommendations” and “Quick Wins” — which you can find in the table below:
|Integrate the categories “Music”, “Art” and “Political Discourse” to the main navigation||Move “Impressum”, “Web Attitude” and “App” from the global navigation to the footer|
|Create a sticky sidebar navigation for “Ticket”, “Kontakt” and “About”||Optimize the categories that appear more than once in the navigation|
|Include a filter by topic on the “Media/Videos” category||Different content before, during and after the festival|
|Introduce a revised navigation structure featuring all evergreen information about the Elevate festival (this can be done with bigger content clusters)||Don’t make main menu clickable|
|Rework URL structure so it supports site structure comprehension (breadcrumbs should follow the sites you’re navigating through,…)||Either make the search bar visible on every page or delete it if not needed|
|Review breadcrumb trail as main navigation element||Place the archive in the footer|
|Implement Elevate fan area||Use the same logo on the website and in all social media accounts|
|Restructure the “Programm” section||Move all photo/video submenu entries to “Media/Videos”|
|Create microsites (subdomains) for important assets (livestream)||Archive the “Awards” links (no awards have been granted since 2015)|
|Create a function for rating speakers||Translate the English “Imprint” page into English|
|Create a top-level entry for each aspect of the festival|
|Keep “media/archive” a top-level item or move it to the Footer section|
|Improve the search function|
|Define a consistent style guide for hyperlinks|
Rosenfeld, L., Morville, P., & Arango, J. (2015). Information architecture: for the web and beyond (Fourth edition). Sebastopol, CA: O’Reilly Media, Inc.
What is Information Architecture? | IA Institute. (n.d.). Retrieved 6 June 2018, from https://www.iainstitute.org/what-is-ia