top of page

Head Navigation V2

UX Research / UX Design / UI Design

Frame 391.png


The MVP's header navigation had an overly tall height, resulting in the main articles being pushed down the page. This, in turn, created a situation where users landing on the page initially couldn't easily see the content without having to scroll down.

Furthermore, when a high-impact advertisement was present at the top, it almost entirely obscured the page, dominated by advertising and the header navigation.

I was the lead designer developing the strategy for better user experience for head navigation. The goal of our project was to create a more compact but user-friendly and scalable global navigation.

I partnered closely with cross-functional teammates from Project Managers, Editorial team, Marketing team, and Engineering to ensure that the product provided user value to both sets of customers.

What I Did

UX Research, Competitive Research, design thinking workshop planning and facilitation, User Testing, UX Design, UI Design, Rapid Prototyping, Usability evaluation

Project Timeline

Design + Research Time: 3 Months (March 2022 - June 2022)
Project Time: March 2022 - September 2022
(Until the MVP launch)


  • How might we create a more compact but user-friendly and scalable global navigation?

Out Comes

  • More scalable navigation for the future contents and additional sections

  • Increase 20% for the space for the main content on the site

  • Less intrusive header when the user browsing through the website

Feedback from Users on MVP Head navigation

We receive a few feedback on Hotjar.

“I just wanted to see the chart but the ads and the menu bar are hiding. I can't see.”

“The top navigation basically takes over more than half of the page. It is wasting a lot of space on the top.”

“The scrolling effect on the top navigation is really annoying.”


Creating a compact, user-friendly, and scalable global navigation was our goal.



The head navigation takes up a significant portion of the page's real estate and can push down important content, affecting the user experience.


Intrusive scrolling behavior

The collapsing and expanding of the navigation can interrupt the user's reading experience and browsing on the website.


Similar issues go on the mobile version.


The user normally bounces even before they reach the main content.

Users tend to bounce immediately upon landing on the page without scrolling down.

Evaluate again the CoinDesk's MVP design.

New Designs

Frame 390.png



Head Navigation before sign in SSO

Head Navigation after sign in SSO

After the user scrolls down and then back up a bit, a more compact version of the header navigation will be displayed

Head Navigation with breaking news bar

Dark Mode

Head Navigation with breaking news bar

Compact version head navigation


Light Mode

Dark Mode

Upon scrolling down and then up slightly, a condensed version of the header navigation will appear.

Scrolling Behavior

Much more concise on the header



With in-house ads

More Scalable Header

Increasing the available space for the primary content

With Ads

Positive Impact

I left the company right before the developer started developing the project. Therefore will not have detailed data for the impact afterward.***

More Scalable, More Space

Give more room for future content categories as the crypto field is constantly growing. 

Less Intrusive scrolling behavior

Got sign-off from the executive team and launch it.

bottom of page