SN Navigation
-

Redesign the Navigation on Sporting News

The Challenge

Sporting News is a multi-sport news website. I was tasked with conducting a usability audit of their site and report back the issues within a report.

The Approach

I conducted a usability audit of their site basing it on user feedback. I analysed the site and reported back issues within a report. The report was well received and Sporting News wanted a quick fix to improve the site usability. My suggested action was to redesign the site navigation. I designed the functionality of the new navigation. I  advised on the visual design and development.

The Outcome

The outcome was a new navigation which was full responsive and allowed users to get to section with few click. The new navigation has increased user clicks by 50%, proving it to be a success in driving users to more sections on the site.

Client: Sporting News
My Role: Lead UX Designer

Old Navigation 
New Navigation 

Testing the Existing Site

The existing site was tested on userbrain. We wrote a test and then we used userbrain to recruit users to participate. Users completed the task whilst thinking aloud. This revealed critical usability issue within the site. The video shows a summary of our findings.

The task was kept simple - Imagine you're an NFL fan, and would like to check out the latest scores. How do you think you would find them?

Key Issues

The key issues found from the userbrain tests are highlighted and explained below. These turned into requirements for the new navigation.

Issue 1
Hidden Navigation

Hiding the navigation within a hamburger meant it took users up to 4 attempts to find the sub-nav. Analytics suggested users leave the site after viewing 1 page. Certain pages were getting no traffic.

Issue 2
No Page Titles

No page titles meant users were confused as to where they were on the site. This was particularly an issue as many of the pages on the site looked the same.

Issue 3
Ambiguous Icons

Users were confused by the meaning of certain icons. ‘+’ in this context is a dropdown button however users thought it was an ‘add’ button. User confusion reduced user engagement.

Issue 4
Non-Responsive

Responsive design is a must for any website, but particularly an issue for Sporting News as most of the traffic comes from mobile devices.

Organise Information Architecture

In a nutshell the research suggested the current navigation made it difficult for users to reach different sections on the site. It was essential the new navigation made it easy to reach different sports, easily access sub sections within a sport and easily access individual pieces of content without losing a sense of position.

Wireframes for a Responsive Framework

The navigation was designed considering mobiles devices which included popular break points. This was to ensure the Sporting News site was keeping with the times and the site was optimised regardless of which device it was viewed on.

Design

The wireframes were passed over to the design team who styled the wireframes created. I offered my guidance on how they could keep the syles matching the existing Sporting News visual style.

Desktop - 1024px 
Tablet - 770px
Mobile - 320px

Issue 1 - Hidden Navigation
Accessible Navigation

The sports available on the site were made to be clearly visible and the sub-navigation was easily accessible. Less clicks + clearly visible sections = more user engagement.

Issue 2 - No Page Titles
Nav Provides Page Title

The navigation served as the page titles and the highlighted section indicated to users where they were on the site at all times and how they got there. e.g NFL > NFL Home

Issue 3 - Ambigious Icons
Recognisable Icons

Icons were tested to ensure their functionality was clear to avoid user confusion. This ultimately improved user engagement.

Issue 4 - Non Responive
Responsive

The navigation was optimised to work on all responsive break points so the experience is available on mobile devices, where the majority of the traffic is received.

Validation

Once the navigation was fully developed and live on site another userbrain test was conducted, this time to test the functionality of the new navigation. The same test which used when testing the site was used. This allowed us to see how the new navigation had improved the site. Users found the navigation “pretty straightforward” however other usability issues were raised on other areas of the site. Watch an example userbrain video below.

Improved Site Performance

Heat maps were placed on the site to test engagement between the old and new navigation. The new navigation increased user clicks by 50% proving it to be a success in driving users to more sections on the site.

Old Navigation 
New Navigation

Conclusion

I was happy with the functionaliy of the navigation and it was rewarding to receive positive feedback from users. I would have liked to have more of a say on the visual styling, with tight time constraint this wasn't possible. I found working with the development team (which were co-located) a frustrating challenge, communicating to them exactly how the navigation should be created. It's fair to say this dramatically improved my communication skills! 

[unex_ce_button id="content_8oqn7gf4f" button_text_color="#ffffff" button_font="bold" button_font_size="18px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#e9373a" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="transparent" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#f37486" button_border_hover_color="transparent" button_link="http://www.sportingnews.com/" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]View Sporting News[/ce_button]