>

Hello world!

>My name is Chuánqí. >I create tools for the curious mind.

WORK

I wear multiple hats at work. One as an engineer, another as a designer, and increasingly, a third as a PM. My trans-disciplinary process navigates the product team towards the Goldilocks zone of collaboration, where the needs and constraints from business, users, and technology are in perfect balance. Currently, I lead UX design and frontend development at Microsoft.

HITS

Microsoft’s knowledge base for product decision makers.

Details

HITS is a two-sided network for creators and consumers. I draw inspiration from behavioral economics to design mechanisms that bootstrap the ecosystem. The project also honed my skills on creating and maintaining an enterprise-scale design system that balances internal vs. external consistencies and reconciles historical conventions vs. newly formed interaction patterns.

HITS taught me invaluable lessons in working with legacy systems: how to prevent the dev team from drowning in technical debt and how to re-platform without disrupting the business. Thanks to the project, I implemented a query expression builder from scratch using abstract syntax tree, and hacked Stroybook for rendering emails.

Read the story about HITS
  • React
  • GraphQL
  • TypeScript
  • JAMStack
  • Knockout
  • Serverless
  • Docker
  • .NET
  • Design lead
  • Frontend lead
  • 2020+

Dynamics 365

Microsoft’s business application platform.

Details

Dynamics 365 introduced me to system thinking. Every problem must be solved at the interconnect between the platform team, internal solution teams, partner solution teams, business organization, and business’ customers. I learned valuable lessons in balancing the interests from all of the stakeholders above and designing systems that outlasts the change of people and processes.

I used in-browser rapid prototying to communicate and inform design decisions. I co-authored three design systems that empowered an entire team of frontend engineers. I pioneered an algorithmic color contrasting system and invented an iframe based technique for documenting React components.

  • React
  • TypeScript
  • Angular
  • RxJS
  • Designer
  • Prototyper
  • Frontend engineer
  • 2017-2020

Power BI

Microsoft’s Business intelligence solution.

Details

I was not on the Power BI design team, but through collaboration and mentorship I was introduced to data visualization and info graphics design. I devoured the classic designer books from Edward Tufte, Don Normon, Steve Krug, and Alan Cooprer, and took online courses on typography, color theory, information architecture, and interaction design. This period of learning paved the foundation for my later work as a designer.

I learned my first lessons in MV* framework. Many great developers selflessly coached me on design patterns, unit and e2e testing, and the cryptic art of debug CSS when IE support was still a must. I picked up D3.js as my go-to tool for data visualization and pushed the adoption for design systems before Brad Frost popularized the practice.

  • AngularJS
  • D3.js
  • .NET
  • C#
  • Full-stack engineer
  • 2014-2017

Commvault

Enable file backup and restore in macOS Finder.

Details

Commvault is an enterprise-facing data storage service. My internship project aims allow file-related operations directly from the OS native menus, similar to what Dropbox offers. Since macOS is known to be strictly locked down, I had to come up with creative ways to “hack” up a solution.

  • Objective C
  • Intern engineer
  • 2014

Lenovo

Stress testing the original ThinkPad X1.

Details

As a huge fan of the ThinkPad product line, I joined Lenovo when it was preparing to integrate its latest ThinkPad with the upcoming Windows 8. I learned about UEFI, SMBus, and Windows Management Instrumentation. I stress tested the BIOS module and learned about the error margin the hardware must operate on.

  • C Language
  • Windows 8 ADK
  • Intern engineer
  • 2013

PROJECTS

I’m a Human-Computer Interaction nerd. I go to great lengths to create systems, tools, and experiences that are functionally powerful and visually delightful. For these projects I would happily trade in my sleep.

osmos::craft

Push people to discover, ingest, organize, connect, generate, and share knowledge.

Details

The project includes a set of apps that share similar goals.

  • A web-based RSS reader running entirely from a GitHub repo.
  • A browser bookmark manager optimized for capture and retrieval speed.
  • A web-based text editor for networked note-taking, self-hostable on any Git repository.
  • (In progress) An all-in-one learning environment that brings together all of the above.

The project helped me grow from a consumer of libraries to a creator of them. For this project, I’ve designed a concurrent task schedular, a WYSIWYG text editor, an HTML templating engine, a DOM diffing and rendering algorithm, an RSS/Atom feed parser, and a unit test framework, all from scratch. I’m currently designing an operation-based conflict-free replicated data type for the TODO app.

  • TypeScript
  • Node.js
  • Docker

Turbo Query for Azure DevOps

Instantly search and filter up to 20,000 work items from Azure DevOps.

Details

My work project, hosted on Azure DevOps, suffered performance issues as it got too large. So I built this browser extension to help my team stay productive at work. The extension stores the entire project into the browser Indexed DB using Dexie.js and provides an instant search experience using an in-memory full-text search engine powered by flexsearch.

The biggest technical challenge is to strike the balance between data freshness, search and index performance, network consumption, and offline capability. It took me a while to implement the client/service architecture using the Web Workers API and an IPC abstraction layer, but the 60 FPS search UX in the final product was worth the effort.

  • Web Worker
  • React
  • Indexed DB

