Designing for Performance - The Bunnings Website Design Assessment - Case Study Example

Wed Design Assessment Name: ID: Date: Introduction The Bunnings website is a website of leading retailer of home improvement and outdoor living products in New Zealand and Australia and a major supplier to project builders and housing industry. As a website of a warehouse, this website has very many products and is therefore a very big website. It is therefore expected that it has invested quite a good amount in the design of the website. Due to the merchandise nature and the current trends in web technology, it is also expected that the website can do some ecommerce business. Alongside the web technology, it is expected that it optimized for all devices for easy web access. This website was assessed to understand its design vis a vis the current design principles. Below is the main features of the website that were noted (Davlin and Davlin, 2016). Main features The main features of this website include; but not limited to: The navigation menus Contact us page Web forms Product display Stores Social integration (youtube and pinterest) What would be regarded as the main feature of the website is content display. The website is mainly focused on content which clearly elaborates what the website does. The content shows that the website deals with the varied products of hardware and homecare. Positive aspects The website has good color contrast. Improved navigation with wonderful access to all products within. The color contrast between of white and other colors is a good presentation for improved vision. Presentation of products in varied ways such as videos, galleries and slides helps in improving visual hierarchy. According to Psaila and Wagner (2008) description of appearance, this website is legible, good use of color, target/meaningful graphics (though one missing) and very good quality photography. According to Psaila and Wagner (2008), this website has some interactivity such as the visitor changing a store, signing up and/or signing in. Other forms of interactivity include search forms. This website has a jobs side which offers a good attention attraction to some visitors. A good site is one that is effective when it comes to functionality. According to Nelson (2009), every component of the site works quickly. Some of the parts and of this website such as the menu, search form and the login/register form work seamlessly. A good site displays good usability. This site displays good usability such as simplicity, consistent layout, descriptive link text, and cross browser compatibility (Zhang, Segall and Cao, 2011). The contact information is improved including a mobile phone and a physical contact for accessibility to the represented business (Nelson, 2009). AN attempt towards a social integration is also a good aspect (Funk, 2013). Finally, this website has a long scroll. It results in an improved content exposure and gives more room for creativity. Negative aspects The principle of a short scroll site by Hogan (2015) is violated. The hope page is a long scroll. This according to Hogan (2011) long scroll results in a number of issues. Disorientation, browser crash, overwhelming content and no skipping opportunity as witnessed on this website. In terms of social network integration, Funk (2013) says that a good website has a clearly exposed social network integration with the most popular networks. This website is very weak when it comes to the display of such a good feature. According to Funk, the lack of this feature reduces the social networking ability of this website. One other poorly implemented aspect in the website is the image management. The website has so many images which risk causing a very slow page load. This is evident on the site anyway with a pageload of over 6 seconds. This violets the expected 2 seconds (Psaila and Wagner, 2008) and therefore has bad impact on the visitors. On the basis of a modern website by McNeil (2010), a website like this is expected to display good shopping cart. Shopping features on this website are very reduced, if any, such that they are as good as absent. This reduces the interactivity through the website which could be implemented through shopping. Reviews and Comments of other two The website was reviewed by two more persons; a lady and a gentleman. Most of their view on the website, both positive and negative, are the same as those above. However, there was a noted negative aspect as noted by the lady. That for this kind of business, a warm such as orange/yellow or red color was a better replacement for the green background color. The man also notes that repetition of the search form in the slide is unnecessary because it already has. In order to make this website better in terms of display, a few amendments need be done (McNeil, 2010). Recommendations for improvement Following the lady’s recommendations first, the cool green color need be replaced by a warm color. This would color-match the product being marketed by the website. As a retailer, the site can improve sales by managing the shopping system and by improving the shopping tools such as the cart and buy button on products. Images should be reduced and all possible means used to improve on the page load speed. Social network integration is very important in marketing of a website. Since the social networking aspect is quite easy to be read as missing, it is highly recommended for improvement in this area. The leading social networks such as facebook, twitter and linkedin should be incorporated and conspicuously displayed. In terms of content, the website owners should consider hiring a writing expert to write for the website. In addressing the problem of long scroll, the front page should be made shorter and the information display crafted to be all-round. The major improvement that should be made on this website is making the website optimized for all devices such as from desktop to mobile phones. A detailed assessment of the website on the responsive web design is fully in the following section. Responsive web design (RWD) Responsive web design would be described as an approach to web design that crafts the sites to provide an optimum viewing and interaction. A responsive web design enhances easy reading and improved navigation with a minimum of resizing, scrolling and panning across all devices ranging from the desktop monitors to mobile phones (Peterson, n.d.). The assessment results for the ‘Bunnings warehouse’ website gave the results as shown in the images below. Results of different screen/media sizes Figure 1: The website on a large screen 1280x780 px. This would be described as the large screen display. It shows with clarity all the website details. Medium display (480x640 pixels) Figure 2: Medium screen display with a 480x 640 px. It shows with diminished clarity. Some details such as the menu are not clearly vissible. Figure 3: The landscape display of the medium device i.e 640x480 px. The resolution is improved. Figure 4: Small screen resolution 200x320 px. The details are not clear and gives a very poor resolution. All the large screen details are present and there’s no fluid realignment. Discussion According to Casabona, a basic responsive aspect of web design is that the web should be built on a fluid grid. Assessed on percentages, for this particular website, the grids are rigid and do not float accordingly. The arrangement of the grid does not change to fit in the media. This has resulted in squeezing of information. The images and videos in this website do not scale in depending on the resolution of the screen. According to Peterson’s description, it can be said that neither the videos nor the images are responsive. They result to content overflow and thus a not so appealing website. One basic aspect in RWD according to Peterson, is removal of non-essential information. Reviewing this website, the information is the same and in full for all the devices. Sometimes some information on large screens is for design and appearance purposes and may not very essential. Moreover, if all the large screen information is displayed on small screen, it results to very long page scrolls. With long page scrolls come the troubles aforementioned. One other measure of responsiveness for a website is the navigation. For this particular website, all the navigation are the same horizontal display for all the screen. Seconded by () comments, it can be seen that there is blurred vision on the navigations. Talking of blurred content, it can be seen from the above snapshots that text blurs with reducing screen size. This implies unresponsive typography hence lack of responsive text. Text should be hidden and/or displayed according to sifter. This is what describes a responsive text as can be seen on an exemplary website (Casabona, n.d.). From the RWD assessment outcome, it can be concluded that there was no content prototyping as would be advised by Casabona (n.d.). It would produce device specific content prior to the designing process of the website and would have been responsified. RWD recommendation From the RWD results, it can be concluded that the website is not responsive. From the benefits of a responsive website, it can be seen that the website stands to suffer low quality resolution and thus very compromised site navigation, enormous content on small devices and poor image and video. A combination of all these compromise the cross-device usability of the site and thus reduce the target traffic. The poor mobile compatibility reduces the traffic by over 70% (). It is highly recommended that the website be responsified. One of the responsifying tools recommended is the bootstrap. It addresses all the aforementioned responsive flaws in website. However, the RWD assessment results depend on the assessment device. Below is the description of the device. Simulation Software The device simulation software used is the Chrome device simulator. The simulator is easier to use in changing between the different device modes. That is not the most accurate aspect. The advantage of the simulator is the correctness of the simulation. This device uses percentage rather than pixilation for aspect ratio by converting the given pixilation to percentage. This gives a more accurate representation of the device since the aspect ratio for the devices comes as a percentage. The simulator can therefore be said to be reliable (). Conclusion From the review of this website, some design conclusions can be made about it. The website has both positive and negative aspects. The negative aspects need to be addressed/improved in accordance with recommendations made in earlier sections. It requires improved color combination and improved content structure such as reducing the page length. It also requires all aspects concerning page load addressed to improve speed to 2 seconds. Social network integration should also be worked on to improve the site marketability. One very important aspect of web design that requires urgent address is the responsive design. The website is found not to be responsive and this greatly affects its device compatibility. This has a great influence on its traffic and more especially reduces the traffic convenience by about 70%. The website needs to be responsified using any of the responsification frameworks. One recommended framework is the bootstrap. If implemented, the website stands to boost the business of the company. References Casabona, J. (n.d.). Responsive design with WordPress. Davlin, A. and Davlin, A. (2016). 10 Peculiarities of Successful Internet Retail Website Designs. [online] Onextrapixel – Web Design and Development Online Magazine. Available at: http://www.onextrapixel.com/2012/04/06/10-peculiarities-of-successful-internet-retail-website-designs/ [Accessed 10 May 2016]. Funk, T. (2013). Advanced social media marketing. [New York]: Apress. Hogan, L. (2015). Designing for performance : weighing aesthetics and speed. McNeil, P. (2010). The web designer's idea book. Cincinnati, Ohio: HOW Books. Nelson, M. (2009). Value creation in e-business management. Berlin [u.a.]: Springer. Peterson, C. (n.d.). Learning responsive Web design. Psaila, G. and Wagner, R. (2008). E-commerce and web technologies. Berlin: Springer. Zhang, Q., Segall, R. and Cao, M. (2011). Visual analytics and interactive technologies. Hershey, PA: Information Science Reference. Read More