GitHub for Product and Design Collaboration

How GitHub helps us build a transparent and inclusive design culture for our product team

Siddhant Mehta
Jun 20, 2018 · 7 min read
Image for post
Image for post

A few years ago, Microsoft acquired two companies: Acompli (an email application) and Sunrise (a calendar application). We preserved the unique processes and cultural attributes that contributed to building these great products. At the core of it was a powerful use of GitHub.

Microsoft Outlook for Android & iOS have millions of users around the world. With a small design team, it gets really challenging, if not impossible, to track design tasks, provide visibility into current feature progress, and to give everyone on the team an equal opportunity to showcase new ideas. In addition, at any given point, the team is working on multiple features and collaborating with people in various cities. GitHub seamlessly connects people and projects across timezones, and empowers everyone to participate and share their ideas.

Why GitHub works for us

GitHub gives us the flexibility and a robust structure to keep the product teams (design, PM, and engineering) engaged in the design process and focused on meaningful conversations around specific features.

Here‘s why we use it:

  1. Captures a rich history of decisions
  2. Connects people and projects
  3. Inclusive of remote workers and different personalities
  4. Creates room for ownership and innovation

1. Provides a robust structure for organizing work

Image for post
Image for post
How issues are organized by repositories

Every design issue has a few core elements:

  • A design brief and scope defined in collaboration with PMs and engineers.
  • A feature crew made up of a lead designer, researcher, engineer(s) and a PM. Adding assignees on GitHub clearly shows who owns this feature.
  • A lead designer who shares tons of visuals such as wireframes and high-fidelity mockups, static prototypes, findings from user studies and even uploads explorations of motion design.
  • Labels like App Polish, Define, Ready-for-dev, Review, Marketing, Email, Calendar and so on. This makes it super easy to look for relevent issues that are currently being worked on.

Adding these details gives the team an ability to elegantly sort and filter features that each person is working on at any time. It helps give a big picture view of the current issues being worked on.

2. Captures a rich history of decisions

We create new design issues based on the features we are building each quarter, and GitHub acts as the main communication hub for everyone in the process.

  • A design brief: To kick-start issues, we put together a design brief in collaboration with the full feature crew. We clearly define the problem statements, user scenarios, hypothesis, user feedback, competitive analysis, data and learnings from research studies for reference.
  • Visuals, not words: Images are worth a thousand words, and prototypes are worth many more. Our design issues are rich in visuals, filled with wireframes, low-fidelity designs, interactive prototypes, high-fidelity and motion designs that the team can experience on their mobile devices. This helps us glance through issues and get the gist of it in minutes.
  • A highly iterative process: Every feature goes through numerous iterations, rigorous testing and research studies before shipping. We test our features in product well before the designs are ready to ship. We also test our prototypes with users online and meet users in-person to get feedback on specific features. This helps us gather valuable qualitative and quantitative data to iterate on.
  • The shipping process: Shipping a feature is just the beginning of the journey. Features are shipped in phases to various segments of audiences, internally and externally. Scorecards and metrics help us track the impact of a feature on the user behaviour. We live the product we build before we ship it to our end users. Then we ship it, and learn how to make it even better.

Each design issue on GitHub shows a rich history of decisions by the team, and provides meaningful context for any given feature.

Image for post
Image for post
Lifecycle of a GitHub issue

3. Connects people and projects

When anyone comments or uploads files to an issue, GitHub will automatically notify those assigned to the feature or tagged in the post. This level of transparency and automation allows the whole team to focus on creative problem solving while maintaining one source of truth.

As visualized above, the issues act as an open platform for all disciplines to participate. Engineers, PMs, research, marketing and support can share their thoughts as we build features.

If someone asks for details on a particular feature, it’s as easy as sending a link to the issue where they will see the whole story — from design to PM to engineering. New designers on the team can familiarize themselves with ongoing feature work within days of joining Microsoft.

Image for post
Image for post
With each update, everyone mentioned or assigned to the issue gets notified via email

4. Inclusive of remote workers and personalities

As a remote worker, there are moments when the live design reviews are not enough time to share my ideas. Often, I need some time and space to form my thoughts, or articulate them in a written format. GitHub gives me an opportunity to participate comfortably, providing an equal opportunity to everyone. Similarly, each person on the team has the opportunity to leave feedback on any issue they like, whenever they’d like.

5. Creates room for ownership and innovation

Each of us also lead special issues such as UI kits, color palettes, accessibility, localization, copywriting, onboarding new employees, and so on.

Image for post
Image for post

Thank you, GitHub! ❤️

GitHub gives a voice to every person on the team, no matter who they are, where they live, how they work or which role they are in. Everyone on the team has a say in the products we build. It challenges us to build a product people love.

Do you use GitHub for product and design collaboration too? We would love to hear your story.

More on Microsoft Design

Follow Microsoft Design on Dribbble, Twitter, and Medium.

This article was co-written by Siddhant Mehta, Miles Fitzgerald, Charles Riccardi, Michael Palermiti, Tali Roth and Claire Anderson. It could not have happened without the help of all our Outlook teammates. ✌️

To stay in-the-know with Microsoft Design, follow us on Dribbble, Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft

Thanks to Miles Fitzgerald, Dominic Davies, Claire Anderson, Joline Tang, Michael Palermiti, and Tali Roth

Siddhant Mehta

Written by

Product Designer @ Microsoft. Previously at Google, DreamWorks Animation. Views are my own. Website: siddhant.ca

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Siddhant Mehta

Written by

Product Designer @ Microsoft. Previously at Google, DreamWorks Animation. Views are my own. Website: siddhant.ca

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store