3Dconnexion SpaceMouse Driver

Turn your 3Dconnexion SpaceMouse into a panning and zooming tool for Figma.

Details

This project is my HCI treasure trove. It was challenging to identify the most intuitive direct manipulation model. Based on experiments and user feedback, I built dozens of prototypes with different sensitivity curves and activation thresholds, and evaluated their effectiveness on realistic tasks. The final solution respects each individual’s preference for manipulation target (canvas vs. camera) and offers customization for the power user.

Performance is at the center of this driver. The app was written with no dependency to reduce CPU and memory load. A “game loop” was implemented from scratch to achieve the bare-metal speed. Smooth interaction was ensured with the requestAnimationFrame API.

  • HTML
  • CSS
  • JavaScript

Accessifiers

A non-profit service to help people discover accessible apps.

Details

The project is constrained by engineering resource and requires high standards on accessibility. I emphasized on reducing complexity of the tech stack so volunteers from diverse backgrounds can feel comfortable when contributing. I promoted plain CSS over CSS-in-JS, semantic HTML with BEM over third party UI toolkits so the app will be, and will remain, accessible despite the ever-changing landscape of frontend frameworks. To facilitate asynchronous collaboration, I improvised a preview system based on GitHub actions so each PR has an immutable URL for sharing.

  • React
  • Storybook
  • HTMl
  • CSS
  • JavaScript
  • Volunteer frontend lead
  • 2021+

Clicademy

A sandbox for digital marketing students.

Details

It’s difficult to become a market analyst without real data. It’s difficult to get real data without becoming a market analyst. Clicademy solves this chicken-and-egg problem by creating a self-sustained ecosystem that allows user to generate data while learning analytics.

I produced branding assets and lead frontend engineering for this project. The constraints posed by the WordPress platform required careful tradeoff between cost of maintenance and brand expression. My rapid prototyping process allowed us to validate the solution against real customers on very step we took.

  • WordPress
  • CTO
  • 2020+

OData Filter Builder

A library that programmatically builds the OData filter expression for the Azure Cognitive Search API.

Details

A spin-off project from the HITS product. I enjoyed the challenge in the nitty-gritty of compiler design. The project allowed me to practice test-driven development and architect the system with Object-Oriented design. It was rewarding to see multiple layers of abstraction working in unison to serialize the syntax tree into the correct expression. The library currently powers the search experience in the HITS product.

  • TypeScript

Switchboard

Instant access to Dynamics 365 demo environments.

Details

Dynamics 365 is a B2B platform that creates apps on-demand for each customer, causing difficulty when designers and PMs need to view their own work. The tool provides a one-click solution to allow instant access to demo environments.

The app repurposed browser automation testing tool to co-pilot with human users, eliminating repetitive and error prone steps. The tool was written from scratch three times, with each iteration learning from its predecessor while exploring new opportunities.

  • Initial version was a CLI. It was fast and nerdy, but became difficult for non-technical users.
  • The second version was a GUI app based on electron. It was intuitive to use but app installation became the bottleneck for adoption.
  • The current version is a cloud service that requires no installation. It has the lowest barrier to entry at the cost of limited integration with the native OS.
  • Node.js
  • Electron
  • Puppeteer
  • Svelte
  • Lit
  • Author
  • 2019+

cursors

A podcast about culture, design, and business at Microsoft.

Details

The project considers the producers’ experience as important as the listeners’. I adopted WordPress as a headless CMS for its simple admin experience. The frontend was intentionally decoupled from WordPress to realize a highly custom brutalist design by Jeremy Barnes. I also learned a great deal building an audio player from scratch, and publishing the podcast on iTunes.

  • Headless WordPress
  • HTML
  • CSS
  • JavaScript
  • Web Audio
  • Full-stack engineer
  • 2017-2018

529 Legion

Web and print resume for a bike racing team.

Details

529 Legion is a mountain bike racing team and community event organizer. Every year 529 Legion presents its achievements and calls for continued support as it renews its sponsorship. I worked with the team manager to design and produce the print resume and the team website for three years in a row.

Read the resume (2019)
  • Adobe Illustrator
  • Figma
  • Squarespace
  • HTML
  • CSS
  • Designer
  • 2015-2019

Power Loops

The next gen dev experience for Microsoft Power Apps Control Framework.

Details

The project was a concept demo, inspired the hot module reloading from webpack. Developer productivity was low because each change could only be reviewed after a full deployment. The concept demo solves the problem by creating a mini container environment to satisfy all the I/O requirements (similar to Docker), so developers can preview their changes locally, with instant reload.

The project was successfully productionized into the Power Platform CLI.

  • Node.js
  • Yeoman
  • Commander
  • Co-author
  • 2018

Contrast Matrix

Ensure accessibility for an entire palette.

Details

WCAG 2.0 requires minimum contrast ratio for UI elements. Existing tools only validate one foreground/background pair at a time, creating a bottleneck in the designer’s workflow as the complexity of the UI grow. The tool solves the problem by generating a matrix of foreground/background color pairs so all possible color pairs can be validated at once. The palette can then be exported and imported for reuse.

