SMHI navigation redesign

In surveys, SMHI had perceived that many people had found it difficult to navigate on smhi.se and wanted an improvement in navigation. The focus for this assignment was short-term and they did not want to redo large parts of the site at the moment but try to improve navigation as much as possible without a total redesign.

After a careful analysis, it became clear that navigation is confusing and a hindrance for users and that there are many ways to improve navigation. There were 8-14 different types of menus depending on how you count and several variants on the appearance of menus with the same function.

They are placed in many different places: in the header, on the left, on the right, in several different places in the middle of the page and in the footer.

• There is no structure that the user can recognize and understand.
• Navigation cannot be trusted to work the same way on all pages.
• The user does not know where to look to find the navigation.

• There is too much information, so you do not see what you are looking for
• Some menu options are not visible so you have to guess what they can mean
• It is unclear where in the structure you are

As it did not fit within the task to do a thorough analysis with users' needs confirmed by interviews, impact mapping or the like, material from SMHI's surveys conducted twice a year and documents describing target groups and ideas with the website's design formed the basis for to get an idea of the user needs.

SMHI's goals:

• Benefit users - help them perform their tasks
• Reach users with important content
• Strengthen the brand
• Show that we have many services and are competent
• Promote research and professional services
• Reach younger users who do not see SMHI as the natural choice

Types of users:

• The fast weather visitor
• The planner
• The planner pro
• Weather interested
• Nature and environmental enthusiasts

Users' needs
based on the surveys:

• A large part of the first-time visitors come via mobile phone, so it is important to give them a good first experience there so that they can return.
• Easier to navigate and search. Especially on mobile.

• Clear, simple, and clean impression so you find what you want.
• Quick overview, to be able to see what is available and quickly make the right decision and find the information you are looking for.
• Few clicks to reach the right info

Remove menus

Since the biggest problem with the current navigation is that there are many types of menus with different looks, function and location, the most important thing in the proposed solution is to reduce the number of menus. The solution is therefore to remove all menus that are not included in the proposal for new menus.

When they are removed, you can consider whether to replace them with one of the menus in this proposal or whether it is possible to take the opportunity to remove information or put it in a more logical location.

Consistent appearance and placement of components

When menus are removed and this proposal is implemented, it becomes a much more consistent appearance and placement of menu components. Complete this by doing the same with other components.

Fix responsive design

When the new menus are implemented, responsive design will work better than with current menus. In addition to implementing these correctly, the rest of the site needs to be reviewed and fixed so that it looks good in all screen sizes. Above all, it must never be the case that things can end up off the screen.

Colors

The new navigation uses a new color palette. The old colors are too strong and does not work well together. Therefore, the rest of the site should also be changed according to these colors in a later stage.

Design for screens smaller than 900px: Mobiles and smaller tablets.

• The mobile menu should look and feel the same as other menus because it is common for users to use several different devices to reach smhi.se.

• Different colors on the secondary menu became unclear, so instead they are separated by a line and have smaller fonts to show that there are two menus and that the secondary menu is not as important.

• The warning becomes clearer and blends in better with the rest of the design.
• The design supports all menu levels. Level 4 should be used as little as possible.

• The menu and the search field are hidden and appears when the user presses the Menu button.

Design for screens larger than 1256px: Medium and large desktop screens and large horizontal tablets.

• The main menu needed to be clearer, it is therefore black instead of the secondary menu to get more focus.
• The design gives a calm, clear and clean impression to easily find and get an overview of what the site contains and where the user is on the site. Centered and balanced design contributes to this.

• The current page is displayed in the menu with a blue border to make it even clearer where the user is. This will be a color used for navigation for increased recognition
• Since the warning is important, it needs to be very clear and therefore it gets a clear background color that changes based on the class of the warning.

• The disadvantage of this solution is that it does not hold as much data at level 2 and that it must be structured correctly. But this is also an advantage because you must make difficult choices and remove and sort in the information, which gives increased usability.

There is also a design for screens that is 900px - 1256px.

• This level does not exist on the current site
• This design is introduced so not to hide important information
• It follows the ideas of responsive design and what users of tablets expect a website today.

Since there was no room in this assignment for major analyzes and time to examine all suggestions for improvements, here are some suggestions on how SMHI can move forward to have a modern and useable website that reaches the organization's goals and meets users' needs.

Impact mapping

SMHI should do Impact mapping and work with Impact control. It helps SMHI steer towards benefits from early pre-study, through the construction phase, and into management.

When the project is over, you know that the solution creates the desired benefits, and you will launch a service that is valuable to use and that creates intended value for the business. And when the project is over, there is a plan for how to continue to refine the solution in management.

Divide smhi.se in two

• A fully developed application that is available on the web and as a native app / apps on iOS, Android etc for the services.
• and an information web where everything else is.

More ideas

• Modern fonts and colors
• Show how correct previous forecasts were
• View historical forecasts and how the weather was maybe 2 weeks back
• Better search in general and for municipalitys
• Use one column a little earlier, two columns become very narrow
• More responsive UI, preferably animations

What could be improved

• A lot of the time ware used to go through user needs and the current navigation leaving less time for the design of the new navigation.

• The limited scoop that didn’t leave room for major analyzes and time to examine all suggestions for improvements was a hindrance. It is difficult to make a good solution when you only can look at a small part of the problem. It would be better to improve the navigation when you can look at larger structural and fundamental problems at the same time.

What went well

• The solutions presented will if implemented make it significantly easier to navigate the site and increase the usability.

• It is a good stating point to do more work with the site in the future.