context
In a none curricular project in the third semester, I was offered to recondition and design the universities history for the new website in a large team of students.
time, course
project duration: 1 semester
course: none curricular
semester: 3rd in 2019
kick-off
How do you tell a story?
research
We organized access to the HfG archive, interviewed the city for information about the development of the university, interviewed selected people who had previously taught or studied at the university. We conducted research on the embedding of the history of other universities. We developed various personas and a user journey for the website.
We defined these terms, which we should keep in mind when we work on the design
and revision of the story.
design concept
We have created four tracks that run horizontally with the timeline. Among them are the university, the person, the project and the student path. Another track at the bottom of the screen is filled with events of temporal importance. Both political and design-related topics are listed here. Horizontal scrolling corresponds to the course of a temporal narrative. In this way, connections and their influences on each other can be shown and highlighted.
interaction depth of information
Each track has three information depths. If you go into the most detailed one, the others minimize, you only see the most essential information. You have to click on the bar to change the view.
interaction sidebar
To create more space on the screen, the sidebar can be hidden. There is also a selection option in the project track.
interaction hover
Information that would overlap is not shown - it is only displayed when the cursor is moved over the small rectangle. Adjacent events are moved to the right by the animation. The rectangles in front of the events simplify the timing on the timeline. The structure invites you to browse through and to learn more about the history of the HfG Schwäbisch Gmünd.
interaction projects
At the deepest level of the project track, you can hover over the various programs of study and get their percentage rate related to all projects of one semester. In that track you can also you use the sidebar to select one study programme.
concept 1 year view
Furthermore, our depiction reflects the way of thinking of the HfG very well. What the students and their projects stand for. The site is also designed as a kind of portfolio of the HfG. If you switch to the one-year view, you can take a closer look at the projects created this year.
detailed view
The deepest level is the detail view of a single event, person or project. Keywords that were relevant in this article or which generally are at the HfG can highlight certain sections of a description. In this way, information that is important can be filtered out easily.
solution
Due to the enormous scale, it could not be completed within one semester. Both, visual speak the UI and the content is still being developed and will hopefully be embedded in the website.
team partner
Fiona Philipp, Simon Widmann, Janik Freisinger,
Maximilian Walter and David Sigloch
supervised by
Prof. Dr. Dagmar Rinker, Prof. Jörg Beck, Prof. David Oswald and Prof. Hartmut Bohnacker
