Dominic

Burt—Product

Designer

Dominic
Burt—Product
Designer

Dominic

Burt—Product

Designer

Dominic

Burt—Product

Designer

Previously at Meta, currently at Shape. Based in London.

Previously at Meta, currently at Shape. Based in London.

Previously at Meta, currently at Shape. Based in London.

↓

↓

Scroll down

Design portfolio

↓

↓

Design portfolio

01/04

Shape

YC S21

An AI data analyst that lets you ask databases questions in plain English through a Slack bot or web app.

Shape.xyz

Head of Design

Strategy, planning, direction

Visual, content design, UX

Brand

Problem

It's difficult to quickly obtain specific data points for decision making and tracking progress across projects. Dashboards are rigid and quickly become outdated.

Audience

Product stakeholders such as investors, employees, customers, and suppliers.

A laptop and a phone showing Shape's UI.
Shape UI close up

Q+A

Ask questions in plain English

Shape can interpret questions, provide a summary and select an appropriate data visualisation. You can dig deeper with multiple follow up questions. All answers can be inspected, shared and added to a dashboard.

Direct feedback can be given to improve the engine. Data analyst reviews can also be requested to double check sensitive results.

Q+A

Ask questions in plain English

Shape can interpret questions, provide a summary and select an appropriate data visualisation. You can dig deeper with multiple follow up questions. All answers can be inspected, shared and added to a dashboard.

Direct feedback can be given to improve the engine. Data analyst reviews can also be requested to double check sensitive results.

Q+A

Ask questions in plain English

Shape can interpret questions, provide a summary and select an appropriate data visualisation. You can dig deeper with multiple follow up questions. All answers can be inspected, shared and added to a dashboard.

Direct feedback can be given to improve the engine. Data analyst reviews can also be requested to double check sensitive results.

Shape Q+A flow

SQL

SQL inspector

The created SQL for each question can be checked and edited using direct input or plain English prompts.

Results and tables are also displayed below the SQL query.

SQL

SQL inspector

The created SQL for each question can be checked and edited using direct input or plain English prompts.

Results and tables are also displayed below the SQL query.

SQL inspector

Datasources

Add a datasource

Shape is automatically connected to a demo data source on first use so you use it straight away. Multiple kinds can be selected in the dropdown.

Adding your own datasource is easy through the same entry point.

Datasources

Add a datasource

Shape is automatically connected to a demo data source on first use so you use it straight away. Multiple kinds can be selected in the dropdown.

Adding your own datasource is easy through the same entry point.

Adding a datasource

Dashboards

Dashboard creation

Each question and answer can be added to a shareable live dashboard with no technical knowledge necessary.

Multiple data visualisations can be chosen.

Dashboards

Dashboard creation

Each question and answer can be added to a shareable live dashboard with no technical knowledge necessary.

Multiple data visualisations can be chosen.

Dashboard creation

Branding

Marketing, website and logo

In addition to Shape's UI and UX, I defined the brand, logo, website, content design and marketing material.

Here's a closer look at the logo and homepage.

Branding

Marketing, website and logo

In addition to Shape's UI and UX, I defined the brand, logo, website, content design and marketing material.

Here's a closer look at the logo and homepage.

Shape logo

02/04

Spark Studio

Meta

A desktop app that creates all of Meta’s AR, MR and immersive experiences across Facebook, Instagram, WhatsApp and Oculus.

Spark.meta.com

Staff Product Designer

Strategy, planning, direction

Visual design, UX

Brand

Problem

Creating, iterating and publishing AR experiences isn't possible for creators without deep knowledge of programming, 3D software and a distribution platform.

Audience

Creators who want to build and share AR experiences with a large audience.

Spark Studio on a screen

Creation

Workspaces

The authoring UI changes depending on what kind of experience you want to create. Here are examples of a face and world effect workspace.

For complex experiences with logic you can use the node programming canvas or scripting.

Creation

Workspaces

The authoring UI changes depending on what kind of experience you want to create. Here are examples of a face and world effect workspace.

For complex experiences with logic you can use the node programming canvas or scripting.

Spark Studio Workspaces

Publishing

Sharing experiences on Instagram

Creators can share their experiences on Instagram and Facebook on a custom publishing platform.

This is what a shared effect looks like on Instagram.

Publishing

Sharing experiences on Instagram

Creators can share their experiences on Instagram and Facebook on a custom publishing platform.

This is what a shared effect looks like on Instagram.

Design system pages

Design

Design system

I created and defined the framework of governance for the Spark Studio design system.

I also updated and maintained the Figma component library.

Design

Design system

I created and defined the framework of governance for the Spark Studio design system.

I also updated and maintained the Figma component library.

Design system pages

Logic

Patch Editor

A visual programming canvas which uses nodes (patches) that allow creators unfamilar with scripting to create complex effects.

