For PIER (Partnership for Innovation, Education and Research) in Hamburg, a strategic partnership between DESY and the University of Hamburg to promote research and teaching, we have designed a new website that consolidates the individual profiles of PIER and the PIER Helmholtz Graduate School (PHGS) and reorganizes the existing content.
Concept
Web Design
Frontend
Icons
Making two into one
Our task was to merge the two separate websites of PIER and the PIER Helmholtz Graduate School (PHGS) into a unified online presence. The existing organically grown content was to be consolidated, modernized, and tailored to the needs of the target audience. A contemporary and responsive design was to be prioritized to provide an engaging user experience for the young target group. The new website should be clear and informative, covering all relevant topics for students, alumni, doctoral candidates, and postdocs, and offering a clear structure. These topics include innovation promotion, teaching, research, and doctoral studies.
Content first
The consolidation of content from PIER and PHGS took place in several workshops involving staff from both institutions. In these workshops, the main topics were defined, and all pages were assembled and edited into a clickable wireframe. This dummy allowed for an early clear understanding of the optimal structure for the later content management system of the website. This methodological approach ensured that the content was not only complete and accurate but also met the requirements and expectations of the target audience.
Since many younger visitors to the PIER website primarily use mobile devices, we placed special emphasis on a responsive design. The website adapts seamlessly to different screen sizes and ensures that all content is displayed as clearly and attractively on smartphones and tablets as on a desktop. This guarantees an optimal user experience regardless of the device used.
For the PIER website, we designed over 40 custom, stylistically consistent pictograms. These icons serve as navigation aids and also help to break up the content. Additionally, some icons were created in optimized versions to maintain clarity and recognizability at smaller sizes. These tailored icons significantly contribute to the website's user-friendliness and help users find their way quickly and intuitively.
Frontend meets Backend
The website design was coordinated and finalized in close collaboration with PIER based on numerous layouts, especially regarding image selection.
After the final approval of the layouts, we created all necessary CSS and HTML elements and prepared them for integration by DESY-IT to ensure a smooth implementation of the site into the ZMS-CMS used by PIER.
Throughout the entire process until the final launch, we supported the PIER team and IT to ensure the website was implemented to everyone's satisfaction. This way, we ensured that the final result met high standards both functionally and aesthetically.
In addition to designing the website, we developed a standalone word/image mark for the »PIER Startup« area.
»PIER Startup« offers workshops focused on various stages of business formation and entrepreneurship. They provide early-career scientists interested in founding their own companies with the necessary knowledge, skills, and techniques.
The logo consists of two upward-pointing arrows that, on one hand, resemble pictograms on moving boxes, conveying a fleeting, improvisational feel along with the stencil font used. On the other hand, the arrows clearly point upward, symbolizing growth and the positive direction of a startup. The colors cyan and red from the PIER corporate design are used to ensure a consistent visual identity.
By merging the websites and restructuring the content, PIER gains a unified and modern online presence.
The clear structure and appealing design improve usability and make information more accessible. The created icons and optimized images further enhance the visual appeal of the website.
