Swim Guide website redesign

Swim Guide is a publicly available website and a free mobile app that delivers real time water quality information to over 1,000,000 users for over 7,000 beaches, lakes, rivers, and swimming holes in 4 different countries (Canada, the US, Mexico, and New Zealand). The water quality info is pulled from government and non-profit monitoring sources and updated daily where it’s available. For instance, in Toronto during the swimming season (June to September), Toronto beaches have updated information every day. But in the off-season, information is not provided (because health units stop testing water quality).

Swim Guide was created because the staff at Lake Ontario Waterkeeper were frequently asked, “Can you swim in Lake Ontario?” For what seems like a simple question isn’t exactly a simple answer. And so in 2011, Lake Ontario Waterkeeper (now known as Swim Drink Fish Canada) launched Swim Guide.

The reason why I’m sharing Swim Guide’s background story is because I think it’s important to understand Swim Guide’s importance to public health. This is an international program run by a Canadian charity that has a staff of just (approximately) 10 people. In the areas where official health units don’t test regularly (or don’t monitor at all), community members voluntarily go out, gather water samples and test the water quality because they really want to know how swimmable their water is. If the water isn’t considered swimmable, they want their community to know. And Swim Guide helps deliver this valuable information.

The Challenge

Being the second designer to take on this project was initially overwhelming. I understood the site’s significance. It’s also a big big site – and we were going to make it bigger.

There were some updates that needed to happen to modernize the site (make it responsive, make it more SEO-friendly, make beaches easier to view and click on, and some under-the-hood code updates). But in order to help provide users with more helpful and relevant information, we wanted to provide a kind of guide – something that could help inform users about issues surrounding health and safety, children-specific concerns, the environment, and general beach things-to-know. This section was eventually called, Beach Basics, and from a content management perspective, it would be integrated through WordPress.

Adding this new section didn’t make the navigation complicated, but it made it clear that the nav bar played a significant part in ensuring the user could always find their way to where they wanted to go. With all of the items that had to be included and ensuring the nav bar didn’t appear to be too cluttered was one of the challenges in this project.

An example of the beach list in mobile.

Another challenge was deciding how to display a list of beaches. To improve on the initial design, the list of beaches had to be easy to view. Initially, I wanted to list beaches with images to make them more attractive and eye-catching, but since the majority of the beaches didn’t have an image, the focus shifted to the name of the beach. I decided on a simple table layout for easy readability, and designated a small column beside the beach names for images, so all wasn’t lost. By working with the developer, we decided on a clean way for the table to appear in mobile mode and it seemed to work.

The final design challenge that stood out was the beach page. For most pages, I created the wireframes before designing. But the beach page had a lot of content and I needed help prioritizing what was more important. The content was split between descriptive content and technical content. So I asked the program manager to tell me how to divide the content since she knew the content best. After confirming that, I worked with the front-end developer to ensure the page collapsed accordingly in mobile mode with consideration to the program manager’s specifications. Technically, this proved to be quite challenging, but the front-end developer did a great job at ensuring the page collapsed smoothly.

I learned a lot from this project. The workflow did circle back a couple times as we tested designs and that did become frustrating. But we had an incredible team. And I feel like with such a project as Swim Guide, exploring certain avenues, testing them out, and then changing direction allowed us to find the best solutions.