I collaborated with Adam Ferch to realize his design in code.

  • HTML
  • CSS
  • JavaScript

Jasmine Mock Factory

A unit test utility that creates a mock of anything.

Details

Test-driven development was hard to practice because of the up-front cost in wiring up the mocks. This utility solves the problem by providing a universal mock object with zero setup for every unit test.

I practiced TDD for the project itself and leveled up my TypeScript game as I worked with self-referential types from the ES6 proxy API. To enable open-source contributions, I implemented a CI/CD pipeline with automated testing and coverage report.

  • TypeScript
  • Karma
  • Jasmine
  • Travis
  • Coveralls

Oblique

Source of inspiration for creative professionals.

Details

A tongue-in-cheek inspiration generator. I practiced social platform API integration at the height of the Web 2.0 movement. I also sweat the details in the logo.

  • HTML
  • CSS
  • JavaScript
  • Facebook API
  • Twitter API

Course inSight

Interactive course browser that uses machine learning and data visualization to help students design their academic path.

Details

The project integrates a course catalog with natural language processing and cloud database to provide recommendations based on the concepts extracted from a given course, revealing meaningful connections between courses that are not available through existing technologies.

The project synthesized several concepts floating in my head around that time:

  • The course catalog crawler was designed based on the search engine crawler from CS50 (Software Design and Implementation).
  • The Natural Language Processing algorithm was inspired by the Machine Learning lectures from CS74 (Machine Learning and Statistical Data Analysis).
  • The data visualization was inspired by my internship with Microsoft on the Power BI product.
  • Bash script
  • HTML
  • CSS
  • JavaScript
  • D3.js
  • Alchemy API (IBM Watson)

Hanover Weather Audiovisual Experience

Transform weather data into an audiovisual rollercoaster ride.

Details

A experiential art project produced for a film and music studies class. To put my learning from CS02 (Programming for Interactive Audio-Visual Arts) into practice, I composed this piece in Processing and had loads of fun watching the reaction from my professor and classmates. While collaborating with 2 other students, I am the primary creator of the experience.

  • Processing
  • Java
  • Artist
  • 2015

MidiEvo

A sequencer and looper for any MIDI input device.

Details

A tool for musicians to compose MIDI loops. Ensuring the speed of I/O became the critical piece for this project. Without using expensive hardware, I implemented a quantized time alignment algorithm to improve the output quality.

  • Processing
  • Java
  • MIDI

IOT Lights Control Panel

An IoT Hub controlling smart lights for a 91,800 sqft field house.

Details

The smart lights installed in the field house at Dartmouth was not conversing energy as much as it should due an out-dated centralized scheduling system. To improve lighting efficiency, I worked with DALI lab to allow field house users adjust lighting on-demand. The project taught me lessons in collaboration with stakeholders and designers. I also had fun learning a NoSQL cloud database and the Backbone framework.

  • IoT
  • Parse
  • Backbone
  • HTML
  • CSS
  • JavaScript
  • Full-stack engineer
  • 2014

Gesture-controlled Learning Game

Help user achieve learning goals while winning $1000 from Intel.

Details

Using a prototype infrared camera and a computer vision SDK for head and hand tracking, I created a primitive 3D environment to explore the use cases of the novel interaction. The project revealed the performance limitation from the hardware and the software at the time, but our gesture based navigation pattern had become commonplace in today’s AR/VR applications.

My team, lead by Fei Yu, had won the $1000 early submission prize from the Intel Perceptual Computing Challenge.

  • Intel Perceptual SDK
  • Unity
  • C#
  • Lead engineer
  • 2013

Eye Tracker Data Analysis

Modeling cognitive bias from eye movement.

Details

A research project lead by Alireza Soltani. I used machine learning techniques to identify correlations between brain activities and eye saccades. The research project taught me the rigor and patience in the scientific endeavour, and also showed me the practical side of machine learning just as I finished CS74 (Machine Learning and Statistical Data Analysis).

  • MATLAB
  • Support Vector Machine
  • Research engineer
  • 2013-2014

Language Detection from Speech Samples

Detect spoken language using a natural language processing pipeline.

Details

A research project in collaboration with Jingwei Pan, for CS74 (Machine Learning and Statistical Data analysis). I experimented with Support Vector Machine and Neural Network to differentiate Chinese, French, and English.

  • MATLAB
  • Support Vector Machine
  • Neural Network
  • Engineer
  • 2013

I/O

I collect gems from other beautiful minds, and occasionally throw a few pebbles back into the pond, watching the ripples spread.

Essays

Digests

Influenced by

Education

I’m forever grateful for my liberal arts education at Dartmouth College. In addition to all the courses you would expect from a Computer Science degree, I have also received rigorous training in drawing, photography, film studies, audio-visual programming, and 3D animation. The most unforgettable lecture? Having Alison Ouellette-Kirby and Noah Kirby teach us melting and pouring 2,220 °F liquid iron into our hand-prepared clay molds! I graduated in 2015 with the highest honors.