Heading image for IDA article showing Desktop and mobile versions of main menu prototypes

Ida.dk — Main site

The Danish Society of Engineers, IDA has over 130,000 members who use IDA´s broad portfolio of digital tools every day. IDA's numerous microservices and sites are at the core of the business and help to position the association as one of Denmark's most influential unions. As part of the Digitisation and Marketing department, I was, as the association’s only designer, responsible for designing IDA's digital presence.

PROJECT BRIEF

One of the main challenges for IDA is how to help the members navigate the many pages and microservices on the unions platforms.

Hosting events is a core part of IDA's business. Creating an event calendar that can hold up to IDA's various event formats, was a big challenge for the organisation.

Insights & Results

Redesigning IDA's main menu to reduce information overload and increase ease of use was a major project at IDA. I was also responsible for designing a global breadcrumb for the organisations entire site to help users understand where they are and easily navigate through the pages.

Another major project was designing a scalable multitrack event program for the unions many conferences. User-testing showed that users prefer two different models for getting an overview of a conference program.

Deliverables & Disciplines

Digital Product Design / UI / Web / responsive design / interactive prototype

Final Website Mockups

Main menu

The redesign of IDA's main menu resulted in a hover-centered solution on desktop and a tap-centered design on mobile.

Here the tap centered solution is shown on tablet and mobile.

Recruitment &
contact section

Part of IDA's communication strategy is starting conversation around the nerd culture of their members. For this purpose a graphic in a playful style was produced to create a sense of camaraderie and a smile-in-the-mind.

Multitrack program
for conferences

Usertesting showed that people prefer two different layouts for a multitrack program. The first one is a synchronous style program and the second one is asynchronous.

Here the synchronous layout of the program is shown. The blue button switches between the two layouts.

In the second layout – the asynchronous program – blue headings indicates which event is currently running. Grey headings are events that have already run.

Breadcrumb

Breadcrumb navigation was implemented to help users navigate the complexity of IDA's platforms.

Prototype of mobile version of breadcrumb navigation on ida.dk – The Danish Society of Engineers, IDA

Breadcrumb /
Mobile prototype

This is a prototype created to test how a horizontal scrolling breadcrumb would work. The idea is to save precious screen real estate. A more conventional approach to a breadcrumb navigation was chosen, because usertesting showed that the new navigation pattern too foreign to users.

hero carousel /
responsive behavior

The varying length of copy in the hero carousel on the front page of IDA.dk proved to be a big technical challenge. Robust, responsive design patterns had to be established for the content to work on all screen sizes.

Main menu /
design process

The redesign of IDA's main menu was a big topic in the organisation. Many stakeholders had differing perspectives on the design. To communicate to all stakeholders from a user centered point of view, I formulated clear problems and solutions both in written form and visually. This helped stear the project in a user centered direction.

A solution-matrix is used to investigate various solutions to the problem in a systematic fashion. Problem formulation and argumentation are outlined so that stakeholders can follow the design choices.