Project Context

While many of us may be familiar with terms like avalanche and hypothermia, our understanding of their signs and appropriate actions is often limited. This website is specifically designed to cater to individuals with little to no experience in mountain climbing or knowledge about avalanche and hypothermia. Our primary goal is to provide a concise yet comprehensive overview of these topics using simple language and intuitive symbols. By doing so, we aim to make it easier for the general public to grasp these concepts.

As a key contributor to this project, my responsibilities revolved around coding various components of the website. I handled everything from the navigation bar and landing photos to content alignment on the pages. Ensuring that the website layout was visually appealing and functional, both on desktop and mobile devices, was also part of my role. By meticulously coding all the necessary elements, I ensured that the website met our expectations in terms of appearance and functionality.

Stage 2: Design Iterations

With our sitemap and style guide in place, we proceeded to prototype the website using Axure. This allowed us to explore various combinations and placements of elements without investing significant time in coding. We focused on designing both the desktop and mobile views, taking into consideration the color scheme we envisioned.

During this stage, we sought feedback from a select group of participants by presenting them with the temporary prototype, complete with actual content. We encouraged them to provide their insights and suggestions regarding areas that required improvement. The feedback we received from these interviews highlighted two key areas that needed attention: color choice and content layout.

The first area of improvement centered around the color scheme. Participants expressed their preferences and provided feedback on the colors used in the prototype. Their input guided us in refining the color palette to ensure visual appeal and readability.

The second area of improvement was the layout of the content. Participants shared their thoughts on the organization and presentation of information. Their feedback allowed us to make adjustments to enhance the clarity and accessibility of the content, ensuring that it effectively communicated the key concepts of avalanche and hypothermia to our target audience.

By conducting these design iterations and gathering feedback from participants, we refined our initial design choices, addressing the areas where improvement was necessary. This iterative process helped us create a more visually appealing and user-friendly website, setting the stage for further development and implementation.

Stage 3: Coding Out The Responsive Website

During the coding phase of our website, my team and I faced a crucial decision regarding the placement of the navigation bar to enhance accessibility for both mobile and desktop users. Initially, we placed the navigation bar at the top of the web page, without it being fixed to the page when users scrolled. However, we soon realized that this design pattern forced users to scroll back up to the top each time they wanted to access a different page. Recognizing this inconvenience, we opted to move the navigation bar to the bottom of the page and make it fixed.

As we conducted user testing, we discovered a new challenge: mobile users were accidentally clicking on the navigation bar while navigating through the webpage. This unintended behavior prompted us to reconsider our design choice. After careful consideration, we decided to pin the navigation bar back to the top of the screen. This adjustment significantly improved the ease and accessibility of navigating our website.

By placing the navigation bar at the top of the screen, users could effortlessly switch to another page with a simple tap, eliminating the need to scroll all the way back up. Moreover, this new placement prevented users from accidentally interacting with the navigation bar at the bottom of the screen, which is within the active thumb zone on most mobile devices.

Our decision to prioritize user experience and ease of navigation led us to make this adjustment, resulting in a more user-friendly website that ensured efficient and hassle-free browsing for our users, regardless of the device they were using.

The Challenges

Throughout the project, we continuously reassessed the level of detail to include on our website. We aimed to strike a balance by replacing text with icons and images, making it more accessible and comprehensible for our target audience—the general public. Our initial goals were to keep the website concise, brief, and easy to understand. To achieve this, we utilized effective images and icons, employed terms suitable for the general public, and limited the amount of text presented.

Takeaways

This project marked our first group endeavor in HTML and CSS, and we are proud of the final outcome. We successfully developed a fully responsive website with all the intended content implemented. However, reflecting on our work, we acknowledge areas where future improvements could be made. One notable enhancement would be to incorporate live weather forecasts, as our current implementation only includes static images. This addition would provide users with real-time information, enhancing the overall functionality and usefulness of the website. Taking these insights into account, we have gained valuable experience and knowledge that will guide us in future projects.