Navbar Design and CTA Hierarchies

[MaggieAppleton]

Why we need to improve our navbar and CTA hierarchies

At the moment our navbar has three big blue buttons that all feel like they're the same level of importance – "browse," "search," and our main CTA button. At the moment that main CTA button says "own your online presence" no matter what kind of user you're logged in as (visitor, non-member with an account, paying member)

Current navbar for three types of users:

Our primary business goal is to get people to sign up for a free account, in order to later convert them into a paying member. None of our primary CTAs currently allow users to do this.

The CTA in the navbar should be reserved for our core business goals. Fleeting project clubs and self-paced value paths are important but nowhere near as important as helping people sign up for accounts and then convert to paying members. The design and visual hierarchy of our navbar should reflect that.

The search and browse buttons are not as important as the primary business goals, and should be styled as secondary buttons rather than primary CTAs.

Proposed design changes

1. Change the browse button and search bar to be styled as secondary buttons.

• We can remove the explicit 'search' button in the search bar and leave it as an open text input area. This is a common and widespread pattern on other websites. Users understand that in order to execute the search, they simply need to hit enter on the keyboard.
• If the user clicks the search bar, doesn't type anything, and simply hits enter, they're taken to https://egghead.io/q?q=
• Browse should be a quiet secondary style button (no outline, no background fill).

2. Browse button should trigger a flyout menu

• Users have consistently submitted feedback saying that they have trouble browsing our content and finding a big picture overview of what topics are on offer. Giving users quick access to a list of our most popular topics through a navbar flyout menu will improve findability and make it easier for users to explore learning materials.
• Flyout menu should list our top 12-16 topics. It should include a "browse all topics" link that takes users to https://egghead.io/topics. It should also include links to Articles, Podcasts, and Talks pages since these are hidden and difficult for users to find.

3. Reserve the primary CTA only for the core business goals of signing up and becoming a member.

• The navbar should only have one CTA, and it should be the most important action we want a user to take at any time on the site. This action is always going to be related to moving them from anonymous visitor -> paying member.
• Anonymous visitors should see "Get Started" which will take them to the sign up page (currently https://egghead.io/login although we need to change this to an onboarding flow in the future).
• Logged-in non-members should see "Become a Member"
• Logged-in members do not see a CTA in the navbar
• Lapsed members should see "Renew Membership"

4. Move fleeting clubs, projects, opportunities, and promotions into banners beneath the navbar.

• Using banners still draws lots of attention to these events and ensures users will notice them. Likely even more noticeable than sticking them in a CTA that is hierarchically equivalent to all the other buttons surrounding it.
• We will have space to include a single sentence that helps explain what the thing is, as well as a CTA.
• Users who are not interested in the offering can easily dismiss the banner so that's it's not getting in the way of their core experience using egghead.

(copywriting here is a placeholder as an example, not a literal suggestion.)

• These events and promotions can also be placed as feature sections on the homepage, or on specific topic pages.

5. Move the dark mode/light mode settings to the user settings page

• Settings are currently on https://egghead.io/user
• Users do not frequently swap between dark and light mode and do not need persistent access to this setting. Placing it on the account settings page keeps it only two clicks away, and opens up space in the nav bar to avoided overcrowding.
• Creating a clearly labelled toggle in the top right-hand corner of the account settings page will make it easy to find.

• More detailed design for this available on the Profile page of the egghead Design System file in our team Figma. There are larger profile design changes suggested in that file which can be ignored for now. Simply moving the light/dark toggle is sufficient for this scope.

6. Change the "Bookmarks" button to read "My Dashboard"

• This sets us up for future work improving the logged-in home dashboard experience where users will be able to find their recently watched courses, bookmarks, and notes. (This one isn't critical and can be delayed until we have bandwidth to work on the dashboard page)

---

These design mockups are all accessible in our Figma account inside the egghead Design System file. In the left-hand toolbar under Pages click into the "Navigation" page.

The navbar layout is pulled directly from Tailwinds UI, which can be used as a base to speed up development. It takes care of mobile view and dark mode as well. The flyout menu for the 'browse' button and the promotion banners are also based in Tailwinds UI

[joelhooks]

I really like where vercel stashes light/dark mode and the addition of the "system" preference. their footer is generally good imo

[MaggieAppleton]

That's a great spot for it, hadn't thought of that. Keeps it easily accessible and less awkward than squishing it on the settings page

[joelhooks]

Ya, I noticed it the other day and thought about your comment. I also like the idea of respecting system prefs this way. This feels like a good pattern that could also be applied to our template. The "robust sitemap" in the footer is cool too.