Creative Technologist.

I’ve created a knowledge repository of React’s best patterns. The idea is to collect best practices and useful references for building robust and scalable React applications.

The project includes

• React hooks & custom hooks
• Controlled & uncontrolled forms
• Data fetching from external APIs
• Component composition patterns with children (containment and specialization)
• Logic encapsulation and code reuse patterns
• Test integration patterns with the Jest library

In a nutshell

Built with Chakra UI library, this project serves as an online documentation for best-used patterns with sample codes. I’m drawing inspiration from various industry sources (React Documentation, Coursera, …) to connect “purpose” and “utility”, and eliminate guesswork when it comes to choosing the right patterns for a specific React job.

Redesign of the government of Ontario web applications to boost efficiency, compliance with Ontario Design System (ODS), Accessibility (WCAG 2.0), and usability.

The project includes

• Prototype Design (Figma)
• Design System integration
• Usability Testing
• Design session facilitation
• Stakeholders alignment

In a nutshell

The government of Ontario web apps are redesigned to facilitate specific user tasks, all these tasks leading to a buying to flow. Using Figma to create prototypes into which I’ve integrated the  Ontario Design System (ODS), I’ve collaborated with multiple stakeholders (other designers, developers, and product owners) to:

• Simplifies the ordering process by breaking it into manageable steps to maintain user’s focus, reducing cognitive effort through streamlined business logic, and effectively handling both system and user errors to ensure a smooth user experience while discouraging hacking attempts.
• Connects these sub-processes into a seamless experience, simplifies error handling by linking non-sensitive errors to specific steps making it easy for users to address, and streamlines the checkout process by prioritizing key information such as payment summaries and terms and agreements.

Major overhaul of the website’s visual and informational structure of a consulting firm’s.

The project includes

• User Research
• Wireframing and Prototyping (Figma)
• User flow Design & Information Architecture (FigJam)
• Responsive Design
• Front-end Development (HTML, CSS, JavaScript, WebPack)
• Accessibility (WCAG 2.0 and AODA)
• Usability

In a nutshell

I wore multiple hats in this project, first as a Skaholders manager, Project manager, Lead UX/UI Designer (2 junior Designers, 1 senior back-end developer, 1 copywriter, 1 illustrator), and Senior front-end developer.

• User Research: I created a persona composite from the  client’s insights, made additional research to clarify the design direction, and generated further ideas
• UX/UI Design: I lead the creation of wireframes and low and high-fidelity prototypes. I defined the Design System, and led the creation of a unique theme of colors and mood that matches the brand’s spirit. I used a custom illustrator, capable of creating unique artwork that matches the brand vision. I also insisted on ensuring the design is Responsive, Usable, and Accessible (compliant with WCAG 2.0 and AODA)
• Front end Development: I used one of my custom boilerplate projects to create a solid front end that is responsive, loads fast, and flows smoothly. I used WebPack for task management, and GitHub for version control
• Back-end Development: I intrusted the front-end I built to my colleague WordPress Developer and back-end genius, who created the entire back-end infrastructure and hooked it up with the front-end

Ensuring Accessibility compliance for a large public website as per Ontario Regulation 191/11 (WCAG 2.0 Level AA standards, and AODA). Enhancing readability and overall User Experience.

The project includes

• Strong stakeholder management
• Business requirement gathering and management
• Adaptability to new technologies and systems
• Design Systems (live interactive coded version and Figma version)
• Front-end Development (HTML, CSS, JavaScript, WebPack)
• Wireframing and Prototyping (Figma)
• Accessibility (WCAG 2.0 and AODA)
• Technical documentation (created for stakeholders)

In a nutshell

I wore multiple hats in this project, first as a Skaholders manager, Project manager, UX/UI Designer and Senior front-end developer.

• Business rules & Stakeholder management: I made sure to stay on the same page with stakeholders, kept a tight communication, managed their concens, set up realistic deadlines and expectations
• UX/UI Design: I created a Design System that solves stakeholders’ problems of Accessibility, and Usability. I ensured Design system elements are responsive and respect Halton’s brand guidelines
• Front end Development: I created a live documentation where stakeholders could “shop for design elements”. I also created custom CSS and surgically enhanced specific sections of the website CMS with carefully targeted markup. My aim while doing so was to improve the website’s Accessibility compliance. The front-end coding was done under WebPack , then the minified code was migrated to the CMS
• Back-end Development: The back-end was build under ASP dot Net, a language I am seldom familiar with, therefore, I connected with third party back-end developers for support