I built GitHub's original mobile views. The team was myself and 1 engineer.

* We built quick, simple prototypes in code to get feedback from everyone at the company via pull requests.

* When something resonated, we would merge it, enabling it only for internal use, and continue to get feedback and iterate.

* We ended up shipping the first version of GitHub for mobile devices in about 6 weeks.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2F6ZXpEw6bFWLQqyieSjhJ%2Fa2b8a9e5-1301-4499-9051-d57a1b1ae9d2.png?alt=media&token=a8d2241d-d5e7-4483-98b8-ba57018cb514","id":"a2b8a9e5-1301-4499-9051-d57a1b1ae9d2","width":2378,"height":1354,"filename":"CleanShot 2023-01-18 at 13.39.12@2x.png","type":"image/png","caption":"","border":false}]}
```

At the time GitHub was a large, web-only Rails application and we had to figure out a way to dramatically reduce page size and avoid adding a significant amount of new CSS to the code base.

We ended up building separate web views rather than doing responsive views to avoid re-architecting existing CSS and sending huge page sizes over 3G mobile connections.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2F6ZXpEw6bFWLQqyieSjhJ%2F5bbd8efd-291c-4584-a558-5c7c745fba4b.png?alt=media&token=84781bd5-2228-4b18-8821-cdacccaf2f0c","id":"5bbd8efd-291c-4584-a558-5c7c745fba4b","width":2136,"height":1096,"filename":"CleanShot 2023-01-18 at 13.41.30@2x.png","type":"image/png","caption":"","border":false}]}
```

We didn't plan to invest a mobile team at the time, as GitHub was still small, so we built out a style guide and simple design system that allowed anyone to turn their feature into something that worked on mobile:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2F6ZXpEw6bFWLQqyieSjhJ%2Feb1e2eb4-09e2-4fed-a4ca-4449f8a2bf7e.png?alt=media&token=6afba455-8cb1-4f87-828b-dbe422e89a29","id":"eb1e2eb4-09e2-4fed-a4ca-4449f8a2bf7e","width":2108,"height":1316,"filename":"CleanShot 2023-01-18 at 13.42.01@2x.png","type":"image/png","caption":"","border":false}]}
```

GitHub Mobile (2013)

At Facebook I led the Design Infrastructure team. We built internal design tools that 8 hours per week per design of design time: 

* Made the Facebook Design System accessible to every design in Sketch and Origami Studio

* Built an internal collaboration platform called Pixelcloud that facilitated discussion, design review, and automated redlines for final design proposals

* Extended Sketch and Origami Studio with Auto Layout (before Figma!) using the same open source layout engine that engineering teams used in code.

As a design manager my role was supporting a team of 7 designers, providing feedback to designers, helping them progress in their careers, coordinating with engineering and other cross functional partners, as well as helping define the vision, strategy, half plans for the team.

### Sketch plugins

One of the highest leverage areas for the team was adding functionality to Sketch that improved designers' workflows.

**UI Kit**

UI Kit was a tool built for Sketch that distributed Facebook's component library to every designer across the company, allowing the Design Systems team to push updates out to designers weekly as components changed.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FNirugSy2Jx6ZGDVSKaLd%2F0db3ccfc-2972-4ff2-b64a-43cc60d8bbe9.png?alt=media&token=b9b40eaf-7670-4270-91a3-62b89a1f3db8","id":"0db3ccfc-2972-4ff2-b64a-43cc60d8bbe9","width":1920,"height":1080,"filename":"tools-3.png","type":"image/png","caption":"","border":false}]}
```

**LayoutKit**

LayoutKit was built to add real layout controls to Sketch enabling designers to built complex layouts and use the same rules and terminology that engineers would use when building UI for web, iOS, and Android platforms.

