Project Details

TEAM: Ella Meng & Ji Seon Oh

TOOL USED: HTML, CSS, Javascripts, Atom, Sublime Text, Github, & Gitkraken

ROLE: Developer

DURATION: 2-week group project for a web design course

Project Context

In the realm of massage chairs, crucial information tends to be scattered across various sources. Recognizing this gap, my partner and I noticed that many existing massage chair websites lack comprehensive details on different brands, types, functionality, price range, and user reviews. Moreover, the available comparisons between massage chair models are often limited to a select few options. Motivated by the desire to address this issue, we embarked on creating a website that not only provides comprehensive information about various massage chairs but also facilitates in-depth comparisons across a wide array of models. Our aim is to assist users in finding the perfect massage chair that precisely meets their needs.

This project was undertaken collaboratively by a team of two. I took on the responsibility of debugging and coding the majority of the website using HTML, CSS, and Javascript. Throughout the development process, my partner and I closely collaborated using Github, ensuring smooth coordination and efficient progress.

Stage 1: Sitemap

In the initial stage of website development, my partner and I focused on creating a sitemap to outline the structure and organization of our website. Our sitemap consisted of eight main pages, namely Home, Deals, Products, Compare, Events, Blog, About Us, and My Account. Each page was further detailed with sub-elements that contributed to the overall layout and functionality of the website.

The Compare page and filtering options were deemed essential and crucial for our website's purpose, as we aimed to assist users in making informed decisions about their massage chair purchase. To ensure a familiar and intuitive shopping experience, we drew inspiration from popular online shopping platforms such as BestBuy, Amazon, and Walmart. By incorporating familiar patterns and user interface elements, we aimed to make the overall user experience seamless and user-friendly.

However, it's important to note that the Compare page and filtering options were more like temporary demonstrations of their potential appearance. The full functionality of these features, such as filtering by names, ratings, and brands, would require the integration of PHP and a database. At the time of development, we had not yet acquired knowledge of PHP.

Stage 2: Development

During the collaborative coding process using GitKraken, my partner and I initially encountered several push and pull errors. It became apparent that the Merge Conflict Editor became more complex when multiple conflicts arose simultaneously. Decisions made regarding specific lines could potentially impact subsequent lines within the same edit. To address these challenges, I discussed the issues with my partner and proposed a solution of frequently pushing and pulling to prevent the accumulation of changes. Additionally, we created a document that outlined the specific layout sections each of us would work on individually, as well as areas where we would collaborate to find solutions. This approach significantly facilitated our collaborative coding efforts.

When testing our website on mobile devices, we identified several issues. For instance, the navigation bar experienced problems during testing. While we had initially developed the navigation using flexbox, allowing it to resize according to the screen size, it became excessively long when transformed into a vertical menu on smaller screens, obstructing a significant portion of the screen and hindering user interactions. In response, I decided to implement a hamburger menu specifically for mobile devices to address this issue effectively.

Stage 3: Refinements

After receiving feedback during the peer review and critique sessions, we became aware that the high-resolution images on our website were causing longer loading times. To address this issue and improve our design, we explored potential solutions. One option was to compress the image files to reduce their size, but we were concerned about compromising the original image quality. Another approach we considered was image optimization, where we would load medium-quality or pixelated images first and then progressively load the high-quality versions. After careful consideration, we decided to implement the second option, as it allowed us to maintain the original image quality while also reducing loading times.

To achieve this, we incorporated JavaScript into our website. The script was designed to initially display pixelated or low-quality images and then progressively load the high-quality versions. By employing this technique, we aimed to strike a balance between preserving image quality and ensuring optimal loading performance. This enhancement significantly improved the overall user experience, allowing for faster and more efficient image loading without compromising the visual appeal of our website.

Takeaways

Throughout the development of this website, we faced numerous challenges and encountered various issues. However, we recognize that these obstacles provided valuable learning opportunities. While we made progress and achieved our initial goals, we acknowledge that there is still substantial room for improvement. Given more time, we would have focused on enhancing different aspects of the website. Specifically, we would have incorporated PHP and a database to fully understand and implement their functionalities. This additional step would have allowed us to explore dynamic features and further optimize the website's functionality and user experience. Despite the constraints, our experience on this project has sparked an eagerness to continue learning and refining our skills in future endeavors.