GitHub for Product and Design Collaboration
How GitHub helps us build a transparent and inclusive design culture for our product team
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 is well established as an engineer’s dream platform for collaborating on development with a community of 28 million* people around the world. By repurposing these engineering workflows, GitHub can be used as a primary place for collaboration between all disciplines, including product managers (PMs), engineers, marketing, design, and research and support.
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:
- Provides a robust structure for organizing work
- Captures a rich history of decisions
- Connects people and projects
- Inclusive of remote workers and different personalities
- Creates room for ownership and innovation
1. Provides a robust structure for organizing work
Every quarter, the Outlook Mobile team targets several new features and experiences, polishes old ones or improves existing experiences within the app. For each of these planned design tasks, we create a new “design issue.” All these issues are bucketed under our iOS or Android repository on GitHub.
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 document everything on GitHub. Think of it as creating a digital diary of your design process. From kick-starting design issues, shipping to our users and following up with success metrics, most design issues have a consistent and a highly iterative workflow.
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.
3. Connects people and projects
The Outlook Mobile team is located in multiple cities, in various timezones around the world. GitHub is essential for us to stay connected and up to date on 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.
4. Inclusive of remote workers and personalities
We all have different working styles. GitHub accommodates these working styles and complements our tools today, by providing an open platform for people to participate.
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 tend to notice the little details that don’t feel right, catch awkward motion between screens, or user flows with unnecessary taps. By creating specific design issues on GitHub, the team documents creative problems big and small. At the end of each quarter, these app polish issues are evaluated and prioritized. The creator of these issues often takes ownership and sees these until the end.
Each of us also lead special issues such as UI kits, color palettes, accessibility, localization, copywriting, onboarding new employees, and so on.
Thank you, GitHub! ❤️
GitHub has significantly improved productivity and efficiency for all of us. We’re seeing a number of teams around Microsoft use this process, including our colleagues designing the Outlook for Mac application.
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
If you are interested in reading more about Outlook’s design process, check out this article by Miles Fitzgerald. We are growing our team and looking for talented designers and product managers to join us. If this story resonates with you, check out our positions here.
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.
