Building a Mega Menu for Revfine.com
An information hierarchy UX Case Study
The Client Overview
Revfine.com is a popular educational website with articles about Revenue Management, Marketing Strategies, Trends and other similar information in the Tourism & Hospitality industry. The format of the website is SEO-focused blog on WordPress, offering B2B marketing for digital services and products designed for hoteliers.
The menu on Revfine.com has not changed, with the following categories for their articles:
Hotel & Hospitality Tips
Marketing & Distribution
Revenue Management
Hotel Operations
Software
Technology
Staffing & Career
Travel & Tourism Tips
Marketing & Distribution
Technology & Software
Staffing & Career Tips
The Problem Overview
The website has accumulated more than 400 articles over their years of operation. The main topics that were covered in the beginning, as outlined in the existing website menu categories, have grown to include additional topics. Over time, it became difficult to place new articles that might not fit within the current categories.
With their current limited menu and categories, the user has trouble finding the articles they are interested.
Example: There have been multiple articles published about the restaurant industry, as it is a big part of the hospitality industry. But as there isn’t a separate category for the Restaurant industry, the user would not even know they can find articles on this topic.
You may ask, why didn’t the client just create new categories as he published new articles about different topics?
The client struggled with categorization of the new articles in relation to the older articles, as well as not having the capacity to revisit existing articles and assign them to potentially new categories. Their assumption was that, as more categories would be introduced, older articles would then need re-categorizing as well.
The Task
The task can then be classified as an Information Hierarchy Problem and described as:
Find the most appropriate way to recategorize the Revfine.com articles and present them on the menu in way that is the most effective and easy to navigate for the user.
To define Information Hierarchy and the scope:
Information Hierarchy, in essence, involves arranging and displaying information in a concise and organized fashion. Its purpose is to prioritize essential elements, highlight key information, and facilitate a logical flow for users. The objective is straightforward: to enable users to navigate effortlessly, comprehend the hierarchy of content, and make well-informed choices. (Source)
Phase 1: Collection of Data
The first stage of the process is to collect all of the articles - data - that need to be recategorized. These articles were taken directly from the WordPress directory. This phase revealed that there are three types of articles available on Revfine.com:
In-house Keyword-Focused Articles. These are articles produced by the content managers and copywriters of Revfine.com. They are DEO optimized keyword-focused articles that have one or more focus (e.g. Hotel Software Types Solutions To Boost Revenue - could be about Hotel software and Revenue Management Strategies using the hotel software.
Expert Panel Articles. These articles are topic-based articles with a main question and answers presented as quotes by industry experts. It is not SEo optimized, however, each Industry Expert Panel article covers a topic relevant to either Hotel Marketing or Hotel Revenue Management, therefore, they are relevant for this categorization.
Sponsored Partner Websites. These articles are written and published by partners, directing readers to their services or products. At the same time, each of these articles are about services or products that solve a Hotel Marketing or Hotel Revenue Management problem, so they can be accessed as a regular article on the website and are relevant for this project.
Phase 2: Data Analysis & Categorization Process
After having collected all of the articles that need to fall into new categories, I decided to use Figma for an easy way to quickly change and move the information around. This process required brainstorming and resulted in an Affinity Diagram.
Three main categories were created and presented in separate Pages on Figma. I was able to place all of the articles to these three categories easily:
Hotel Industry
Travel & Tourism
Hospitality Industry
2.1. Concerns
Once the articles were placed in the three parent categories, some pain points about finding the correct placing for certain articles and ambiguity on specific terms within the industries became apparent:
Some articles clearly stated being about the ‘Hospitality Industry”, however, only talked about the Hotel Industry. This made them eligible for both, hospitality and hotel industry parent categories.
A few of the new categories formed only had 2 or 3 articles. A question is raised if there should be a minimum number of articles per category.
2.2. Affinity Diagrams
The following three Affinity Diagrams were designed for each of the parent category:
Affinity Diagram: Travel & Tourism Parent Category
Affinity Diagram: Hotel Industry Parent Category
Affinity Diagram: Hospitality Industry Parent Category
2.3. Key Affinity Diagram Elements:
Color Coding. Each of the sub-categories have their own color for distinction.
Full Article Titles. All the articles are shown with their full titles and linked to the actual article on the website. This made the process of categorization easier, as any questionable articles could be instantly locatable.
Bolded Articles. These are the Sponsored Partner articles.
Underlined Articles. These are the Expert Panel articles.
Articles of Different Color in a Category. These are articles that belong in more than one category. The color of the article itself is the primary category, and the location it is placed in is the secondary category.
Phase 3: Conceptualization, Design and Prototyping
During this phase, a lot of attention was given to the target group of the website and the main articles and categories that are most popular. Google Analytics and Sitemap analysis showed the most popular articles visited daily, which clearly indicated the most sought-after articles. These articles and, subsequently, the categories they were in, would be placed in the higher priority on the new menu.
Ultimately, two wireframes represented the two potential ways to represent the new categories.
3.1. Extended Dropdown Menu Design
The following wireframe was designed to show the categories in a simple extended dropdown format. This is a common approach to showing multiple categories on websites and has multiple benefits, such as being extremely easy to implement on the website, easily recognizable for users and easily adjustable in the future.
Image 1 is a low-fidelity prototype showing the first parent category and extended first sub-category. Image 2 is a high-fidelity prototype of the same parent category dropdown.
Image 1. Low-fidelity prototype.
Image 2. High-fidelity prototype.
3.2. Mega Menu Design
Another idea for the problem solution was a mega menu, which can be beneficial in scenarios that require presenting large amounts of content immediately and in a more advanced style. Some of the benefits of the mega menu include:
Content being shown immediately, allowing the user navigate and see what the company has on offer. Often used for ecommerce.
Allows navigation within the menu, without leaving the page, so user gets the chance to explore the categories before committing to clicking through.
Mega menus are visually appealing and allow great visual customization. They align with brand colors, have space for images.
Images that can be placed within the mega menu can be used for advertising space.
Some of the downsides to the Mega Menu are the fact it is not as easily customizable in the future, and it is only visible on desktop. For this reason, the desktop solution for this menu would have to be the dropdown option.
Image 1 below is a low-fidelity wireframe of the mega menu for Revfine.com with directions and explanations of elements within. Image 2 is the high-fidelity prototype of the same design.
Image 1. Low-fidelity wireframe.
Image 2. High-fidelity prototype.
Phase 4: Testing & Final Decisions
During the testing phase both solutions were presented to a selected group of users, as well as other stakeholders.
While the dropdown function was decided to be clear and easy to use, the majority of users were more excited about the mega menu solution. It showed more engagement, a higher interest in new topics, as it was much easier to navigate and get a general view of the categories and find new categories users wanted to engage with. Additionally, stakeholders found the additional advertising spaces very promising.
In terms of the deliverables and product recategorization brief, the client was left satisfied.
This project provided them with the following results:
A new system to categorize old and new articles on Revfine.com.
An up-to-date overview of all of their articles and the topics that they have covered over the years.
Two concrete solutions for desktop for showcasing the new categories, and one for desktop.
An easily navigable Mega Menu design to be implemented when needed.