A collection of ongoing initiatives focused on evolving Notion’s web architecture, design systems, and content management infrastructure to support global scale, including expanded localization, RTL support, and modular publishing systems.
Role
Engineering (Full stack)
Stay tuned
More coming soon!
A comprehensive overhaul of Slack’s entire web presence during a pivotal period of growth and brand evolution. This initiative introduced a new design language, a modular component framework, and a modernized content management system that fundamentally reshaped how Slack showed up on the web.
We re-architected nearly every surface, from high-traffic marketing landing pages to expansive content portals, aligning visual identity, performance, accessibility, and scalability. The result was a cohesive, flexible foundation capable of supporting rapid experimentation, global expansion, and the next chapter of the Slack brand.
Role
Project Leadership, Engineering (Full Stack)
Challenges
This was a deeply collaborative effort involving specialists across design, engineering, product, content, and marketing. Aligning vision and execution across disciplines while maintaining momentum required strong systems thinking and shared ownership.
A headless CMS built from the ground up empowered go-to-market teams to publish and manage hundreds of pages and content pieces in real-time. Balancing editorial flexibility with design consistency, performance, accessibility, and scalability was a core technical and organizational challenge.
Notes
This stands as the defining work of my career so far, a rare convergence of brand, technology, scale, and organizational complexity.
Special Mentions
Maria G. - Brand, Design
Mina M. - Engineering
Drew M. - Engineering Leadership
Credits
Adam Y.
Grace S.
Jeff W.
Katie H.
Sumit L.
Nora M.
A comprehensive redesign of slack.com in 2018 that brought together an incredibly talented group of designers, illustrators, engineers and copywriters.
This ambitious project was a deeply cross-functional effort, uniting in-house teams with contractors and agency partners. Together, we reimagined and rebuilt the entire marketing site from the ground up, aligning brand, storytelling, and product clarity across every page to create a more cohesive and expressive web experience.
Challenges
Re-architecting the site backend and front end from scratch. Introducing a new design system, component-driven templates, enforcing web performance & accessibility standards while building a scalable foundation that could support ongoing iteration and growth.
Role
Lead Engineer, FE & Infra
Special Mentions
Arquay H - Project Manager
Alice Lee - Illustration
Gene Ross - Principal Designer (Ueno)
Mina M - FE Engineering
Additional Credits
Rosie B - Illustration
Kristy T & Brandon V - Creative Direction
Terra S - Design
Albert T - Engineering
Kimberly M - Engineering
Diego D - Engineering
An archive of selected works across key Slack web properties from 2015–2017, including slack.com, slack.help, slack.shop, and slackatwork.com. This collection highlights a couple of the impactful projects I had the pleasure of working on.
Notes
Slack’s original brand was bright, colorful, and unmistakably playful in its early days, evolving quickly as the company grew over the next few years.
Role
Front End Engineer, Web Developer
Credits
Art Direction & Design - Terra Spitzner
Engineering - Diego Delgado
Advanced site development for Assembly Co., a small and mighty agency which specializes in niche web and mobile design/dev for emerging startups and brands.
Role
Web Development, CMS
Notes
When co-founders Justin and Chad approached me to help them build their company site, I knew the project would be exciting yet challenging. I have collaborated with the two world-class designers on a variety of projects over the years, and each project is more ambitious than the last.
Challenges
A responsive self-packing grid, advanced CSS animations, ajax loading and browser state management, all tied together with data from a wordpress CMS.
Credits
Design - Chad Chambers & the Assembly Co. team
Work In Progress
Fortiguard is the Threat Research & Response team of Fortinet (NASDAQ:FTNT), a global leader in network security solutions and products.
I have been tasked to help the corporate Marketing team rethink and redesign this online portal, from the ground up.
Role
UX Strategy & Design, Web Design & Development
Site design and development (end to end) for Residenz, the world's first multiple-choice scifi web series.
Role
Web Design & Development
Notes
Matteo's vision for the site's art direction was unusually specific: something "dark, industrial, retro tech, cybergoth". The resulting design was so much fun to create and code - akin to making an old school video game interface, on the web.
Challenges
Unique art-heavy web design and animated interfaces, plus accompanying JS / CSS. Episode scheduler, plus a blog and community hub hosted on wordpress.
Credits
Vision & Direction - Matteo Saradini
High concept mockups for Ryde, a Toronto-based ride-sharing platform and app.
Role
UI Design
Site design and development (end to end) for BrightWay Capital, a small privately-held investment management firm which specializes in niche lending, venture capital and private equity.
Role
Web Design & Development
Challenges
Developing the site required the creation of a simple yet fully-custom CMS to quickly edit and re-order site content, and handle templating, SEO, etc.
Mobile app development for ToonTales, the ultimate kids app with a massive catalog and collection of interactive stories, games and activities featuring some well known children's brands.
Role
Project Lead, Engineering Lead, Front-End Lead
Notes
The ToonTales app has received over 1.6M downloads, and had 80k active users at its peak. Parents are able to browse, purchase and download activities and story content, with characters from trusted brands like Caillou and Busytown Mysteries.
Challenges
Design & engineering from the first pixel and line of code, to ship. Included the development of content streaming and playback tech, analytics & telemetry systems, download and disk managers, dynamic content carousels and catalogues, UI windows and notification systems, in-app purchases, web content, etc. You name it, it's in there.
Credits
Core Engine - Jon Spencer & Mark Carter
Art Direction - Roger Lee
UX and High Concept Mocks - AssemblyCo.
Design - Jayson Kirby, Bill Chung
Content - The LoudCrow team
Sales, Promotion, Marketing - Calvin Wang, Tom Mara
Awards
iTunes Editor's Choice
Best New Apps
#1 Grossing Kids App
Flash site development and animation for Osburn Clarke, an architecture and design firm which specializes in luxury cabins, retreats and homes along the BC coast.
Role
Site Development & Flash Animation
Challenges
Animation-heavy flash site, with swf preloading and dynamic content from an XML data source.
Credits
Design - Matt Penner
Landing page and prototype mockups for SquareFoot, an SF-based startup which seeks to streamline and simplify the home rental evaluation and application process.
Role
Business & Technical Consulting, Web Design & Development, UI Design Support
Credits
UI Art Direction - Jason Chan
Business Plan - Elizabeth Madsen, Jaymar Cabebe, Elaine Goddard, Jason Chan
Mobile app development for BrambleBerry Tales, a trilogy of award-winning interactive storybooks for young children and families. The storybooks feature beautiful original artwork, music, narration and stories inspired by the oral traditions of the First Nations people in the Pacific Northwest.
Role
Technology Lead & Partner, Development & Publishing Liaison
Notes
I worked very closely with the talented team at RivalSchools, a Vancouver-based design agency, to help them turn their vision into reality. I provided on-site technical training, tools assistance and development support throughout the project's entire dev. cycle, and was responsible for final app polish and submission.
Challenges
The RivalSchools team pushed the graphical and audio limits of our mobile engine, leading to the creation / refinement of bitmap memory management and optimization systems. All three books where translated in four languages, which required the creation of a comprehensive text/vocals localization system.
Credits
Concept - Roy Husada
Art Direction - Betty Kwong
Scripting - Alfredo Chu
Producer - David Lam
Awards
iTunes Editor's Choice (22 countries)
iTunes Best New Apps
Kirkus Reviews Best Book App of 2013
Parents' Choice Recommended (twice)
Winner: $100,000 Tizen App Challenge
Nominee: Best Original Interactive Production, Digital Media
Web site design and development for Swiss International Finance, a specialist finance firm that provides collateral based loans.
Role
Web Design & Development
Challenges
Creation of a custom content management system
Mobile app design & development for Windy & Friends, a collection 10 award-winning apps for children based on the papercraft world of Windy by Robin Mitchell Cranfield and Judith Steedman.
Role
Technical Director, Lead Engineer
Challenges
The Windy apps combine photo-illustration, papercraft, and classical stop-motion animation with touch-interactivity, digital compositing and physics-driven animation. Each spread is full of rich sound, animation and artwork.
Credits
Vision - Robin M. Cranfield & Judith Steedman
Art Direction & Design - Talent Pun
Engineering - Michael Pattie
Animation - Justin Eddy, Emily Chen
Audio - Brady Cranfield
Production - Twofold Productions
Awards
Best Smartphone Learning App 2015
Winner: iKids Awards
appysmarts Favorite
iTunes Editor's Choice x 2
iTunes Best New Apps x 5
Parent's Choice Approved x 3
Site and custom WP theme development for AppFav, an online portal which highlights and showcases the best mobile apps.
Role
Web developer
Challenges
This custom wordpress template included the creation of a custom scheduler, user registration and account management flows, a shopping cart and a promo code giveaway system.
Credits
Design - Assembly Co.
Front-end engineering and development for Restaurant Tour, a Facebook-based online social game which allows players to decorate and manage their own restaurants.
Role
Lead Front-End Engineer
Challenges
One of the most complex front-end engineering projects I've worked on, built entirely with Flex and MXML, and running on the Microsoft Azure cloud platform. Involved the creation of countless custom, scalable and animated ui flows, components and controls.
Credits
Art Direction - Roger Lee
Visual High Concept - Chad Chambers
UI & UX Design - Vincent Chan
Systems Engineering - Chris Khoo, Aaron Rehaag and the talented RT team at Microsoft
Site development for Stevie Vaps, an iconic retail clothing and lifestyle brand inspired by the laid back culture of the Pacific North West.
Role
Web Development
Credits
Design - Stephen Wolynsky (aka Stevie Vaps)
Mobile app development for a trio of award-winning Charlie Brown interactive storybook apps, featuring everyone's favorite gang from the Peanuts franchise.
Role
Lead FE Engineer
Notes
The three apps have collectively seen over 2M downloads and generated 1.2M+ in revenue.
Challenges
Everything you can think of. New tech on the iPad including audio, physics, cameras, narration, activities & games, memory management, collectibles, in-app purchases, etc.
Credits
Engineering - Mike Truong, Colin Cove, Michael Pattie, Jon Spencer, Mark Carter
Art & Design - Sung Hong, Talent Pun
Awards
#1 Top Grossing App Overall
iTunes Editor's Choice x 3
iPhone and iPad app of the week x 3
Starbucks Pick of the Week x 2
MacWorld Apps Essential Collections
About.com #1 Christmas App
Best Kids App 2011
Appolicious Best iPad Apps of 2011
Kirkus Star x 3
Parent's Choice Recommended x 3
Featured on CBC Television
Entertainment Weekly Must List
Featured online on CNET, Wired, Mashable, TUAW, MacWorld, NBC, USA Today, The New Yorker, The Guardian, Slashgear, School Library Journal
Site design & development for TSE Consulting Group, which provides LEED commissioning, testing and certification.
Role
Web Design & Development
Challenges
Creation of a custom content management system
Mobile app development for PBS Kids' Dinosaur Train, an interactive app which allows children to play, learn about and interact with over 85 dinosaurs. Based on the popular children's PBS Kids TV show.
Role
Technical Director, Developer & Publishing Liaison
Notes
The app was created for PBS with the help of RivalSchools, a Vancouver-based design agency. They supplied all the illustrations, artwork, sound and animations.
Challenges
In-app purchases, dynamic content carousels, 2D physics, collisions and dinosaur rigs, camera features, multi-touch drag & drop activities.
Credits
Art & Animation - Betty Kwong, Aksha Suri, Crystal Lee
Design - Terry Dee
Engineering - Alfredo Chu, Mars Dong
Production - David Lam
Content - Shannon Vesik, PBS
Site design & wordpress theme development for Red Harvest Pictures, a film studio which specializes in horror flicks, sci-fi and dark dramas.
Role
Web Design & Development
Site development for DJ Reign, an acclaimed Vancouver-based DJ.
Role
Web Development
Challenges
A custom content management system, and a custom flash/javascript mp3 player.
Credits
Design - Stephen Wolynsky
Front-End UI Design for Medal of Honor Heroes, for the Wii & PSP.
Role
UI & UX Design
Challenges
Establishing visual parity between the Wii & PSP versions, two vastly different devices.
Credits
Art Direction & Design - Justin Baker
High level user interface mockups and career flows for EA Fifa 11 on the Xbox 360 & PS3.
Role
UI Designer, UI Animator, Technical Artist
Credits
Art Direction & Design - Joey Lee
Front-end UI design for EA Grand Slam Tennis on the Wii, and high concept mockups for EA Tennis on the Xbox 360 / PS3
Role
UI & UX Designer
Credits
UI & UX Design - Stephen Wolynsky
Art Direction - Peter Hoang
Front-end UI design for NCAA '09 on the Wii and PSP.
Role
Lead UI & UX Designer
Credits
UI & UX Design - Jeff Kwok
Art Direction - Matt Penner
Front-end UI design for Madden '08 on the Wii and PSP.
Role
UI & UX Designer
Credits
Art Direction - Stephen Wolynsky
Web & flash development for McDonalds' online meal nutrition and calorie calculator.
Role
Flash development
Challenges
Every single menu item and ingredient, down to macro and micronutrients is fed into the web app via XML. Customers drag & drop food items onto a virtual tray and can examine nutritional information, disabling/enabling specific ingredients for each item. Results can be printed to pdf.
This project also involved the creation of various flash ui components, and the integration of a proprietary McDonalds' algorithm to handle number manipulation (%, mg, cals, etc).
Credits
Design - Josh Trusz
Site design & development for Kereluk Law & Co., a firm which specializes in personal injury and family law.
Role
Web Design & Development
Site design & development for Empheon, a boutique technology consulting firm for small businesses.
Role
Design & Development
Site design and development for 1CMM, an online community of elite gamers and gaming enthusiasts of Planetside, an online PC game.
Role
Web design & development
Challenges
Involved the creation of a community portal, complete with registration, forums, server status scripts, file hosting, etc.
Site design & development for Julie Desroches, a Montreal-based abstract painter and sculptor.
Role
Web design & development
Challenges
The site was localized in French and English.
Site design & development for Mount Pleasant Stereo, a small home theatre shop which specializes in high-end sound systems and televisions.
Role
Web design & development
Site design, development and flash animation for my original portfolio site (2006).
Role
Web design, development, flash animation
Challenges
All site content is data-driven via XML
Awards
CoolHomePages.com front page
