Maple Leaf Foods Design System

Team: Jenani Yoganathan & Jessica Ocampa
Role: Product Designer
Timeline: Sept - Nov 2024 (Three months)

Overview

Company Background

Maple Leaf Foods (MLF) is a leading Canadian consumer packaged meats company, committed to delivering high-quality, sustainable protein products. With a rich history dating back to 1927, the company focuses on innovation, sustainability, and providing nutritious food options to consumers.

The Problem

MLF faced challenges with its existing design system and user experience (UX) across its applications. The outdated design system led to inconsistencies and inefficiencies, impacting user satisfaction and operational effectiveness. The goal was to redesign the system to enhance usability, consistency, design, and overall user experience.

User testing/user findings

The original application designs, created on Microsoft PowerApps, had several usability issues. Through user testing, we identified key problems:

Lack of space between elements and text
Logo did not take users to the homepage
Absence of confirmation notifications after submissions
Inconsistent back buttons & arrows (buttons/icons were either rounded or squared, showing inconsistency in design)
Uncommon or long naming conventions
Non-compliance with MLF's branding colours

Something to note: Our redesign efforts were based on an existing application, Frontline Inspection, intended for MLF plants to facilitate equipment checks and inspections via form submissions.

Ideation

To enhance the user experience, we integrated MLF's brand colours into our design approach. We began crafting low-fidelity wireframes to address the usability issues identified in their previous design. Understanding that plant workers often operate in dimly lit environments and wear gloves, we prioritized making buttons and text larger to ensure easier and more intuitive interaction.

Click through the slide deck below to explore the first iteration of the MLF design system we created, showcasing the before-and-after comparisons.

Digital Wireframes

Mid Fidelity

After presenting our low-fidelity designs to the team, we received valuable feedback and made several improvements:

1. Branding and Design Consistency:

We used the blue from Maple Leaf Foods’ branding colors as an accent and kept the background white to match their website design.
All element strokes were set to 1 to match their website.

Similar icons and styles from their website were incorporated to ensure consistency across platforms.

A network icon and a hamburger menu were added to the right of the screen.

A footer was added, including the start and back buttons, as well as copyright text.

2. Selection Pages:

The plant location name was reintroduced as a precaution to ensure clarity and prevent errors.

Dropdown menus were rearranged, and asterisks were added to indicate required fields.

3. Questions Page:

We reverted to the original layout for better organization (2 pages).
Headers were added in a row: “Questions,” “Instructions,” and “Status.”

Under “Instructions,” there is a picture of the equipment to be inspected.

Under “Questions,” each question has an asterisk to indicate it needs to be completed.

Under “Status,” there is a pass or fail toggle and a deviation button.

When the deviation button is clicked, users are taken to a second page with: Radio buttons to indicate the status (minor, major, critical). A comment section. An upload section for images.

An information icon/tooltip was added to explain the camera feature, helping users who might be confused.

Icons were used instead of text buttons for actions like uploading images, as they are quicker to communicate and easier to understand universally.

Changes

After completing the Mid-fidelity prototype, we presented it to the developers and received the following feedback:

Branding

The application was redesigned to remain neutral and non-branded, removing Maple Leaf Foods’ colours and logo in favour of Microsoft standard colours with light and dark modes, ensuring suitability for use by multiple companies.

Footer

The footer was removed as it was deemed unnecessary for an application used exclusively within Maple Leaf Foods’ plants and by collaborating companies.

Header Icons

The header was updated for improved usability, with a translator icon and profile icon added to the right for accessibility and personalization, and the hamburger menu relocated to the left, aligning with common design conventions.

Buttons

We adopted the standard interaction blue, commonly used by companies like Apple, for interactive elements such as buttons.

Front Page

The front page was removed as the application did not require an introduction screen.

High Fidelity Prototype

We first incorporated the developers' requested changes into the design, ensuring all their requirements were addressed. Then, we applied Microsoft and Apple colour guidelines for dark mode, light mode, and interaction colours, integrating these into our updated Figma design. During a follow-up meeting, we presented the high-fidelity prototype, which was met with enthusiasm. The developers praised the design for aligning with application conventions, enhancing usability, and meeting their expectations. To view the high-fidelity prototype, click the button below to access our Figma file.

View Project

Key Takeaways

The Strengths and Challenges of Teamwork 🤝

Working as part of a team was both a rewarding and challenging experience. Since my design partner and I shared similar design backgrounds, we had many ideas. While this fostered creativity and innovation, we had to learn how to critically evaluate and narrow down our concepts to select the most effective solutions. This process taught me the importance of balancing collaboration with decision-making and reinforced the value of clear communication and compromise in achieving project goals.

Embracing Curiosity and Thinking Beyond the Box 💡

Coming into this project with a background in design and UX, I initially felt confident in my knowledge. However, this experience humbled me and taught me to remain curious and open-minded. Solving real-world problems required me to look beyond conventional approaches and dig deeper into user needs and environmental constraints. For example, designing for plant workers working in low-light environments and wearing gloves pushed me to consider larger buttons and clearer layouts for better usability. This project reinforced the importance of curiosity and adaptability in driving meaningful design solutions.

Adapting to Design Changes 🎨

This project was my first time designing within strict brand guidelines, and it was a valuable learning experience. Incorporating Maple Leaf Foods’ branding into the design while addressing usability challenges taught me the importance of consistency and alignment with brand identity. Later, when the design requirements shifted to a more neutral, non-branded approach, I learned to adapt quickly and not get too attached to any one idea. It also got me thinking about how to effectively design for specific user groups, ensuring the design remains functional and intuitive regardless of branding or context.

A Big Thanks to My Team at Maple Leaf Foods!

The past four months at Maple Leaf Foods have been an incredible journey of growth and learning. Working in a corporate environment taught me so much about designing for real-world applications, collaborating with developers, and engaging with potential users to create meaningful solutions. I also gained a deeper understanding of how apps are developed and the limitations that come with balancing design with technical constraints. This experience helped me refine my skills in adapting designs to meet both user needs and business goals. A huge thank you to my amazing team for their support and guidance throughout this experience. I’m excited to carry these valuable lessons forward as I continue to grow as a designer.