Designing a navigation and catalogue menu for a magazine website

Client:

Bread Mag

Industry:

Publishing | Journalism | E-commerce

Role:

UX designer | UI designer | Visual designer

Output:

Tools:

Figma | Lottie

Proto-

type

Bread Mag magazine website homepage

Context:

Bread Mag celebrates bread, bakers and the art of bread making. The site gives readers a place to discover articles, explore recipes and purchase equipment, ingredients and merchandise.

Visitors must sift through large quantities of content to locate particular editorials, recipes or products or simply enjoy browsing the offerings.

A persistent top bar navigation with a drop down catalogue menu would ensure users have access to all content from any page.

Design a singular navigation experience for users with different goals, through layers of categories and subcategories, to get to their desired content.

Principles:

Clear information hierarchy
Organize categories and subcategories logically to guide users through large quantities of content effectively.
Visual cues and feedback
Use visual cues, color, and hover effects, to provide immediate feedback, indicating users of their place in the menu and clickable content.
Breathing room
Utilize space strategically for balance, readability, and reduced cognitive load, enabling users to focus on the content.
Coherence and consistency
Establish consistent visual language, layout, and typography across the navigation and menu to reinforce brand identity and maintain coherent user experience.
Charm and authenticity
Develop a warm, and charming brand feeling through image choice and treatment, typography and visual design.

Scope:

Create a magazine style homepage, top bar menu and catalogue menu to give users access to all Bread Mag content from any page on the website.

The menu will include intuitive navigation, interactive elements, and dynamic special content.

The design will be responsive across devices.

Research:

The primary research activity undertaken was a comparative landscape assesment.

By examining navigation and catalogue menus of e-commerce and publishing companies, I'm able to discern best practices and potential difficulties in designing for large amounts of browsable information.

Catalogue menu screens

Desktop and mobile navigation experience of Buzzfeed.

Desktop and mobile navigation experience of Nalgene.

Desktop and mobile navigation experience of Sephora.

Key findings:

Successful catalogue menus use common UX patterns, such as top bar navigation.
Mouse enter interactions streamline user flows and minimize the number of clicks required to access desired content.
Drop down menus that span the width of a screen afford enough space for special content in desktop format.
Menu interactions became inconsistent across devices. Some sites use hamburger menus for mobile, some used a horizontally scrolling top bar and some eliminate any subcategory choice and take you directly to a broader category page.

Potential challenges:

Scalability. The quantity of content could grows with the addition of articles, recipes, and products, potentially requiring more categories or subcategories than can fit within the menu area.
A mega menu needs to be condensed for smaller screen sizes and require distinct interactions and responsiveness to be usable.
Category titles might exceed the space provided. This can result in text being cut off or wrapping onto multiple lines, which can make the menu appear messy and difficult to read.

Design:

I began by using wireframes to visualize content in place.

Research-driven insights recognized top bar navigation as the ideal approach, allowing flexibility within the drop-down box to iterate on content structure, layout, hierarchy and interactions.

Bread Mag wireframes

Homepage wireframe with top bar navigation.

Homepage wireframe with mega-menu dropdown; categories and items displayed.

Revisions:

Initially, my wireframes displayed every category and subcategory within the expanded mega-menu, which could inundate users with too much information.

The subsequent wireframes hide the clickable link content until the parent category is hovered over, revealing just the main categories in the expanded view.

This approach creates a well-defined information hierarchy, minimizes visual clutter and cognitive load by incorporating ample whitespace, and creates a more intuitive experience.

Homepage wireframe with top bar navigation, open menu, no hover state activated.

Homepage wireframe with open menu and hover state activated to show menu category item links,

Second level menu appears upon hover over primary menu category.

Category and Item selection is indicated using color fills to highlight content

Results:

The navigation designed for Bread Mag is a top bar, drop-down menu catalogue with layered interactivity, highlights, transparency, and thoughtful visual design that provides easy finding and browsing for users.

Demonstration of menu interactions

Content is organized with clear information hierarchy, logically guiding users through categories of articles, recipes and merchandise. By categorizing and presenting content in a structured manner, with primary, secondary and tertiary lists, people can easily locate and access desired information.

Color fill highlights and text bolding hover effects provide immediate feedback and visual cues to users, guiding them to clickable links and indicating their position in the menu.

By rendering the menu background slightly transparent a users is able to maintain a contextual awareness of their position on the website. This is beneficial in preventing disorientation while interacting with the mega-menu, especially since it can occupy a significant area of the screen when open, potentially leading users to believe they've navigated to a new page. Transparency conveys the temporary presence of the menu on the page.

The strategic use of empty space creates breathing room for content, a sense of balance, improves readability, and reduces cognitive load. With generous spacing between menu items and content categories, users can focus on the menu's content without feeling overwhelmed, corresponding with the objective of reducing clutter.

I created a navigation with consistent visual language, layout, typography and imagery which reinforces Bread Mag's brand identity across the site.

The brand essence is achieved with playful image choices, clear and legible typography, a contemporary color pallet, and quirky copywriting for the special content, evoking charm and authenticity.

Final thoughts:

Prototyping early in my process was useful. By creating interactive prototypes at an early stage I could visualize the mega-menu's architecture and dynamic layout in action. A tangible representation provided me better understanding of how the main menu, secondary menu and links would interact and transition, offering valuable clarity on the user flow.