LayoutKit was built with [Yoga](https://yogalayout.com/), Facebook's open source layout engine.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FNirugSy2Jx6ZGDVSKaLd%2Fccbf3990-1484-4b79-84b2-cdded46cd734.png?alt=media&token=d4d55085-fe10-40ab-a051-cb76f0b0a88a","id":"ccbf3990-1484-4b79-84b2-cdded46cd734","width":1920,"height":1080,"filename":"tools-5.png","type":"image/png","caption":"","border":false}]}
```

### Pixelcloud

Pixelcloud is Facebook's internal design collaboration tool. It integrated closely with Sketch, allowing designers to push their designs to the web directly for Sketch for sharing and to get feedback from across the company.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FNirugSy2Jx6ZGDVSKaLd%2F7a7c7d20-75ca-42cb-bc59-65fc19cfde6e.png?alt=media&token=fe13f304-12ff-4df8-a462-661da3f0c564","id":"7a7c7d20-75ca-42cb-bc59-65fc19cfde6e","width":1920,"height":1080,"filename":"layoutkit.png","type":"image/png","caption":"","border":false}]}
```

### Origami Studio

Our team was responsible for Origami Studio, used at Facebook and by companies like Apple to prototype iOS and MacOS applications.

Facebook

### Notifications

One of my last projects at GitHub was prototyping a new notifications system.

The vision of the project was to become the central hub for a developers work — integrating with all the different tools they used in their day to day job building software:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FkwYNECenlaWTvjMqkUqf%2F11650d73-7d75-4de5-acb9-fce99a79099a.png?alt=media&token=060a568d-7736-4aed-b46c-6a61f3926b64","id":"11650d73-7d75-4de5-acb9-fce99a79099a","width":1988,"height":1326,"filename":"CleanShot 2023-01-18 at 13.52.15@2x.png","type":"image/png","caption":"","border":false}]}
```

We also wanted to turn GitHub's notifications into a more powerful tool, the existing page had grown outdated and difficult to manage — it was impossible to use it the way we use modern email or todo list software.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FkwYNECenlaWTvjMqkUqf%2F1bbef3b5-6008-4d83-b42e-1d1435954b3c.png?alt=media&token=6cad8131-c2ae-45dc-90f2-d59743a321d3","id":"1bbef3b5-6008-4d83-b42e-1d1435954b3c","width":2144,"height":1356,"filename":"CleanShot 2023-01-18 at 13.53.05@2x.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%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FkwYNECenlaWTvjMqkUqf%2Ff1a5fc44-5597-48f8-8179-7ed15628b1d8.png?alt=media&token=cb879a29-ede4-4f03-b39b-8c23a811303b","id":"f1a5fc44-5597-48f8-8179-7ed15628b1d8","width":1890,"height":1318,"filename":"CleanShot 2023-01-18 at 13.54.06@2x.png","type":"image/png","caption":"","border":false}]}
```

* We built prototypes and had a small group of internal opt-in beta testers.

* We were able to get buy-in from leadership to figure out how ot improve notifications with these sketches and early prototypes.

* We ran into issues with performance on both frontend and backend. GitHub was still mostly avoiding real-time updates to UI. The backend for Notifications wasn't architected to be available on every page all of the time.

### Protected Branches

As GitHub expanded to larger customers we were losing large deals because we didn't have tools that enterprise customers needed to satisfy regulatory and compliance requirements.

For example:

* The ability to require certain tests to pass before code was merged.

* Determining whether code review was required or not.

* An audit trail of who modified, reviewed, or merged code.

As the Director of Product I managed the team that prototyped, researched, and built the first version of Protected Branches.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FkwYNECenlaWTvjMqkUqf%2Fc56031de-0f91-48e8-a456-60a8919e4193.png?alt=media&token=5e4ac472-d5ac-4247-82e6-4b8de9b775e3","id":"c56031de-0f91-48e8-a456-60a8919e4193","width":1216,"height":614,"filename":"CleanShot 2023-01-18 at 13.45.09@2x.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%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FkwYNECenlaWTvjMqkUqf%2Fb6710712-b2e9-4cf2-be0b-3ffdea00f696.png?alt=media&token=7c3eadbd-29b1-42f3-aaab-da5c1e1b7307","id":"b6710712-b2e9-4cf2-be0b-3ffdea00f696","width":1432,"height":826,"filename":"CleanShot 2023-01-18 at 13.45.22@2x.png","type":"image/png","caption":"","border":false}]}
```

Our goal was to enable people to use the GitHub pull request workflow, but provide control to administrators to set rules on when things could merge.

We did multiple prototypes and research with beta customers before shipping the first version, working hard to build something that didn't frustrate developers but enabled administrators to satisfy regulatory and compliance requirements.