Case Study: Designing Accessible Website for Panorama-Bad

Posted
Tags
Case Study
Share
On the left there is a text that says before and a screenshot of the old Panorama-Bad website. On the right side, there is a text that says after and 2 screenshots of the current Panorama-Bad website.

Introduction

I am thrilled to announce that the new website for Panorama-Bad Freudenstadt went live last Friday! ๐ŸŽ‰ Check it out here.

Identifying the Challenge

When I first received the initial design for the Panorama-Bad website, I saw that it had some good ideas. However, it needed more structure and a focus on development. The challenge was to create a site that not only showcased the vibrant atmosphere of the swimming pool but also effectively show a lot of information. I wanted to include numerous photos to convey the lively vibe of the facility, but I needed to strike the right balance between visuals and text to ensure a seamless user experience.

Seeking Inspiration

To kick off the project, I dove into research, exploring various swimming pool facility websites. However, I found that many of them lacked the inspiration I was seeking. Frustrated but determined, I created a mood board filled with ideas from diverse sources beyond just swimming pools. This creative exploration helped me establish a unique visual direction for Panorama-Bad to make sure that the design has its playful spirit.

Finding the Right Balance

As I began to conceptualise the design, I knew I had to find a way to include all the necessary information without overwhelming visitors. Thatโ€™s when I had a conversation with Thomas, who developed the website. He suggested making the bubble images interactive, allowing users to click and expand each image. It provided a delightful way for visitors to explore the visuals while keeping the layout clean and organised! Play with it here ๐Ÿซง

The Design Process

With a clear direction in mind, I moved on to the design phase.

I standardised the button styles across different sections to create a cohesive user experience.

5 buttons highlighted. The top 2 buttons have text and right arrow icons. The 3 buttons on the bottom have a stroke around them and text and right arrow icon.
The buttons before
Several dark blue icons on the top and 4 buttons with the text, Zum Sport & Freizeitbad and the right arrow icon.
The buttons after

To improve clarity, I redesigned the accordions to have an open/close button and a CTA button inside the accordion.

The accordion expanded with the title Aqua-Cycling and 2 buttons next to it. The first button sas weniger with a minus icon with light green background and the second button says Termin Anmeldung with the right arrow icon and dark blue background.
The accordion before
The accordion expanded with the title Aqua-Fitness im Panorama-Bad and a minus icon next to it.
The accordion after

Throughout the design process, I prioritised accessibility by following WCAG guidelines. Features like keyboard navigation and screen reader compatibility ensure that all users can enjoy the website fully. Working with Thomas, who understands the importance of accessibility and has extensive knowledge in design and development, made the process much easier and more effective.

Launch

After months of hard work and collaboration, I am happy to see the final result of the Panorama-Bad Freudenstadt website. It beautifully embodies their playful and clean vibe while being well-structured for easy navigation. The positive response, with over 1,000 visitors on the first day, was a wonderful validation of our efforts! ๐Ÿ‘

Conclusion

I truly enjoyed translating the essence of who they are and what they are as Panorama-Bad Freudenstadt into the visual appearance and experience of their website in a way that resonates with the client and their audience.

If youโ€™re looking for an accessibility-focused, purpose-driven designer, I would love to hear from you! Feel free to reach out at hello@yoshieagata.com

Thank you for reading ๐Ÿ™ Until next time!

Yoshie

A screenshot of the old Panorama-Bad wensite with a lot of images.
Old website
The screenshot of the current Panorama-Bad website
New website

Panorama-Bad Freudenstadt website is designed and developed by me and Thomas Günther ๐Ÿฅจ

Related articles

The website navigation and hero of Value for Good

A Case Study: Development-Ready and Accessible Design for Value for Good

The Journey I had the opportunity to work on Value for Good's website redesign. My task was to transform the approved design into something developable, while minimising changes to what the client had signed off on. You can visit the website from here. The Challenge Working with an approved design meant finding creative solutions to make it both developable and accessible, without substantial โ€ฆ

Website design comparison showing before and after screenshots of a musical event page with a vibrant pink background, highlighting improved layout and visual presentation of Cologne's musical event details.

Case Study: Designing An Inclusive & Accessible Platform for Musicians

Introduction I redesigned the website for Globale Musik Kรถln e.V. to improve usability and accessibility. Here's how I tackled its challenges, refined the user experience, and what I learned! You can visit the website from here. My Design Mission The original site had issues that made it hard for users to understand the organisation's purpose, see which musicians they support, find available โ€ฆ