Coles Online
UI Style Guide
Tools: Figma and AEM
About the project
With the growing trend of online shopping after pandemic, Coles Online recognised the need to improve their online presence to meet the changing needs of their customers. In March 2023, Coles launched a redesigned website, coles.com.au, to enhance the online shopping experience for their customers.
As part of this redesign, the company recognised the importance of ensuring a high-quality UI to drive customer engagement and sales. To achieve this, I worked with with the web team, content team, accessibility team and developers to document new website component assets specifications to communicate to different Coles' stakeholders, including supermarket suppliers, Coles Brands and Marketing team.
We developed a set of guidelines and standards for the visual design and layout of the website, as well as the use of imagery, colours, icons, and other design elements. This document serves as a reference for designers and developers to ensure consistency and coherence across different pages and components of the website.
My role in the project
Collaborate with design and development teams to ensure UI designs and implementation align with website requirements and standards.
Created design standards and documentation, including style guides and design systems.
Participate in design reviews and provide feedback to ensure UI design consistency and alignment with brand guidelines.
Ensure the designs are accessible and follow industry best practices for usability and user experience.
Conduct UI quality assurance testing on website and mobile design, functionality and usability to ensure a seamless user experience.
Identify and report UI issues and bugs to development and design teams for resolution.
By developing and implementing a comprehensive set of guidelines for UI design, Coles was able to provide their customers with a seamless, intuitive, and personalised online shopping experience. The guidelines have been instrumental in improving the website's accessibility and usability.
