Skip to main content

Industry Experience

McQuaig

Senior Designer at McQuaig Institute

Since 2018 | Full-time

UI/UX HTML (S)CSS VueJs a11y Design System Branding Video Editing Illustration HubSpot

I consider McQuaig to be my 'very first' job in Canada, and at the same time, the one that provided me with the most experience in various fields. McQuaig is a B2B company that offers a variety of tools to help HR professionals identify suitable candidates and support employees in their career development.

They hired me to address inconsistency issues initially. As a 50-year-old company that had never had a design before, I had a lot of work ahead. My role at McQuaig was quite diverse, I worked with different teams and materials. It began with rebranding, then updating all marketing materials, assisting with HubSpot landing pages and email marketing implementation. Subsequently, I moved to the web design aspect of the job, assisting in building MO2 UI. Later, my role became more technical as I helped develop new tools, including the implementation of Vue.js components. I rewrote all CSS to SASS with tokens, enabling me to create a dark and light mode for the system. I also created a Design System in Figma and improved the accessibility (a11y) of MO2, which was non-existent at the time, by working on each component and assisting developers in making things more accessible.

Over the past two years, my focus was concentrated on two new tools and their launch, leading to the creation of 2D video animations for their release. TeamSync was one of the largest projects. Simultaneously, we lost our project manager, so I had to work directly with the head of product on numerous iterations until the product made sense to us. We then presented it to the IT team, received a second phase of feedback, and further improved it. Currently, we are in the third phase with a few selected clients trying it out to gather their feedback and make further improvements.

I can say with certainty that McQuaig provided me with numerous learning opportunities.

  • Highlights

  • Fully redesigned McQuaig's identity, solving years of inconsistency across all brand materials.
  • Led the development and integration of accessibility features from ground zero, resulting in a significantly enhanced user experience for screen reader users.
  • Led the implementation of Dark/Light mode introducing design tokens, optimizing CSS structure and enhancing user experience.
  • Upgraded Figma component libraries to use variables and align with their Vue.js components.
  • Installed and configurated VuePress to document MO2 system.
  • Collaborated with the marketing team to develop HubSpot templates for landing pages and also built a website with Hubspot CMS.
  • Created engaging 2D animations to promote new tools, boosting new products visibility.
  • Engaged in all stages of TeamsSync development, from wireframes and extensive mockups iterations to hands-on coding on Vue.js templates and SVG graphs.

Lambton College

UI/UX Designer

2017 ~ 2021 | Part-time

UI/UX HTML (S)CSS Bootstrap Webdesign

As an international student in Canada, I pursued a Mobile Development course at Lambton College. Simultaneously, I took on a part-time role as the UI designer for the Research & Innovation department of Lambton College. Being the only student with prior design experience, I caught the attention of the head of the course, who invited me to assist in the college's research projects.

In this position, I worked on short projects with real clients, mainly small business owners. My role involved understanding their project goals, often aiming for an MVP of their ideas. I handled the initial phases of projects, working closely with clients, and then collaborated with developers to implement the solutions we devised.

This experience not only improved my technical skills but also introduced me to the Canadian job market. It was a practical and hands-on introduction to working with real clients on tangible projects.

  • Highlights

  • Prototyped iHealth, an Android app, through numerous iterations with the project owner using Adobe XD and InVision. This ensured that developers could better understand the client's expectations.
  • Built the UI for a live music website, assisted the project owner in consolidating ideas, and delivered complete system templates constructed with Bootstrap to developers.
  • Contributed to the development of a water control app/desktop system, translating their initial ideas into a desktop system built with Google Material.

W*kattz Brewery

Multimedia Designer

2015 ~ 2018 | Freelancer

Graphic Design Video Editing HTML (S)CSS WordPress

I had the incredible opportunity to work as a freelancer for W*kattz Brewery in Brazil for a solid three years. When we first connected, they had this fantastic logo designed by a very talented illustrator called Bruno Drummond. My role was all about bringing that logo to life across a bunch of different materials, from traditional print to the digital space.

What made this gig extra special for me were two things. First off, I got to work with a brand that I fell in love with right away. And second, the variety of projects was just awesome – I dabbled in everything from digital graphics to "real-world" stuff.

In the beginning, my focus was on introducing this cool new brewery to the world. Think loads of social media posts and digital content. But then, things shifted into the physical realm. I started working on beer labels, catalogs, signs, promo videos, and even the cool side products they'd be selling at beer festivals and craft beer events, stuff like tote bags, coasters, hats, and t-shirts.

What added a cool twist to the whole experience was that during my first year working with them, I was still in Brazil. That meant I got to tag along to beer festivals, seeing our designs in action and feeling the buzz firsthand.

  • Highlights

  • Produced diverse graphic design materials such as flyers, folders, labels, coasters, t-shirts, bags, and brochures to support marketing efforts.
  • Crafted multiple engaging 2D animation videos for product launches, helping promotional strategies.
  • Developed an institutional WordPress website for the brewery, helping with its online presence and branding.

Brazilian Navy

Senior Web Designer / Automation Tester

2013 ~ 2016 | Full-time

Java / Selenium Automated Testing Webdesign HTML CSS

After years of working as a WordPress developer at an agency in Rio, I decided to take a step back and return to a fully design-oriented job. However, this transition didn't last long. The Brazilian Navy was hiring for projects, and I was brought on board for a project that was already in its final phases. Instead of being let go after the project delivery, they offered me another opportunity, but this time it involved coding. I became an automation tester, using Java and Selenium.

The first project, SIGSAUDE, was substantial – the health management system for the second-largest navy in the Americas. Initially, I worked with one of the health departments, specifically the dental department. I had several meetings with the client to gather information on how they tracked patients and used their existing system. Our team aimed to translate this information into a more user-friendly system. The primary objective was to consolidate their entire health system into a single, unified platform. Previously, they had multiple, entirely different systems for each department, making it challenging to manage.

The second project, SIPLOM, focused on a military operational planning system. This project was particularly rewarding for me as it marked my first experience with automation. I achieved significant results, increasing the automation coverage from 20% to 80%. I streamlined maintenance processes by creating starting points for tests, developing multiple SQL queries, and collaborating with developers to ensure test integrity when introducing new HTML elements or rearranging components.

Despite finding the experience engaging, after a year and a half in this project, I decided to relocate to Canada and re-enter the design field, viewing it as a strategic move for a new professional chapter.

  • Highlights

  • Helped gather information about their current system and how users were interacting with it, identifying reasons for its shortcomings in supporting their day-to-day experience.
  • Leveraged HTML/CSS and the Dojo framework to prototype modules for the health insurance system, enhancing development efficiency.
  • Designed and developed printable medical records covering various fields within the healthcare sector.
  • Improved automated system coverage by 60%.
  • Introduced multiple starting points for testing SIPLOM.
  • Maintained daily interaction with developers to ensure things stayed on track, facilitating effective collaboration.