Case Study
ESG Website Redesign
Overview
The ESG is an Austrian society founded in 1986 which promotes and advances the field of nanoscience through the propagation of knowledge.
I was hired to redesign the ESG website to bring it up to modern standards. My tasks included the clarification of stakeholder needs, conducting a website analysis and developing a website hierarchy, wireframes and the visual design. I was also responsible for building the website in WordPress with Elementor.
Framework Conditions
• considering the project budget, I chose to use a website builder (WordPress) and free-to-use plugins (e.g. Elementor among others).
• it was important for the client that they can implement quick and easy content updates by themselves without assistance. I therefore kept the design simple and straightforward.
• the ESG logo was recently redesigned by a third party and should remain unchanged. The design of the website needed to complement the logo, reflect the values of objectivity, honesty, openness and integrity, and honor the legacy of the ESG’s namesake, Erwin Schrödinger.
Stakeholder Needs
I determined stakeholder expectations and needs in a face-to-face meeting and defined the following objectives:
• modernize the website look & feel
• make the website responsive
• increase accessibility
• enable quick and easy content updates
Website Analysis
Are main goals met?
• information is spread over different pages & hard to find
• membership page is not prominently placed & there is no information on benefits for members
Is the site user-friendly?
• the site is not responsive
• the information hierarchy is confusing & difficult to navigate
• there is no consistent color design
Is the site accessible?
• the color contrast conforms to WCAG AA with the exception of links
• HTML does not have a valid value for its [lang] attribute (relevant for screen readers)
• there is insufficient padding for touch screens
Preparing Content
• I collected and examined texts, images and linked files from the old website, including hidden content
• I identified outdated, missing and duplicate information
• I examined images regarding sufficient resolution for widescreens and copyright, replacing them with new images when necessary
• I sorted out images if they served no purpose in the given context, felt outdated or convoluted
Website Architecture
The website initially had a menu navigation of 11 pages which I reduced to 4 in the revised design (Home, About, Past Events, ESG Nano Prizes). Upcoming events and sign up for an ESG membership are now prominently placed on the Homepage. Past ESG symposia have their own event pages which are submenu items of Past Events.
Wireframes
After the client signed off on the new website architecture, I commenced work on the wireframes.
The objective was to create a modern and efficient experience which promotes the events organized by the ESG and showcases their contributions to the field of nanoscience.
Depicted are two examples of wireframes created for the homepage: on the left for desktop and on the right for mobile.
Typography & Buttons
To maintain a minimal and simple look, I chose one font for the design. Differentiation for the layout hierarchy is achieved through various weights and sizes.
I chose Lato, a sans-serif typeface created by Łukasz Dziedzic because of its professional vibe and strong legibility.
Color Palette
The Erwin Schrödinger Society is a scientific society aiming to promote the propagation of knowledge on nanoscience research on the international level. It supports young new talents in the field and celebrates the legacy of nanoscience pioneers. The color palette should therefore communicate professionalism and simplistic elegance, to reflect a modern society with old roots.
The color palette is made up of blacks, greys, golds and copper, the metals serving as a nod to the Society’s issuance of an advancement award for publications in nanoscience and nanotechnology.
Menus
Depicted on the left are the active states of items on the main menu (above) and the drop-down submenu (below).
The right depicts the hover states of items on the main menu (above) and the drop-down submenu (below).
Responsive Design
It was absolutely necessary to make a responsive website which can be used on different devices. I optimized the design for different breakpoints, ensuring optimal legibility and tappability of user interactive elements.
The breakpoints are as follows:
• Desktop & Widescreen:
• Laptop:
• Tablet Landscape:
• Tablet Portrait:
• Mobile:
1367px and up
1201 – 1366px
1025px – 1200px
768px – 1024px
767px and down
Image Credits
The new ESG website displays all image credits when hovering over the image.
