Ben's profile
Hello, my name is Ben.
I'm a product developer and love building interactive experiences for the web and mobile.
Some recent projects

Captioner

Create captions directly in your web browser.
Captioner
Task

To build an elegant and intuitive way to create captions for local mp4 videos, YouTube videos, or Vimeo videos, and be able to export these captions to SRT files.

Solution

Captioner loops through segments of videos until you have captioned it. The interface makes it intuitive to switch between captions, alter their start and end time, and create new ones. The timeline offers an interactive visualization of the entire project, providing a visual indication as to the word per minute ratio of each caption, warning authors when this ratio is too high.

Technology

I use my design system, Sancho-UI, to achieve an accessible and interactive design. React and Typescript are used on the front-end code, while I make use of Firebase for its authorization and database features.

A collaborative and interactive course delivery platform.
Watershed
Task

To create a course delivery platform that embodies the best of Visual Thinking Strategies, which emphasizes learning through collaboration and observation.

Solution

Our course delivery system operates as a collaborative canvas in which the user is encouraged to actively engage with course materials and their peers. As you engage with video, documents and images, you are asked questions and encouraged to create annotations. We use timeline visualizations that mark course progress and highlight interactions with your collaborators. The result is a highly dynamic, interactive course taking experience that visually reflects your contributions to the course.

Technology

Watershed uses React on the front-end and consumes an Express delivered GraphQL API on the backend. We utilize websockets to provide real-time chat functionality, Postgres and Redis for databases, and we use styled-components to develop our own design system.

Julienne

The easiest way to share recipes with family and friends.
Julienne
Task

To build an elegant way to maintain a shared recipe collection with family and friends.

Solution

Each user of Julienne can maintain their own recipe collection, but they can also follow other users. You can then view the recipe collection of each user, or you can search the entire collection of recipes for all of the users you are following. The user interface is responsive, and works well on both mobile and desktop devices.

Technology

Julienne uses my design system, Sancho-UI to create a responsive and accessible design. Firebase is used to manage authorization and data persistence. React and Typescript are used to build all of the front-end code.

Eugenics archive

An exploratory database about the history of eugenics.
Eugenics archive
Task

The Living Archives on Eugenics project wanted to create a database of eugenics related information pertaining to its history in Canada and around the world and its continued significance today.

Solution

Our highly extensible and interactive database encourages users to explore the topic of eugenics in their own way. Content in the database can partake in different modules, like a Timeline, MindMap or Globe, which reveals different connections between database entries. It’s easy to switch between these modules to explore different contexts. We also developed a more traditional database interface to allow team members to input and edit content and include content in different modules.

Technology

The Eugenics Archive uses an Express hosted backend backed with a MongoDB database. The front end is a javascript application built entirely with smaller modules, with an emphasis on using native dom interfaces. We built many libraries in the process, including image-zoom, tour, transit, network, and youtube.

Open source on GitHub

Sancho-UI

A design system built with React, Typescript, and Emotion.
Sancho-UI
Task

To create an accessible, responsive and beautiful design system to quickly prototype React-based applications.

Solution

Sancho aims to treat the mobile experience as a first-class citizen, and therefore offers a set of components that work equally well on all devices. Accessibility is also a priority. All components are fully keyboard accessible and follow wai-aria guidelines. The visual appearance of Sancho is based upon my individual preferences, and incorporates my favourite aspects of Material UI, Bootstrap, and Evergreen.

Technology

Sancho is built using Typescript, React, and Emotion. Emotion (a popular CSS-in-JS library) provides predictable composition, allowing users to easily customize components. We also make heavy use of react-spring for building fluid, performant animations.

Recent blog posts
Show more
Me and buddy, a dog

A bit about me

Hey folks, I’m a developer and designer currently living in British Columbia, Canada. My primary education is actually in history and philosophy, having gained a masters degree in philosophy from the University of Alberta, but my most employable skill is as a coder and designer. I love dogs, peanut butter, coffee, plaid, mountain biking, and pretty much anything design related.

As a result of having spent most of my career working with smaller teams, I’ve had to wear many hats and develop different skillsets. I specialize in front-end development and design, in particular anything React related, but my skillset more broadly includes server-side technologies (like node.js, Postgres, and GraphQL) and I’ve built numerous iOS and android applications using react-native.

Beyond that, I have experience developing design systems, working with html and css, and I’m familiar with best practices with regards to seo and accessibility.

Above all, I love building innovative and intuitive products that help people learn and connect. If you share a similar passion, please contact me through twitter or email me. I’m always happy to grab a coffee or beer. I’ll buy!