top of page

domestic & general

The Brief.

Domestic & General provides warranty and repair services for household appliances and technological goods. It op erates in many countries around the world, including Australia. One task that was assigned to the UI Team consisted of designing a concept for the Australian home page. The product offering in Australia differs slightly and operates as two services, 'Appliance Protect' and 'Appliance Assist'. Desktop and mobile versions would be needed and the the most favoured concept within the team would be sent into production. 

UI Conceptualisation.

The nature of the task was quite exploratory and thus, wireframes and were omitted from the usual design process. User experience and information hierarchy considerations were still made when designing the UI. The header was kept the same as the UK version for consistency and maintaining brand identity. The colour scheme was kept light and clean, a callback to the products featured on the page and to Domestic & General's core branding. The hero consisted of a kitchen image on desktop (being omitted on the mobile version) with the page's title and the two services offered placed on top. As they both held the same weight in terms of importance, they were given equal presence and placed in alignment with one another. Due to space constraints on mobile, 'Appliance Protect' was placed above, this would also help aid development when scaling the design down to a smaller resolution.

The product section underneath consisted of an alternate placement of image and content when scrolling down the page. This would make for stacking structure of design elements for the mobile view. Each product consisted of an image with associative benefits and offerings being shown. Utilising D&G's icons, typefaces and font colours helped maintain an aesthetic reflecting D&G's core branding, making the Australian branch feel like an authentic extension of the D&G network. 

Reflecting on the information hierarchy of the design, a short 'About Us' section felt auspicious to implement. The reasoning in terms of UX was that the user has been presented pertinent information about the products, what the user should see next are reasons to buy the product from Domestic & General and conduct business with them. To highlight this, the section background employed a different colour to contrast against the light background of the product section above. The content consisted of bitesize information that could be absorbed at a glance and set to span the width of the page. The arrangement of content utilised the centrally aligned structure of elements seen in the hero for desktop but maintained a left aligned approach for the mobile design.

Each member of the UI Team submitted their concept for the page and reviewed by management. This resulted in my concept being chosen to be used as the design for the Australian home page. This was retroactively reviewed by the UX Team to check whether the page's content structure made sense and reflect on the user journey. After approval by the UX Team, I proceeded to prepare the assets and purchase the stock imagery present in the UI. The page was uploaded to Invision and developers invited to the project so that they could inspect the stylist and spacial properties. The design and assets were sent to the Australian Team for implementation, I also acted as a consultant to their Development Team when questions needed asking or behaviours explained. Ideally usability testing would be made before production of the page to determine what a sample of users thought of the page and provide feedback on how well it meeds their needs. Conducting various usability tests would've addressed how well the page met the user's needs and if any improvements could've been made to ensure a user-centred design. Nevertheless when the front end had been developed, I conducted a front end review as a type of quality control to verify what is seen on the browser matches the approved UI design and corroborated my findings with the Development Team for further implementation.

bottom of page