Introduction
The report is aimed at reviewing the Bunnings Warehouse website, and documenting a critical evaluation of it. The website will be evaluated in terms of its compliance with responsive web design and development principles, usability, interactivity and design aspects. The report will conduct an extensive analysis of the website to identify both its advantages of disadvantages.
Discussion
The subject of this evaluation is a website of a largest hardware store in Australia, Bunnings Warehouse. Its main purpose is advertising goods, such as tools, furniture, hardware and construction products. Bunnings do not offer buying products directly from the website, but have a list of stores where certain goods may be located. Additionally, there is a wish list option, which helps customers to keep track of the items that they intend to buy.
Bunnings Warehouse features a modern flat design with a red, green and white colour palette. The combination of colours is appealing to the eye, but that is to be expected as those are brand colours of the company: carefully chosen and proven over the years. Green in this combination goes by the hex code #0d5257, and reminds of a dark cyan colour. We know that a colour that is complementary to cyan is red. Hence, designers that chose this palette for Bunnings Warehouse brand decided to create a complementary colour scheme.
The hero of the main page is a relatively standard gallery that switches photos with company’s photos. The problem are the photos themselves: some of them are photos of not exactly appealing to the eye things, such as dirty power tools, floor mops, or wall insulation. Some pictures are out of focus, which certainly does not add to the presentation. Although, it is a minor issue that does not interfere with overall user experience.
Store address, phone, and working hours present the most useful information for the store’s customers. It is certainly a good thing that customers do not have to look for it on different pages of the website, and it is available right on the first screen. Moreover, the website looks for a client’s geolocation and displays the relevant information, that is, the address, phone, and working hours of the nearest store.
Another detail that main page focuses on is search field, which is gigantic and enjoys its place right in the header of the website. Moreover, it can be found even on one of the gallery’s slides. Searching though the database of products is one of the main purposes of the website, so it is certainly a positive aspect.
Scrolling down through the main page, the user can observe various modules. One of them is a section with quotations from members of each department of the store: tools, garden, kitchen and so on. Then, there is a list of brands that the store offers. The next section offers a variety of do-it-yourself advices, which certainly appeals to the audience. Other sections present respectively: featured hand tools, inspirational “before and after” home design photos, featured outdoor heating items, additional services, and a map of the site. At the very bottom could be found social buttons of Pinterest and Youtube.
Each product page offers a short description of a product, and a table of product details with further specifications. Some of the descriptions appear to be too short and generic. Also, on a product page there are two additional blocks: similar products and related consumables. The website has a useful option to compare similar products. It allows adding up to 8 items to the list for comparison.
Responsive design evaluation
The website is not designed responsively. Everything on the page is scaling along with zooming, and nothing adapts to changing of the viewport size. Moreover, it was found that the design brakes at least in one place when the user zooms out from the page: the button “Gift Cards & Ideas” jumps to the next row, completely breaking the menu of product categories (see Figure 1). Upon seeing it at first, the author had a surmise that this effect was caused by a deliberate breakpoint, for the design to be adapt to smaller screens. It turned out to not be the case as the author failed to find any other evidence of such efforts.
Figure 1: Design flaw of the Bunnings Warehouse website
Figure 2: Lack of mobile adaptation of the Bunnings Warehouse website
Sizes of everything on the page is defined absolutely, in pixels (see Figure 3). For the design to be responsive, sizes have to be set in percent, or, in other words, relatively.
Figure 3: Styles of the Bunnings Warehouse website
Review 1: Olivia McGrowdie, 25 years old, lawyer
“I find the website to be quite useful, user-friendly, and helpful. The DIY section is great, with all its videos, advices inspiration material, and pre-made packages of items for certain projects. Contact info of the closest shop is right at the top, which is just perfect. I always get tired of looking for this information on other websites as it is buried only God knows where. This one is cool, I like it.”
Review 2: Chloe E. Ross, 54 years old, housewife
“I was recommended to check this website just in time as I have been thinking of re-doing my bathroom, but never had an idea on how to make it right. I do not usually look for such information on the Internet. The interface is surprisingly easy even for me to use and search for information. I fell in love with an idea of the do-it-yourself section. It literally cleared my mind, and now I exactly know what I want for my bathroom, how to make it, and where to buy the materials! Although my husband will (obviously) not be fond of the overall price, he will definitely like the outcome. I enjoyed the experience, and will definitely recommend the website to my friends.”
Both reviewers used the same laptop and browser to look through the website. They both were focusing mostly on the usability of the website and its content, and their conclusions were similar to the author’s ones. However, as they were using the laptop, lack of responsiveness did not interfere with their experiences. Hence, they could not find the same negative aspects of the website that the author was able to observe.
Recommendation
A set of design improvements has to be implemented for the Bunnings Warehouse website. Currently, it is absolutely not adaptive to smaller devices. Example given, it would be troublesome to navigate from a handheld device, especially mobile phone. Figure 2 from the discussion section is a clear evidence of this problem. A great counterexample would be the Apple.com website (see Figure 4). On a small device the menu hides in a so-called “hamburger” on the left, and opens on click.
Figure 4: Apple.com responsive design example
Among the techniques that could be implemented to make the website responsive are the following. The website has to be built on a fluid grid, instead of absolute values in pixels. Responsive navigation should be implemented. Breakpoints could be created with media queries to change the layout adaptively. Images and videos should scale to match the resolution of the page. Heavy or not important content should be removed for better user experience.
Conclusion
Bibliography
Apple, 2016. [online]. Available from: http://www.apple.com/ [Accessed 5 Jun 2016].
Bunnings Warehouse, 2016. [online]. Available from: https://www.bunnings.com.au/ [Accessed 5 Jun 2016].
Marcotte, E., 2010. Responsive Web Design [online]. A List Apart The Full. Available from: http://alistapart.com/article/responsive-web-design/ [Accessed 5 Jun 2016].
Weeks, J., 2013. Key Responsive Web Design Principles [online]. Echosurge. Available from: http://echosurgemarketing.com/key-responsive-web-design-principles/ [Accessed 5 Jun 2016].
