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

IDA part 1/2:
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.

Problem

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 a event calendar that can hold up to IDA's various event formats, was a big challenge for the organisation.

Solution

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

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 os 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

A 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 their own interests in shaping 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.

IDA part 2/2:
Mit IDA – Members universe

Often the best way to start a conversation about change is by showing what the next evolution might look like. The new concept for MitIDA did exactly that, sparked discussion and broke ground on an important process.

Problem

The internal platform for members of The Danish Society of Engineers, IDA is called, MitIDA (Translated: MyIDA). MitIDA needed a facelift and the user experience needed to be reimagined.

Solution

A number of concepts were developed to spark discussion internally in the organisation, about what the future of MitIDA might look like.

Deliverables & Disciplines

Digital Product Design / UI / Web / Interaction Design / Logo Design

A new entrance

Creating a new entrance for IDA members when signing in to their profile was the first step of building a relevant and engaging platform. Imagery in the theme of engineering paired with forced perspective were used to create the sense of entering into a modern platform.

A new Face

Rethinking the frontpage of MitIDA to cater more specifically to each type of member, whether a student or a member who is retiring.

A new Logo

MitIDA needed a new logo that fits into the brand identity of IDA. For this purpose I created a logo that matches the geometric nature of the IDA-logo without overpowering it. This ensures that MitIDA is defined as a sub brand of IDA. Use of repetition and contrast gives the logo rhythm.

A simple brainstorm is one of the most powerful tools in concept development, whether the end goal is an interface or a logo.

Visualising a brainstorm builds a library of relevant visual material. This can be used for many different things in the process, such as icons, logo-concepts or entire site-concepts.

Sketching logos by hand allows for faster iteration and ideation. Creating this amount of iterations in vector, would have cost a lot of time, without adding much value to the end product.

A higher number of fast iterations allow for a broader exploration of visual directions. This results in a leaner process with an end product of higher quality.