Overview
Project Goal
Our team has been tasked with developing a pollutant monitoring application to display and analyze water quality data across the UK and EU. The application aims to:
Provide comprehensive insights into water pollutant data.
Highlight safety compliance statuses and geographic patterns.
Enable users to explore water quality trends effectively.
The solution will serve a broad range of users, including environmental researchers, policymakers, and the general public, offering user-friendly and accessible features to promote informed decision-making.
Requirements
The pollutant monitoring application must meet the following functional and technical requirements:
Core Functionality
Display water quality data through an intuitive main dashboard with links to detailed pages.
Provide specific pollutant data categorized into key sections:
Pollutant Overview: Detailed information on common and other organic pollutants.
Persistent Organic Pollutants: Highlight their environmental and health impacts.
Environmental Litter Indicators: Data on physical pollutant levels in water.
Fluorinated Compounds: Monitor PFAS and other fluorinated compounds.
Compliance Dashboard: Offer insights into regulatory compliance across pollutants.
Accessibility & Usability
Implement clear color contrast for data visualizations to ensure accessibility.
Ensure responsive functionality across devices.
Develop interactive tools for an engaging user experience.
Target Users
Environmental researchers, policymakers, and general public users.
Tools
The development of the minimum viable product utilized the following tools:
Figma: For all design iterations, enabling collaborative prototyping, wireframing, and user interface design to refine the application's visual and interactive elements.
C++/Qt6: For application development, ensuring performance, cross-platform support, and a responsive user interface.
Team
Our team has been hired to develop a pollutant monitoring application that displays water
quality data across the UK and EU. The application should provide details on water pollutant
data, safety compliance status and geographic patterns to help explore the water quality
trend. The application must include the following pages:
Overview
Iterations, Feedback, and Prototypes
We did 3 rounds of user testing, each with major design changes
Page 1
Dashboard
Recipe suggestions make cooking at home more efficient by decreasing the
amount of time it takes to determine a recipe that can be made utilizing the ingredients
the user has on hand
Iteration 1
The cards are arranged as three in a roll, influenced by the Met Office. The card will be too big on the page for a 2-2-2 arrangement, and it looks too dense to fit in one roll. (Image from Met Office website, 2024)
Iteration 2
While aiming to achieve the aesthetic and minimalist design from Nielsen’s Heuristics, the
design from iteration 1 was overly plain. The lack of colours was unappealing, uninviting and unprofessional, which potentially reduce user retention rate. For this iteration, we had
difficulties on determining images that reflected each page while looking aesthetic and
cohesive. One member found three groups of images: vectors images, photographs andPAGE 4 icons (refer to Dashboard images document). We have unanimously decided that the using photographs is the most appealing option.
Iteration 3
Some users have found the card design unappealing, they lost interest to continue using the application. In response, we revisited the design alternative stage, conducted extra research and created a new and fresh design. We keep the 3-in-a-role layout as users prefer it and it is a common layout in well-received website such as Microsoft Learn and AccuWeather.
Evaluation
We did 3 rounds of user testing, each with major design changes
To evaluate our design, we have conducted a usability testing in a controlled setting, where
our team will observe the user’s behaviour while they navigate through the application. We
asked them to perform a set of tasks, after each task we will then ask questions in an
interview style such as: “What do you like/dislike about this page?”, “What is the purpose of
this page?”, “Was it difficult to perform this task”, “What can be done to improve it?”
Before conducting the usability testing, participants were given a participant information
sheet, to carefully read through and understand the process of this test and how these data
will be handled. We then either provided a consent form for the participant to sign or verbally
asked for their consent to continue this test.
Due to time constraints, we could not conduct crowdsourcing and find an ideal potential user,
hence the feedback was based on views of general audience. Additionally, we do not have
an advanced technology such as eye tracking technology to conduct further evaluation.
All data were qualitative, we then conducted thematic analysis to identify and present
recurring patterns or themes in data. (Sovacool & Hall, 2023).
Reflection
A note on the overall challenges faced, and how the project turned out.
Challenges
This project came with its fair share of challenges:
At the start, we underestimated the scope of the data we were working with, which made designing during the first iteration tricky. Without a clear understanding of the dataset, it was difficult to make informed design decisions.
We were designing and developing simultaneously, which required constant communication between the design and development sides.
The dataset was massive, containing thousands of rows, and none of us had worked with data on that scale before. Our developers had to spend significant time solving logistical issues before they could start on the UI.
We were working under a tight two-week deadline, which left little room for trial and error.
One of our team members wasn’t able to contribute, which left us as a team of four instead of five, making the tight deadline even harder to meet.
Conclusion
Despite the chaos, this project turned out to be one of my favorites. I had the chance to work with an amazing team of five (well, four active members)—three second-year computer science students, an engineering student, and myself. We shared a great dynamic, with each person bringing their strengths to the table and taking ownership of their role.
The project taught me the importance of adaptability. Unlike projects I’ve worked on in professional settings, where design leads development, this required us to move in tandem, designing while coding was in progress. It was an incredible opportunity to learn more about collaborating with developers in real time, which strengthened my understanding of their workflows and challenges.
Another adjustment was the limited user feedback. In an ideal world, we’d have conducted thorough user interviews with each prototype, but we had to rely on quick iterations and our best judgment to move forward. Despite these constraints, we stayed focused, supported one another, and got the job done.
I’m proud of this project—not just because we met the deadline, but because it highlighted the power of teamwork, adaptability, and clear communication. It’s a testament to how much can be accomplished with the right mindset and a committed team.
Interactive Prototype
Framer 2023
Amsterdam