Project

Being a microsite of BET.com, BET Experience (BETX) has two different navigation - a global navigation that takes you to the BET.com pages, and the secondary navigation with the sole purpose of navigation on the BETX pages.

Goals of project are to reduce height of tentpole mobile navigation and to provide a clear way to navigate throughout the tentpole.

View live site

Problem

Users do not understand the current representation of sub navigation that is shown on mobile so they are going to the global nav, and not seeing how to navigate within their show or tentpole. The height of the branded area on top of all pages is too large since it is supporting promotion, navigation, social, and more – this needs to be reduced.

Role

I coordinated and led all facets of design and research including: ux design, user testing and market research, mocks, and visual and interaction design.

Trevor Irmler - Creative Director

Research analysis

Competitive analysis

In order to better understand how to redesign the secondary navigation, I researched how other entertainment show sites treated their navigation. Usually secondary navigations are presented when a user enters a specific show under the network site. Comparing over 10 different sites, two main navigation styles were consistent.

Horizontal Scroll Secondary Navigation

With the scrollable navigation, it allows users to see the navigation at forefront. They are able to understand what navigation items there are and therefore will try to interact with the navigation more.

The downside of this solution is that only the top few items are visible without scrolling and all the remaining ones are off the canvas. However, this also forces the users to explore the navigation items.

This can work for BET Experience because the secondary navigation is what we want the viewers to focus on.

Condense the amount of navigation items
Add clear visual cues for scrollable navigation to show that it is scrollable
Select the heirarchy in terms of what navigation should be shown right when the user lands on the page

Secondary Navigation Within Global Navigation

Adding the secondary navigation into the Global Navigation allows more flexibility to adjust items in the future and will allow you to declutter the screen. It is easy to design across multiple devices and platforms.

However, this will hide navigation items, which can lead to users not using it. However, because BET Experience is set up as an exploration site where visitors can rely exclusively on related links around the site, this might work.

Some suggestions:

Add visual cues to help the users know which nav items are part of BET.com and which is part of BETX

Make the navigation items easy to read
Make interactions straightforward
Add visual cue to show users what page they are currently on
Do not use “home” as that wil confuse the the users of which site that is part of
Name the sections as BET Experience and BET.COM

Design

Hi-fi Mocks & Testing

Because of the time constraint of the project, we skipped the wireframming stage as we wanted to test the functionality of the navigations with the designs on the site. Because the content determines the user flow, it was really important for us to include the content into the prototypes when testing. It was also important for us to test against the actual visual design because some navigation designs were hard to see because of the design of the page. The two main designs that we tested against users were horizontal scrolling nav and the secondary nav within the global nav. There were other iterations, however they were taken out of the running based on the feedbacks from the internal stakeholders where they thought these were the two strongest components of solving the current issue.

Questions asked during testing

What do you think this screen is about?
What is this event about?
What do you feel like you’d want to do on this page?
What would you do to find out more about the event?
How would you navigate around to find additional BETX pages?
Are you able to sense that theres a menu option for just BETX?
Do you feel that the representation of getting around in the site is clear? Why or why not?

Testing Results

Out of the 20 users we tested, around 80% of the users preferred the Global Navigation over the Horizontal Swipe. Global nav is cleaner and easier to use. Not intrusive to the content on the page. Also users commented how it was something they were already used to seeing. When it was being tested, users stated that the usage of a secondary navigation was too obtrusive to the content heavy site.