I designed and built GitHub's original mobile views with an engineer in our Rails app.

* 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.

No one was thinking about mobile at the time so we had to convince people it was worth spending time on. We built the first prototype in our Rails app, made a GIF with the iPhone simulator (you can see it at the end of this post), and opened a pull request to get people excited.

By the time we released the project publicly we had built most of the views and nearly everyone on the team was using them daily.

```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'd already run into an Internet Explorer limit on the size of our CSS files).

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 become a team dedicated to mobile. GitHub was still small and teams owned features end to end, 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}]}
```

And, the original GIF:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2F6ZXpEw6bFWLQqyieSjhJ%2Fb21b6569-742f-4a8a-a03e-ce54c48b4a7b.gif?alt=media&token=9cc08ed0-221a-4f49-bd67-3d2f97fbecbc","id":"b21b6569-742f-4a8a-a03e-ce54c48b4a7b","width":411,"height":800,"filename":"CleanShot 2024-07-14 at 13.54.45.gif","type":"image/gif","caption":"","border":false}]}
```

GitHub Mobile (2013)

At Facebook I led the Design Infrastructure team. We built internal design tools and infrastructure that 8 hours per week per designer.

A few examples of the work we were doing:

* Plugins (hacked together with AppleScript and JavaScript) to push Facebook Design System updates to every designer in Sketch and Origami Studio.

* Built an internal collaboration tool called Pixelcloud that allowed designers to share, discuss, review, and hand off work to engineering.

* 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 the team of 7 designers, working with engineering and other cross functional partners, working with other product teams to understand what they needed from our team, and defining the roadmap and strategy for the team.

### Sketch plugins

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

Our team built tools around the idea that designers needed real components, real data, and real layout—the same primitives engineers have when building out UI.

**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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FSd3TNejUMgaQ74m1woEulRghZlj2%2FNirugSy2Jx6ZGDVSKaLd%2F49e31c05-e381-472f-998d-9022e6fb0908.png?alt=media&token=1cbbc142-b145-4909-b177-8cc874c77bf1","id":"49e31c05-e381-472f-998d-9022e6fb0908","width":2680,"height":1676,"filename":"origami.png","type":"image/png","caption":"","border":false}]}
```

Origami is based on Quartz Composer and was built at Facebook. The major change during my time was moving from pure patch-based workflows to adding the tools and UI that designers are used to in software like Sketch, Figma, and Adobe's suite of tools.

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.

Projects

Notifications

Protected Branches