Description
We developed a new intranet site for Siemens ARTIFICIAL INTELLIGENCE @ CORPORATE TECHNOLOGY. It serves as the internal communication of services and gives the editors of the website the possibility to change contents and structures independently and individually.
Services
- Development
Technologies
- Gatsby
- GraphQL
- Bootstrap
- Markdown
The Challenge
The old Siemens AI@CT site is based on an outdated web architecture, which causes several problems:
- Slow loading times of individual pages
- No responsive behavior at different screen sizes
- Inconvenient changing of website content
- Design restrictions due to technology limitations
In order to present and sell training, knowledge and processes of Siemens AI@CT internally, the current site needs to be redeveloped. A new high-speed web framework is intended to perfect the loading time of pages and also give editors of the site the ability to easily and quickly add and customize content. For this purpose, an individually adapted CMS shall be integrated into the site.
The implementation
Lightning-fast loading times
We built the new website using the Gatsby component-based JavaScript framework. This allowed us to create pages with the fastest possible loading time. Long cluttered pages could thus be split into several shorter subpages.
Same design, but better
To maintain the corporate identity of Siemens, we integrated the Siemens-internal design theme into the new website. Design elements and functions, which were not feasible with the old technology, were rethought based on CI guidelines, designed and animated.
The new status bar now guides visitors clearly through the processes displayed on the page. It shows the user's current scroll position and, unlike before, now offers a seamless experience on mobile devices as well.
Hover Phone for animation
Tailor-made content management system
Markdown files make up an individualized and function-specific content management system. Texts, images, icons, pages and links can be easily edited and added with it. This does not require a technical background and the function of the page can not be affected unintentionally.
Content such as these texts about a training offered (highlighted in red) can be changed very intuitively via Markdown files. Text formatting, metadata and insertion of components can be done via simple codings.
Filtering of projects
Using the "Use Case Explorer", projects can be intelligently filtered and displayed according to several criteria. Clicking on the respective project displays further detailed information. The page makes use of an existing internal API in which the projects are stored.
