Canadian Tire Powerapps Component Library
Role
UX/UI Designer
Timeline
34 Weeks
Tools
Figma, Jira, PowerApps
Overview
My Time at Canadian Tire
I was part of the CTx (Innovation) team at Canadian Tire; responsible for pushing the company into a more user friendly, digital direction.
During my tenure as a UX/UI Designer at Canadian Tire, I developed a comprehensive component library on the Microsoft PowerApps platform for internal company use. This initiative was driven by the need to streamline the creation of no-code applications used by various teams to facilitate audit and operational tasks. These apps, while functional, often suffered from poor navigation and inconsistent design due to the lack of design expertise among the users creating them.
The primary objective of the component library was to eliminate the guesswork for non-designers using the PowerApps platform. By providing pre-designed, cohesive components, the library ensured that all applications adhered to company branding, met user accessibility standards, and maintained a consistent look and feel.
Given the constraints of the PowerApps platform, designing these components required working within stricter boundaries. Despite these limitations, the components were crafted to be intuitive and flexible, accommodating the evolving needs of users.
The component library is stored within the PowerApps platform and can be easily updated and expanded as the user base grows and requirements change. This ensures that all applications built within the company are not only visually cohesive but also functional and user-friendly.
Research
I conducted extensive user interviews with a diverse group of users, ranging from new users to power users with varying levels of design experience. These interviews aimed to uncover their primary motivations behind their app creation efforts and to identify which components would be most essential and beneficial for their needs.
By understanding user requirements and pain points, I was able to prioritize the development of key components. The component library was released in sections, following an agile approach with sprints, allowing for live feedback from users.
In addition, biweekly review sessions with the design team provided an opportunity to gather further insights and refine the components continuously. This collaborative approach ensured that the component library met user needs effectively while maintaining high design standards and usability.
UI
The entire component library was created within Microsoft PowerApps using different pages to separate and organize logos, colour palettes and fonts for each subdivision of Canadian Tire.
A “how-to” section was also included with a brief overview on the do’s and dont’s of design principles for the user’s to refer to as they build out their own apps.
Educating Users
Post-launch, I spearheaded the first ever training session in collaboration with PowerApps Expert Instructors and produced an extensive video tutorial series to ensure users have comprehensive support.
The library has been adopted by over 20 PowerApps users, with this number set to increase as further training sessions are conducted. Ongoing user feedback is being integrated, with plans for regular updates to enhance functionality and user experience continually.
View the tutorial here.
Challenges
Unfamiliar Platform, New Restrictions
Navigating the new platform posed significant challenges due to its stringent restrictions, which lacked the comprehensive design functionalities of Figma. Customizing, creating, and modifying components was particularly difficult within these limitations. Despite these constraints, I was able to adapt and develop the most efficient and cohesive component library possible, leveraging the restricted creative capabilities of the PowerApps platform.