**The Events app was designed for a small user-base of event creators** **and social butterflies** who nudged their friends to come out and play.

**I was the design lead on the project** with [Patrick Keenan](https://www.linkedin.com/in/patrickkeenan/de), who took over the project after my departure; early contributions from [Kevin Schaefer](http://kjschaef.com/).

**The app was designed and built from 2015 to 2016**, with an official launch in Oct 2016. It was eventually renamed "Local".

[Facebook releases a standalone app for events](https://www.theverge.com/2016/10/7/13192918/facebook-events-app-ios-android)

---

## The Case for a Separate Events App

### Highly Engaged Core User Base

Events had a small cohort of power users who discovered, created and shared events with their network. Some used Facebook exclusively for Events, yet their actions had an engagement multiplier effect on the platform as a whole.

### Missed Opportunities to Connect

Event notifications and newsfeed stories were timely and valuable to people, but were drowned out by the Facebook content firehose. A significant portion of users had turned off notifications altogether.

### A Mismatch with the Facebook App

Calendar integration and more tools were commonly requested by the community, but hard to justify in the Facebook app. Adding that functionality would add significant bloat and dilute its focus on content consumption.

---

## Early Exploration

In early concepts, the app would facilitate casual get-togethers with close friends by creating looser, "lightweight events". With a greater volume of events on the platform, the intent was to leverage an Event-only Newsfeed to nudge people to going out.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2F8WMrbYJFddDnMjKs0Bjb%2F23d05cbd-dbd0-4f5c-b256-9e30ee3661d8.jpg?alt=media&token=79218226-00a6-4e24-b0b0-cc3300df82a8","id":"23d05cbd-dbd0-4f5c-b256-9e30ee3661d8","width":2000,"height":904,"filename":"Create a lightweight event, keep track of your commitments, and get relevant information the day of the event.jpeg","type":"image/jpeg","caption":"Create a lightweight event, keep track of your commitments, and get relevant information the day of the event","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2F8WMrbYJFddDnMjKs0Bjb%2F8dbdcd96-dc68-49a7-bcc3-39ff9be54ee7.jpg?alt=media&token=a07729f1-aeba-4a52-9bdb-b85bb8909969","id":"8dbdcd96-dc68-49a7-bcc3-39ff9be54ee7","width":2000,"height":904,"filename":"Events feed showing future opportunities, what's happening now and past events (FOMO).jpeg","type":"image/jpeg","caption":"Events feed showing future opportunities, what's happening now and past events (FOMO)","border":false}]}
```

---

## Back to Core Assumptions

It took time to define the app's core value proposition. We grounded the designs on what matters most to our core audience:

1. **Effective** **Scheduling**

2. **Finding interesting events to join in the near future**

3. **Joining your friends' events**

4. **Frictionless sharing and coordinating**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2F8WMrbYJFddDnMjKs0Bjb%2F94eda071-1748-4001-8316-7f873feee1a9.mp4?alt=media&token=17ce7616-e662-4f3c-8984-2585b9ae1815","id":"94eda071-1748-4001-8316-7f873feee1a9","width":1280,"height":720,"filename":"Events_Proto.mp4","type":"video/mp4","caption":"The prototype that served as the project's north star","border":false}]}
```

## Effective Scheduling

The app imported 3rd party calendary and served as a centralized scheduling and event planning hub.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2F8WMrbYJFddDnMjKs0Bjb%2F3d5e9001-db82-4651-bb9d-fbd55cbe022f.png?alt=media&token=8391a0cb-4efb-48ab-9d18-d1b89e456963","id":"3d5e9001-db82-4651-bb9d-fbd55cbe022f","width":2000,"height":1232,"filename":"image (2).png","type":"image/png","caption":"","border":false}]}
```

## Finding Events

Searching for events, artists, venues, categories, map areas, and dates at the same time was challenging to design for. Using a combination of autocomplete and constraining search results by relevant time frames (Today, Tomorrow, This weekend, Anytime) helped cut down on noise.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2F8WMrbYJFddDnMjKs0Bjb%2Fb8f3c013-7225-479f-a35c-b817bd3c7970.png?alt=media&token=b47baea3-1120-4ed1-884b-59d51da2d2d5","id":"b8f3c013-7225-479f-a35c-b817bd3c7970","width":2000,"height":1166,"filename":"image (3).png","type":"image/png","caption":"","border":false}]}
```

## Connecting with Friends

The app framed event discovery with friends whenever possible, as it was the main differentiator with competing services (Eventbrite, local publications).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2F8WMrbYJFddDnMjKs0Bjb%2F892847cf-86f6-48e1-835a-2a97ed3d77e9.png?alt=media&token=3f61a1b9-14cd-46d6-bd2c-9a349dc6d292","id":"892847cf-86f6-48e1-835a-2a97ed3d77e9","width":2000,"height":1945,"filename":"image (4).png","type":"image/png","caption":"","border":false}]}
```

## Sharing and Coordinating

Using Messenger lowered the friction of sharing and coordinating with Friends. Group messages with event details were automatically generated to provide context and draw outsiders in the ecosystem.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2F8WMrbYJFddDnMjKs0Bjb%2Ff064feb8-c7e8-4998-a1a1-6d51385411ce.png?alt=media&token=36d5250f-7bd1-4b42-bcac-6db8cf2109bf","id":"f064feb8-c7e8-4998-a1a1-6d51385411ce","width":2000,"height":1369,"filename":"image (5).png","type":"image/png","caption":"","border":false}]}
```

---

## Avoiding the Facebook App Graveyard

Creating standalone products at Facebook is a risky endeavor. Apps like Groups, Moments, or Paper were all eventually shut down because they failed to capture a large enough audience, didn't differentiate, or were the victims of shifting product strategy.

The Events app, meanwhile, lives on (albeit under a new name - *Local*). For better or worse, Facebook might still be one of the best positioned to do help people connect in the real world.

The Events App

**In 2014, Facebook Events presented a great opportunity.** It was one of the most active surfaces of the platform without substantial product and design investment.

**I was a product design lead** on the team, \*\*\*\*along with [Kevin Schaefer](http://kjschaef.com/), [John Kumahara](https://www.linkedin.com/in/john-kumahara-3a7a278/) and [Patrick Keenan](https://www.linkedin.com/in/patrickkeenan).

**During my tenure (2015→2016), we split Events to 2 products**: a focused social product for personal events, and a flexible platform for public events.

---

## The Sleeper Hit

> Events was one of the unsuspected success stories on Facebook. In 2014, it captured a generous portion of Facebook's engagement metrics without significant investment beyond maintenance and cosmetic updates.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2Fe5af87e7-d40e-4ad5-8336-314e631cd176.png?alt=media&token=5a34b46c-d89d-4a23-b685-90da8be1c84f","id":"e5af87e7-d40e-4ad5-8336-314e631cd176","width":2000,"height":1125,"filename":"Not much had changed since 2011.png","type":"image/png","caption":"Not much had changed since 2011","border":false}]}
```

### Outgrowing its Original Use Case

Over time, use cases for Events grew beyond house parties. Festivals, concerts, online events, art shows, and protests made the bulk of events and invites, effectively diluting the core use case.

### An Effective Distribution Channel... to a Fault

Invitations to Facebook Events guaranteed direct communication with users on Facebook without the limits of Messenger or Newsfeed. Events were getting abused as a spam distribution mechanism and were rife with memes.

## The Case for Splitting Events

Public and Private Events called for distinct content, invites, and connection models (e.g. going / not going). However, Facebook products are designed as generic platforms to aggregate as many users as possible and expose them to advertisers on Newsfeed.

The argument was won by demonstrating:

1. **Distinct actors** - private and public event creators did not overlap

2. **Distinct use cases** - private events are about personal invitations and sharing memories after the fact; public events are about promoting, engaging and selling tickets

3. **Use cases that hurt each other** - spam invitations were on the rise, RSVP responses were going down

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2F95034746-3f00-4213-9baa-cd0e6bcbb710.png?alt=media&token=a288534a-5199-43f1-b82f-6b5856bd989d","id":"95034746-3f00-4213-9baa-cd0e6bcbb710","width":2000,"height":982,"filename":"image (1).png","type":"image/png","caption":"","border":false}]}
```

---

## Private Events

The product was shifted towards feeling personal and private. Invite responses were updated to **Going / Maybe / Can't Go** (instead of Join / Leave). This lowered social pressure and increased responses to give hosts a more accurate preview of their guest list.

## **Personal Invites & Reminders**

Deeper integration with Messenger made invitations feel like direct messages instead of an impersonal broadcast. Social notifications helped people coordinate at the right time.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2F5a7c4f40-e0eb-405e-b205-36acb5e619fa.jpg?alt=media&token=b066f3f5-e96b-4c05-8906-4ebd6682e7fc","id":"5a7c4f40-e0eb-405e-b205-36acb5e619fa","width":2000,"height":1125,"filename":"image.jpeg","type":"image/jpeg","caption":"","border":false}]}
```

## **A Safe Place for Shared Memories**

Restrictions were put on the visibility of private events so guests felt like they could discuss and share photos more freely.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2F4cfcd011-03e2-4dec-b275-56975237d42c.jpg?alt=media&token=83bc00bb-b34b-4fd5-acc4-c51ad5991a73","id":"4cfcd011-03e2-4dec-b275-56975237d42c","width":2000,"height":1125,"filename":"After an event, a shared album was automatically created for attendees to add photos.jpeg","type":"image/jpeg","caption":"After an event, a shared album was automatically created for attendees to add photos","border":false}]}
```

---

## Public Events

Public events were re-created from scratch. Conversations were downplayed in favor of useful information, and tools were given to promoters to help them grow their audience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2F8bb921a9-5861-4f43-864b-8b20e26307b2.jpg?alt=media&token=34a73a2b-f2d2-4272-9bf8-986c1149ab77","id":"8bb921a9-5861-4f43-864b-8b20e26307b2","width":2000,"height":1125,"filename":"image (1).jpeg","type":"image/jpeg","caption":"","border":false}]}
```

## Contextual Information

To nudge people into signaling their intent to attend events, we surfaced all the pieces of information needed to make a decision. Cards were added over time to describe the venue, performers, who's going, who might be interested, etc.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2Fb43e3355-69a0-426c-8a7b-350f5c323774.jpg?alt=media&token=a74a7dde-84c5-4299-9720-807936fdad02","id":"b43e3355-69a0-426c-8a7b-350f5c323774","width":2000,"height":1125,"filename":"image (2).jpeg","type":"image/jpeg","caption":"","border":false}]}
```

## Social Discovery

By changing the connection model to **going / interested**, people could signal interest to their network without committing too much. Over time, this generated more relevant event recommendations and clustered friends with similar tastes.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2F6f144f64-2400-4b4d-a25e-7b4b5599e131.jpg?alt=media&token=5e5039da-4a73-4c82-8021-744106ddbc0c","id":"6f144f64-2400-4b4d-a25e-7b4b5599e131","width":2000,"height":1125,"filename":"Timely notifications were instrumental to nudge users to make plans with friends.jpeg","type":"image/jpeg","caption":"Timely notifications were instrumental to nudge users to make plans with friends","border":false}]}
```

## **Tools for Event Creators**

Giving promoters insight in their audience helped them grow and use Facebook as their primary distribution channel (and therefore ads, *wink wink*). We designed dashboards with engagement metrics, ticket link click-throughs, demographics, attendance projections, roles & permissions to that effect.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2Fc1922e10-dffc-452f-9f39-0e687ee2efbb.jpg?alt=media&token=1ec66fc4-2d5b-482f-8c7f-afdbf81d7705","id":"c1922e10-dffc-452f-9f39-0e687ee2efbb","width":2000,"height":1125,"filename":"image (4).jpeg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2F9e1bd679-5973-48a3-8400-423189dc8540.jpg?alt=media&token=58939126-af0c-41e6-b640-729c280b9edc","id":"9e1bd679-5973-48a3-8400-423189dc8540","width":2000,"height":1125,"filename":"image (3).jpeg","type":"image/jpeg","caption":"","border":false}]}
```

---

## Beyond Pixels

## At Scale, Nuance Matters

Updating the connection model (e.g. Going / Interested) was the smallest, yet most impactful change made for private and public Events. It reframed social expectations and stimulated engagement.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2F0275efe8-ecff-44d1-ae16-2bc5ed851809.jpg?alt=media&token=fbd06d57-9f8a-4507-b568-5d67f58b5dc3","id":"0275efe8-ecff-44d1-ae16-2bc5ed851809","width":2000,"height":615,"filename":"image (5).jpeg","type":"image/jpeg","caption":"","border":false}]}
```

## Harnessing the Beast

Facebook is perhaps the most powerful distribution network ever. Investing in the relevance and timeliness of notifications and Newsfeed stories, instead of UI, had drastic effects on user engagement and perceptions of the quality of the service.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FCGsJhS5Ursjd264Zd9hW%2Fa6793a67-8581-432a-9039-65f041e67945.jpg?alt=media&token=95d6ee15-7e30-4cfb-ab93-d55dd531126a","id":"a6793a67-8581-432a-9039-65f041e67945","width":2000,"height":1622,"filename":"image (6).jpeg","type":"image/jpeg","caption":"","border":false}]}
```

Events Redesign

**Horizon Workrooms is the flagship AR/VR product at Meta.** Its aim is to become the default AR/VR application for the future of work. It supports solo work in an AR environment, as well as meetings with other avatars and 2D participants over Zoom.

**As a Product Designer**, I was responsible for functional 3D room and desktop layouts, AR/VR interaction patterns, 2D UI in 3D space, avatar interaction patterns, integration of physical objects in VR (pencils, desks, keyboard, laptops), and a bunch more... I worked along a fantastic design & prototyping team: Alex Anpilogov, Gabriel Martzloff, Jon Mayoh, Jon Viera, Jon Mallinson, Minjee Ham, and Ethan Miller.

**During my tenure (2020→2021)**, I helped shipping Workrooms from an internal product to a public release. A lot of the fundamentals were in place but most of the features were in prototype form. The product needed tightening up and streamlining.

```cv
youtube
{"url":"https://www.youtube.com/watch?v=E-oDmiTTBUk&embeds_referring_euri=https%3A%2F%2Fguilleminot.notion.site%2F","width":200,"height":113,"thumbnail":"https://i.ytimg.com/vi/E-oDmiTTBUk/hqdefault.jpg"}
```

Horizon Workrooms

**[Enigma](http://enigma.com)** is a data company. It focuses on ingesting large quantities of publicly available databases to extract insights about companies, places, and trends.

**As a design co-founder**, I was responsible for product management and the design for the product, internal tools, and website.

**During my tenure (2011 → 2014)**, we took the product from a back-of-the-napkin idea to a full-feature public data exploration tool and API, with paying customers.

---

## Public Data Needs Infrastructure

### Public data isn't really public

Governments generate enormous amounts data, and are required by law (in the United Sates, at least) to release records if requested by their citizens. Those records are not readily accessible — they are trapped in messy portals, static databases and antiquated formats.

### You can't find public data

You can't look for public data sources unless you know what you're looking for. Uncovering the public data about to a company, a place or a government body involves painstaking detective work.

### You can't connect the dots

Public data sources cannot talk to each other. A lot of time and energy is spent on testing simple hypotheses that span across datasets.

---

## Designing for Ourselves

Since its inception, Enigma was ingesting thousands of large datasets. Managing, searching, and inspecting them was painful. Off-the-shelf tools did not offer a comprehensive and web-accessible package for us to use. **Data Explorer**, Enigma's first product, was born out of that need.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fnm5LNIykhaEwJ270r7vH%2F646613a0-3222-4da8-ac0f-1c4414091c5e.png?alt=media&token=7a8a5d82-d078-481b-b766-7611cca9f6c1","id":"646613a0-3222-4da8-ac0f-1c4414091c5e","width":2560,"height":1493,"filename":"12.png","type":"image/png","caption":"The earliest iteration of Data Explorer - quite the looker!","border":false}]}
```

Data Explorer served 3 purposes:

1. **Catalog and inspect Enigma's growing collection of datasets**

2. **Search for datasets and its contents**

3. **Demonstrating to investors the scale of Enigma's collection** and the nature of the problem we set out to solve

Designed and built over a few months, Explorer helped us secure financing to keep gobbling up datasets and defining our business cases, still hazy at the time.

## Designing for the Analyst

Having spent time with potential customers and ingesting a greater variety of public datasets, it became apparent that analysts, journalists and academics would value access to the platform. For a subscription fee, Enigma would help to gather insights on a broad range of topics: finance, energy, real estate, agriculture, local politics, etc.

The product was designed to be open-ended, optimizing for its ability to find needles in unsuspected data haystacks.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fnm5LNIykhaEwJ270r7vH%2Faebda8d2-fcfe-4f3a-9d3b-8fd450c4bff7.png?alt=media&token=cc199b77-c523-4105-96b0-8ab12645fc33","id":"aebda8d2-fcfe-4f3a-9d3b-8fd450c4bff7","width":1440,"height":840,"filename":"16 (1).png","type":"image/png","caption":"The beta version of Data Explorer","border":false}]}
```

### Asking Questions of the Data

At TechCrunch Disrupt in 2013, we demonstrated our vision of a typical workflow on Enigma. By asking simple questions about people, places and companies, one could build a data-rich picture of the world.

This was the Data Explorer's job. Searching through hundreds of millions of rows, testing out hypotheses on the fly, and hopping from dataset to dataset was orders of magnitude easier with Enigma than it was with traditional data research tools.

```cv
youtube
{"url":"https://www.youtube.com/watch?v=3GM-TBzIlX8","width":200,"height":113,"thumbnail":"https://i.ytimg.com/vi/3GM-TBzIlX8/hqdefault.jpg"}
```

## Data Explorer v1

Data Explorer was released along a Public Data API. Analysts, academics and journalists could discover relevant datasets on Explorer, and subsequently used the API to perform deeper analysis with their own tools.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fnm5LNIykhaEwJ270r7vH%2F9c6acbd0-5596-44f5-b2d7-503a01f14207.mp4?alt=media&token=9d43a4be-543f-4d41-9c64-0c4931b42665","id":"9c6acbd0-5596-44f5-b2d7-503a01f14207","width":1222,"height":903,"filename":"enigma_demo_cropped.mp4","type":"video/mp4","caption":"Search, filtering & quick insights","border":false}]}
```

## Browse & Search

Datasets in Enigma were organized in a large tree hierarchy, each node (e.g. Department of Energy) with its own description and metadata. Users could browse the collection and pivot into a search without losing context.

Search terms could simultaneously hit table metadata (table hierarchy, tags, description, headers), and data points inside tables. The design challenge was to maintain context as queries got complex (e.g. "search for 'google' in the department of energy's datasets that mention renewables from 2010 to 2015 in California"), while not overwhelming users with redundant results from similar tables.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fnm5LNIykhaEwJ270r7vH%2F6ac63526-e2f9-4cd7-b974-eea2200baf54.png?alt=media&token=4e481b79-f86c-4313-89bc-d81cd7157b7d","id":"6ac63526-e2f9-4cd7-b974-eea2200baf54","width":2560,"height":1493,"filename":"18.png","type":"image/png","caption":"","border":false}]}
```

Over time, contextual filters like date and location distribution were added to help cut through the noise.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fnm5LNIykhaEwJ270r7vH%2Fd3adf49b-4337-408a-98f5-977f2d8bb419.png?alt=media&token=bfc8101d-faaf-49d9-bb61-39f908e29367","id":"d3adf49b-4337-408a-98f5-977f2d8bb419","width":2560,"height":1493,"filename":"20.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fnm5LNIykhaEwJ270r7vH%2Fbf464dbb-92e6-47dd-a41e-d351bffab724.png?alt=media&token=47b2a2b7-4bb5-4511-9dba-af81eaa85335","id":"bf464dbb-92e6-47dd-a41e-d351bffab724","width":2560,"height":1493,"filename":"21.png","type":"image/png","caption":"","border":false}]}
```

## Data Explorer

High performance was a requirement for inspecting large datasets. Data was streamed via websockets to the UI to avoid pagination and curb loading times. Whenever possible, filtering, calculations and pivot searches could be made contextually on individual cells, rows or columns. This made it easy for analysts to look through an individual dataset, shape it to their liking, earmark it for further processing, and move on with their research.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fnm5LNIykhaEwJ270r7vH%2F97ea0ab2-3ee0-4da2-8de5-73dc84606639.png?alt=media&token=2ae1fb73-f540-4e15-b78b-294f8ec087b2","id":"97ea0ab2-3ee0-4da2-8de5-73dc84606639","width":2560,"height":1493,"filename":"17.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fnm5LNIykhaEwJ270r7vH%2F221cfe4f-55d9-459b-9c7c-ace2751e8065.png?alt=media&token=f3637ce7-2d0b-4675-a557-6ed28cd3c544","id":"221cfe4f-55d9-459b-9c7c-ace2751e8065","width":2560,"height":1493,"filename":"22.png","type":"image/png","caption":"","border":false}]}
```

---

## Epilogue

Most of our customers got overwhelmed by the vastness of the data in Public Explorer, in spite of our efforts to categorize and abstract it. Guiding customers with our domain knowledge became a large part of our activity. In effect, we pivoted to a consultancy model and tended to large clients in insurance, energy prospection, pharmaceuticals, etc.

The Data Explorer was retired in 2019 in favor of narrower products with clear value propositions. In retrospect, this was inevitable. Enigma was navigating through uncharted territory at the time; I'm unsure about whether we could have come to that conclusion earlier.

Enigma

**[Deliveroo](http://deliveroo.co.uk) is a food delivery company** with 4 product areas: Consumers, Riders, Restaurants, and Operations.

**As the first Principal Designer**, I was responsible for increasing the output speed and quality of the product design team (20+ designers) and prepare for growth.

**During my tenure (2017 → 2019)**, I streamlined Deliveroo's products under 2 design systems, built UI kits for designers, built component libraries for engineers with **[Matt Vagni](https://twitter.com/mattvagni)**, re-integrated Branding in the product design process, and promoted a culture of craft, accountability and collaboration.

---

## Challenges

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2F4c05c480-c6ef-4340-8a54-47f60b3d4bde.png?alt=media&token=cf7ef608-d6be-464a-83c0-8090766ce887","id":"4c05c480-c6ef-4340-8a54-47f60b3d4bde","width":2000,"height":836,"filename":"challenges.png","type":"image/png","caption":"Illustration by Ben Pearce","border":false}]}
```

### Product Growth

In 2017, Deliveroo aimed to add product surfaces to counter competitors' offerings as quickly as possible. To name a few: **subscriptions**, **promotions**, **restaurant pick-up, variable delivery fees, new search and filtering, in-house restaurant brands, rider earnings, rider onboarding, and more!**

### Improving Efficiency

Deliveroo was transitioning from labor-intensive operations to automated processes. This increased demand for internal tooling and architectural planning.

### Breaking Down Design Silos

Each product organization had evolved independently and distanced themselves from Brand & Marketing. Product designers (20+ strong at the time) couldn't switch teams easily and wasted time re-inventing the wheel. The product quality gap between Deliveroo and its competitors was widening.

---

## Building the Foundation

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2Ff9705ace-4945-4dc6-a27a-dc2425c906fc.png?alt=media&token=1ef52558-2878-443d-bc88-5bad9f30564e","id":"f9705ace-4945-4dc6-a27a-dc2425c906fc","width":1060,"height":853,"filename":"12.png","type":"image/png","caption":"","border":false}]}
```

The first step was to conduct an inventory of all surfaces and to interview every designer and content strategist on the team. It was determined that:

* Fundamentals (color, type, icons) had to be re-evaluated from the ground up, based on the latest branding updates

* All external facing, touch-first products (Consumer, Rider, Restaurant) will follow the same conventions

* All Tools (internal and external) will follow the same conventions

## Color, Type & Illustrations

A close collaboration with Branding Design, the goal here was to ensure continuity from marketing campaigns to the product UI.

Typography, color palettes, illustration styles and icons were scrapped and re-designed with usability and product utility in mind. Requests for new content (illustrations, icons) were formalized so the team would never be blocked by missing assets.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2Fc1f020d3-3bfa-4c8f-964b-a4fd55bc4d3e.jpg?alt=media&token=aedec6e8-b29c-4c86-88c9-ae581aa69961","id":"c1f020d3-3bfa-4c8f-964b-a4fd55bc4d3e","width":2000,"height":1726,"filename":"color.jpg","type":"image/jpeg","caption":"aaah, yes, the obligatory color palette screenshot","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2Ff6a926e7-deb0-49a9-94d5-ff131d2da2bf.png?alt=media&token=a60cb0ae-f7f6-4725-bcf9-389142d1a11a","id":"f6a926e7-deb0-49a9-94d5-ff131d2da2bf","width":2000,"height":1746,"filename":"Frame_9.png","type":"image/png","caption":"Illustrations by Ben Pearce","border":false}]}
```

---

## Products

The Consumer, Rider, and Restaurant apps all shared interaction models and platforms (iOS/Android/Mobile web). In the new system, they all sat under the same umbrella, sharing design fundamentals and UI patterns.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2F95f811e4-58e1-4425-ab9f-9cffd354d27e.jpg?alt=media&token=6b4d74b7-081a-4423-b8b7-6c0e2831f3d1","id":"95f811e4-58e1-4425-ab9f-9cffd354d27e","width":1730,"height":1296,"filename":"product.jpg","type":"image/jpeg","caption":"","border":false}]}
```

👀 Check out the [Source Figma file](https://www.figma.com/file/ZCtSoBC3aMHe1PNsvjA6vHSz/Products?node-id=0%3A1)

### **Mobile First**

The majority of the user base and the the growth was on mobile, so we focused on that first. Desktop was to follow mobile components, with exceptions where mobile patterns broke (type size, forms, and modals).

### Keeping Components to a Minimum

Platform specific (e.g. iOS, Android) patterns were avoided as much as possible. Adding or modifying components had to be strongly argued for to justify the effort.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2F41ce22b5-ac11-43dd-ae8f-e964ac67ab7d.png?alt=media&token=42e615f7-8500-4ee2-8cf3-cd4295371efd","id":"41ce22b5-ac11-43dd-ae8f-e964ac67ab7d","width":2000,"height":1508,"filename":"Frame_10.png","type":"image/png","caption":"rows on rows on rows","border":false}]}
```

Rows are a good example of why platform-specific components should be avoided. Things can get out of hand if each platform requires its own version.

### **Built-in Documentation**

> **Users don't read. Neither do designers or engineers.**

Fancy documentation websites require a lot of effort, are always out of date and are seldom consulted. We opted for in-context guidelines and examples in the UI kit itself.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2F4fcfd94c-bc2f-4729-831d-49747210d8d7.png?alt=media&token=26d79e85-0dc7-4165-b47b-45214d8b1c99","id":"4fcfd94c-bc2f-4729-831d-49747210d8d7","width":2000,"height":1414,"filename":"rows_doc.png","type":"image/png","caption":"","border":false}]}
```

Rows may seem innocuous, but they are the hardest component to design and document properly.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2F84e5bb99-7e45-4fc5-b71b-b645cb57a887.gif?alt=media&token=d22d8956-6b57-4b1c-bb9c-7f1a20836626","id":"84e5bb99-7e45-4fc5-b71b-b645cb57a887","width":1598,"height":922,"filename":"palettes.gif","type":"image/gif","caption":"","border":false}]}
```

Quality of life details make a difference in aggregate. Here, image placeholders facilitate resizing to standard ratios.

---

## Tools

Internal tools didn't have the luxury of generous UI engineer allocation and thorough maintenance. The Tools design system was built for resilience and modularity.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FotRreVwPq5g6CFy6i8Xl%2Fd2c1b2cb-8d06-48fe-be15-45afd93693de.jpg?alt=media&token=0efcb8ab-5271-43d0-bb3f-865d88e14be7","id":"d2c1b2cb-8d06-48fe-be15-45afd93693de","width":1630,"height":886,"filename":"tools.jpg","type":"image/jpeg","caption":"","border":false}]}
```

👀 Check out the [Source Figma File](https://www.figma.com/file/TllXNc3bjxgnn373pErQMB/Tools?node-id=0%3A1)

### **Desktop & Functionality First**

The assumption was that the heavy lifting in tools would be done on primarily desktop. **In hindsight, this was a mistake.** Read-only tools like dashboards would actually be consulted on mobile more than desktop, and ignoring responsiveness from day one was costly.

The trusty table, the foundation of the system

### **Card-based Layout**

Building internal tools involved adding and removing functionality quickly. Using cards made it easier to do so without worrying about breaking layouts.

Designing with flexible cards and good placeholders can accelerate the process quite a bit

### Strict Templates and Naming

With potentially hundreds of tools used by thousands of employees, design stability and wayfinding was imposed from the beginning:

* The navigation was flexible, but mandatory for all tools (including settings and log-in)

* Tools *had* to be named by what they do (*e.g. Delivery Tracker*), not given arbitrary code names or inside jokes (*e.g. Overlord*), and referenced in a directory for employees to find quickly.

The mandatory navigation and responsive behavior for all internal tools

### (Almost) Instant Tool **Creation**

We made it effortless to create new tools with navigation, identity and responsive layout built-in, ready to deploy. Reducing the friction of good practices goes a long way.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fdeliveroo%2F95c596f4-927e-4fff-92ac-f6ea95fe0023.png?alt=media&token=14282dde-5bb6-4794-878f-4380b372f128","id":"95c596f4-927e-4fff-92ac-f6ea95fe0023","width":2000,"height":474,"filename":"create.png","type":"image/png","caption":"","border":false}]}
```

---

## Impact

## Quick & Nimble Design Process

It took over 18 months to roll out design systems, standardize processes and incentivize higher UI quality output. Shared methodology, tooling and patterns made it easier to transfer skills between teams. On quarterly surveys, designers reported spending less time spent with UI minutiae, and engineers saw fewer variations in the specs they were handed.

## Quality and Consistency Across Products and Platforms

From TV and Outdoor ad campaigns to the product, all touch points felt like they belonged to the same family of products. Because Deliveroo operates a commodified service (food delivery), effort was made to incorporate personality back in the UI through strong brand colors and type, purpose-made illustrations and animations, and product photography.

The consumer app was gradually overhauled to adopt the unified patterns and branding

The Rider app required some adjustments from the design system to accommodate high-visibility requirements

Using standard components, re-designing the restaurant tablet took weeks to complete instead of months

## Tools that Scale

25+ internal tools were designed and built using the component library: dashboards, content management systems, maps, admin panels, management interfaces for Restaurants, customer support systems, etc.

<aside> ℹ️ I can't share actual screenshots of Deliveroo internal tools. These are representative templates.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fdeliveroo%2Fa6e3de1d-f6d4-48b2-a2dc-cf7f774d0847.jpg?alt=media&token=3524ea24-d6f6-4c06-acb6-cfee22a43584","id":"a6e3de1d-f6d4-48b2-a2dc-cf7f774d0847","width":2000,"height":1033,"filename":"02.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fdeliveroo%2F8d43e183-f725-46ed-a7dc-365e925777cb.jpg?alt=media&token=1a358cda-5314-4d7c-b2fa-21c36dedfb8d","id":"8d43e183-f725-46ed-a7dc-365e925777cb","width":2000,"height":1217,"filename":"03.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fdeliveroo%2F04145a44-4ff6-4bbc-95dc-7926a6d30a2a.jpg?alt=media&token=b5a5d11a-15a8-467b-999d-f5471b2a0397","id":"04145a44-4ff6-4bbc-95dc-7926a6d30a2a","width":2000,"height":1596,"filename":"01.jpg","type":"image/jpeg","caption":"","border":false}]}
```

---

## Design Systems as a Service

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2Fdeliveroo%2F0cd9c844-12d5-465a-a747-66f6e7be5f52.png?alt=media&token=3a947d85-4286-4a78-80ff-5e88dc36c246","id":"0cd9c844-12d5-465a-a747-66f6e7be5f52","width":2000,"height":590,"filename":"designers.png","type":"image/png","caption":"","border":false}]}
```

> Building designs systems is about fundamentally about people and change management. Putting processes in place to incentivize adoption and feedback loops was the biggest challenge for the team.

## Demonstrating Value to Designers

My team's aim was to relieve product designers from core UI tasks so they could focus on product design. Framing the team as a service to designers, not a design police, was crucial to overcome the initial resistance.

Picking up tedious tasks first (building and maintaining UI kits, icon design, transitioning from Sketch to Figma) proved instantly valuable and built trust. Same-day turnaround on requests for documentation, component updates and feedback, for instance, eased designers into relinquishing control.

## Adding Friction & Accountability

Accruing political capital allowed us to make sweeping changes to the design process and performance expectations. Once a baseline for design standards was established:

* The team attended all product design crits to provide guidance and gather feedback

* Product quality criteria were explicit, product reviews were conducted regularly

* Proposals were required to add or change UI patterns

* Compliance and participation to design standards was added to designers' performance reviews

In return, we were accountable for the design team's output and satisfaction. Quarterly surveys were sent out to designers, engineers and PMs evaluating design systems on **satisfaction**, **speed of execution**, **and** **perceived product quality**. This was tied to our performance rating.

---

## Appendix

Here's a talk I gave with Matt Vagni about our process, for those interested.

```cv
youtube
{"url":"https://www.youtube.com/watch?v=6C0yvuWJc84&t=4s","width":200,"height":113,"thumbnail":"https://i.ytimg.com/vi/6C0yvuWJc84/hqdefault.jpg"}
```

<https://www.youtube.com/watch?v=6C0yvuWJc84&t=4s>

Deliveroo Design Systems

In 2014, there wasn't a dedicated team for design systems at Facebook. FIG was a loose association of volunteers, pushing standards and initiatives on their own time. My contributions aimed to help designers and UI engineers stay in sync, at scale.

---

## GlyphKit

Led by **[Brian Frick](https://www.linkedin.com/in/brfrick/)**, took inventory of all the disparate icons found in Facebook products, updated them to new visual guidelines, visually calibrated them, and hinted them manually (SVG support wasn't universal yet).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FpV25XrMgVLA5PC2i5u5A%2F723e36a7-4657-4081-93a2-b774eed4a2a9.png?alt=media&token=943aeefb-8561-4579-8601-f49728903a18","id":"723e36a7-4657-4081-93a2-b774eed4a2a9","width":2000,"height":1830,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FpV25XrMgVLA5PC2i5u5A%2F203cf02e-a54b-4b04-938b-f74036dce492.gif?alt=media&token=3386bda5-1206-4507-9116-8b159b195d70","id":"203cf02e-a54b-4b04-938b-f74036dce492","width":1726,"height":780,"filename":"240 icons x 4 sizes x 4 densities =  3,840 individually hinted icons.gif","type":"image/gif","caption":"","border":false}]}
```

---

## Asset Manager

The Facebook codebase was rife with duplicate, outdated, and large images. This was symptomatic of a larger problem with images at Facebook, which I attempted to fix.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FpV25XrMgVLA5PC2i5u5A%2Fc04104da-3d85-4a89-a3c0-f026e9153193.png?alt=media&token=375cf89e-2ac3-4060-9ca4-a7a5e61b9b51","id":"c04104da-3d85-4a89-a3c0-f026e9153193","width":1280,"height":720,"filename":"02.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FpV25XrMgVLA5PC2i5u5A%2F15593de7-969c-4786-bf1b-5126de50cf6a.png?alt=media&token=040b7995-9798-4e17-bba6-d424a0414824","id":"15593de7-969c-4786-bf1b-5126de50cf6a","width":1280,"height":720,"filename":"04.png","type":"image/png","caption":"","border":false}]}
```

In collaboration with **[Felix Kling](https://www.linkedin.com/in/fkling/)** (engineer), we designed and built **Asset Manager** to deal with icons and images globally. Asset Manager is to this day the *de facto* UI asset service at Facebook, successfully curbing duplication and providing visibility over all images used in FB products.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fo4JOxNsY7FgkJWh1Cgs7CDGrEGk1%2FpV25XrMgVLA5PC2i5u5A%2F29e47c86-cfc9-4e5e-a95d-4ca2b2645d6c.png?alt=media&token=d1e32a1f-6e78-49eb-8293-c78bfc929343","id":"29e47c86-cfc9-4e5e-a95d-4ca2b2645d6c","width":2000,"height":1125,"filename":"For designers, integrating with design tools ensured only production assets were used in mockups, with easy references for engineers. Plugin development by Julius Tarng._.png","type":"image/png","caption":"","border":false}]}
```

For designers, integrating with design tools ensured only production assets were used in mockups, with easy references for engineers. Plugin development by the ever talented **[Julius Tarng](https://tarng.com/)**.

Facebook Interface Guidelines

Hiring Front End Engineers at Integral.xyz