Each colour represents a different category of node. For example logic patches are grey and assets patches are yellow.

Logic

Patch Editor

A visual programming canvas which uses nodes (patches) that allow creators unfamilar with scripting to create complex effects.

Each colour represents a different category of node. For example logic patches are grey and assets patches are yellow.

Patch Editor design system example

Branding

Spark branding

I created the Spark logo and branding as part of a side project to explore a suite of Spark products.

The logo was used as the main brandmark for Spark at Facebook.

Branding

Spark branding

I created the Spark logo and branding as part of a side project to explore a suite of Spark products.

The logo was used as the main brandmark for Spark at Facebook.

Spark Studio logo
Spark branding examples

03/04

CollabKit

YC S21

A React SDK that adds commenting and collaboration to products.

Collabkit.dev

Head of Design

Strategy, planning, direction

Visual, content design, UX

Brand

Problem

Building collaborative functionality into SaaS products is time-consuming and expensive.

Audience

SaaS product owners who want to move fast with a customisable off-the-shelf solution so they can concentrate on building what matters.

Components

Ready-made components

Fully customisable components that blend in with your native UI. Pick the functionality you need and just add it to you app.

The React SDK can be up and running in minutes.

Components

Ready-made components

Fully customisable components that blend in with your native UI. Pick the functionality you need and just add it to you app.

The React SDK can be up and running in minutes.

CollabKit component example

Features

Example feature set

Choose from wide range of commenting styles such as, lists, tables, charts, text, detail views, canvas and video.

This example uses a list view with a sidebar and annotation pins that can be directly attached to UI elements.

Features

Example feature set

Choose from wide range of commenting styles such as, lists, tables, charts, text, detail views, canvas and video.

This example uses a list view with a sidebar and annotation pins that can be directly attached to UI elements.

Example feature set

Examples

Multiple ways to comment

More component configuration examples. A list style card popover, tablular cards, charts pins and text highlighting.

We also have product detail views, maps canvases and video timecode pinning.

Examples

Multiple ways to comment

More component configuration examples. A list style card popover, tablular cards, charts pins and text highlighting.

We also have product detail views, maps canvases and video timecode pinning.

Flows

Micro-flow examples

Every interaction and menu uses familiar patterns and behaviours.

A few examples of some the micro flows within each module from the design system.

Flows

Micro-flow examples

Every interaction and menu uses familiar patterns and behaviours.

A few examples of some the micro flows within each module from the design system.

Micro-flow examples

Brand

Marketing, website and brand

To stand out amongst other SaaS products with similar offerings, I developed a vibrant logo, brand and website.

I also created the hype video to launch the product (further up this page).

Brand

Marketing, website and brand

To stand out amongst other SaaS products with similar offerings, I developed a vibrant logo, brand and website.

I also created the hype video to launch the product (further up this page).

CollabKit logo
CollabKit app launcher examples
CollabKit Merchandise examples
Phone app and brand pattern

04/04

Project MARS

Facebook

Mobile Augmented Reality Studio is an Android-only tool that lets you create AR effects in the Facebook camera.

Staff Product Designer

Strategy, planning, direction

Visual, content design, UX

Problem

I want to connect with my friends but I don't have any interesting content to share.

Audience

Creative Facebook users who want to entertain their friends and share their filters with the community.

Entry point

Creating effects in Facebook camera

Start creating through the Facebook camera, effects tray or via someone’s post or story.

Effects are saved and can be shared.

Entry point

Creating effects in Facebook camera

Start creating through the Facebook camera, effects tray or via someone’s post or story.

Effects are saved and can be shared.

Tools

Creation tool examples

Randomiser creates an arbitrary effect by combining different tool configurations. Head Shapes gives you template to get started.

You can directly select features on your face and deform them.

Tools

Creation tool examples

Randomiser creates an arbitrary effect by combining different tool configurations. Head Shapes gives you template to get started.

You can directly select features on your face and deform them.

Icons

Automatically generated icons

Based on the existing Facebook icon style, I devised a system to generate effect icons automatically.

Facial features can be arranged to represent a large range of effect styles.

Icons

Automatically generated icons

Based on the existing Facebook icon style, I devised a system to generate effect icons automatically.

Facial features can be arranged to represent a large range of effect styles.

Profile

London based

About

I have over 20 years experience across big tech, agencies and startups. I like tea and snowboarding. Sometimes I do talks.

I have over 20 years experience across big tech, agencies and start ups. I like tea and snowboarding.
Sometimes I do talks.

Previous

6 years at Meta working on Reality Labs, Facebook and Workplace.

Current

Shape, a YC startup building an AI data analyst that lets you ask databases questions in plain English.

Speaking

Howest Belgium 2018

FITC Toronto 2019

F8 2019

FITC Amsterdam 2020