EGATIN

Background:

EGATIN is more than 30 years old organisation that needed a brand and website refresh. They didn’t want to change their logo as it was the only thing that was visually connected to their brand, but they wanted to make it more modern and to develop a visual identity based on it.

Their website was developed in the 90’s and needed complete revamp so it could help EGATIN achieve their aims.

Objectives:

Bringing more awareness to the EGATIN organisation, aims and activities in order to attract younger people to attend their events and to attract more potential members.

Based on discussions with committee members we have concluded that there are two main tasks users are coming to the website for:

• To learn more about the EGATIN organisation
• To find out which EGATIN members are the closest to them

EGATIN logo and logo variations.

Visual identity is completely based on the EGATIN logo that had a colorful refresh. The logo consist of circles that are connected forming the letter “E”. The symbolism in the logo is very important to EGATIN and that is why it was the inspiration for the whole visual identity.

Colour pallete

Examples of visual identity application.

Animation of the logo design for the website

I have developed a design system based on the visual identity.

Pre-footer CTA section.

Main website navigation

Three most important website pages are Homepage, Event page and Members page.

Homepage

• Hero section is dedicated to the next EGATIN event.
• Next section is guiding users to the three most wanted information on the website.
• Third section is an interactive map with EGATIN members.
• After the map there is a pre-footer section that is repeating on all the website pages but with a different CTA and suggested content.

Map representing EGATIN members on the home page

Dots on this world map represent each of the country that has EGATIN members. By hovering over those dots the tooltip with all the members from that country will appear.

The map is helping users to visually get an idea of how vast the EGATIN network is. Also, this way the people looking for EGATIN members in their own country could easily get the information they seek, in a more engaging way.

Members page

EGATIN members and their information is one of the most important parts of their website content. People are searching for EGATIN members in order to find the certified educational institutions where they can attend the classes. So we needed to make it as easy as possible to filter and search through their members, their statuses and contact information.

The solution was to add a filter on top of the page where users can search members by their membership type and by country.

Filter by country and membership type on the members page

Committee page and a popup for contact information of each member