reSearch: NTNUI

André -

If you want to see the final result, see this page:

reDesign: NTNUI
The completed design presented to the board members of NTNUI. They were interested in having someone create it.
VisualFoolAdmin

Overview

NTNUI is the Norwegian University of Science and Technology's sports association and has been responsible for the university's sports activities for over 100 years. NTNUI has become the Norway's largest and most versatile sports association with over 14,000 members. Making it one of the most visited and used website on NTNU (not counting anything directly related to the university)

CLIENT: NTNUI

DURATION: Ongoing (Started 21.09.2020)

MY ROLE(s): Designer & Researcher

THE PROBLEM

First of all, i will preface this by stating that this is a personal opinion, however, it is also the opinion of many students that was asked during this creation.

First and foremost, the main problem with the website is that it looks old and not maintained. It has a "theme" that is followed through on every page, sub-page and group page.

The theme was designed to be simple, perhaps fit a smaller screen (13inch or similar). The look of the design appears to be influenced by the drop-shadow trend that was used a couple of years ago, but not implemented correctly. This leads it to feels as though it was designed by someone who just recently discovered drop shadow, and has no clear guide for how it should be placed.

So the question is then: why was drop shadow used? I believe it is to differentiate between the boxes and simplify the overarching design, and is the main separation of content.

The Information Architecture

The overarching architecture is great, this is to say if you do not wish to go further than the main page, the web-store or groups. If by chance you do wish to go into any of the pages on this website, you often need to think about where you want to go. An example of this is the link "Info", it is easily accessible in the main navigation, but it do not tell you WHAT information is in this tab, we can barely see that it is a dropdown too. You could say that it is just a general element that is used to hide links from the main view.​​​​​​​

Choice of colors.

First and foremost, i don't think I've seen ANY of the colors from their design guideline used on the website (not counting hover effects).  Which is not that great to be honest. I'll admit that the colors are terrible for use in websites, as they are bright, have a high saturation and difficult to use.

The font color, no it's not great, especially since a lot of them don't meet the WCAG standards required for websites nowadays. I'll also admit that some of the colors looks to have been made for aesthetical reasons, my first and main thought after looking at some of them is that they were made to look embossed (in a sense).

If it were only to look embossed and it was done correctly, that wouldn't be a problem, however as they are now, they are not accessible and will only create problems for some users. A simple quick scan with WAVE (https://wave.webaim.org) shows us that the page has a lot of problems with contrast. Many of the colors need to be changed before it can be used.

Screenshot from a WAVE scan of NTNUI.no

See what I mean by not meeting WCAG standards? This is only on the main page by the way. Kindly put, this website is lacking in both usability and structure. And as many of its sub-pages tend to have a similar design, it can cause lots of problems for regular users.

It will also put people off from visiting this website.

State of art

The main navigation of this page is cluttered and difficult to understand for first-time users. It would make most people disoriented by how many links there are, this section is where I try to define what each part of the navigation is.( Also, now you see why the color choice might pose a problem, the hover color is almost the same as the background, making it difficult to know what they are hovering over. ) Color also changes on different browsers.

Screenshot of the navigation

Nyheter / News

This page contains, as the name implies, "news" and other posts. This is ok if there were a lot of new posts every so often, however there seems to be only 1-3 posts per month. Personally I am not sure why the page “news” is added to the navigation area, yes it can be useful to have, however, most people would only probably find the first 3 or 4 articles interesting to them. The rest would probably just be noise and unrelated information. Having the news placed on the main page, showing the top 3-6 articles, and underneath linking to more news would probably cause less confusion to the regular user. Removing that from the navbar is priority and would make more space available for other things that might be more useful.

Info

The "info" category; a difficult to understand term. What does info mean, does it mean info about this page? About NTNUI? The board? General information about how to and renting football fields? Projects done? Media archive? Information to the volunteers at NTNUI?

If you answered yes to all of those, then you got the "Info" category. It seems to be a multifunctional, "don't know where to put it? Just put it under info" category. This makes it difficult to understand what info mean, and you cannot just click on the info link to get to a page where it explains everything. No, you must manually enter each link in the dropdown menu.

Some of these could have been placed under a "Help & Support" category, which could help the user navigate easier. Both FAQ and For representatives (For Tillitsvalgte) could have been made into a single page, both is a FAQ related page, however one is more leaning towards regular users and one is towards representatives. The main board (Hovedstyret) and About NTNUI (Om NTNUI) could have been placed under a single page. This would remove at least two pages and making it easier to navigate in general. 

Next is the File archive (filarkiv), which I personally thought meant images, and other files related directly to public use. However, this was not the case, this link redirects me to a Google Drive containing, you guessed it, NOT images, but documents and the meeting minutes. Perhaps having it open in a new tab, and showing that it is an external link might be required.

Arrangementer / EventsThe events (Arrangementer) page is a collection of several sub-categories of activities. This page seems to function as a mostly FAQ and calendar page. Why it is split into these 4 categories I am not sure of, as they seem to use the same calendar, and could probably have been on a single page. As some of them seem to have a set of FAQ and information placed in the page, that information could have been moved and placed in a separate page linked to in that single page.The idea behind doing it like that, is removing clutter and making it easier to navigate. The links to the FAQ could be placed in a sitemap on in the footer for easier access later and instead have just a single page for all those, including the calendar.

Let's just come out and say it, the footer is lacking. YES there is one, however it is just a "created by" and some links footer. Since this website is actually quite large, I personally would prefer that they have as many links as possible in the footer, split 50/50 between links and contact information. This is to make it easier for professional people, sponsors and others to find the information they need quickly.