Halloluise

We redesigned our high­school's website to fit modern standards and easy content access.

→ Visit live site (halloluise.de)

The challenge

The previous website was neither responsive, nor was the structure adjusted to the mindlessly added content that overloaded the existing pages. On the other hand, outdated content wasn't removed or updated.

We ended up having a four-level sub-menu and over 300 pages filled with information. The hardest challenge was breaking down the existing structure and reducing detours while searching for facts and figures.

A screenshot of the old navigation

The approach

We created a fullscreen navigation with a scrollable sub-navigation on particular pages that are parent of more layers of content. This way, one can quickly decide what area they want to dive into on a deeper level. Once in a sub-level, the user can jump to other topics in the selected level without opening the fullscreen nav over and over again.

Sub-level menu

Mobile version

Quickly checking some information on the go might not be the primary use case of a school's website, but with more than 38k unique page views in the first month after the launch, we had to focus on making the mobile experience as easeful as possible.

Reducing friction

To show important areas of the school and what the day-to-day life looks like, we placed a slider at the top to highlight crucial aspects.

Right below the introdcution, users can find latest news and upcoming dates at a glance.

The footer does not only contain boring things, but also truly helpful bits and pieces that can answer the user's questions straight away. Also, they can find all contact information right at their fingertip. This applies for the school's phone number in the header as well.

Visual language

Building on top of the previous CI, we updated and modernized the appearance and typography but stuck to the former color palette.

Takeaways

It took immense effort and time to brainstorm and digest the status quo. However, creating a structure upfront helped us identify pain points and critical areas early on.

The old version of the website was hand-coded, which means that every time there was a change needed, only someone who knew how to code was able to handle that. We switched to WordPress to allow easy content editing. Update: We are preparing to switch to Kirby soon.