Introducing the Mattermost Product Design Spotlight
A few months ago, I moved into the lead role on the product design team at Mattermost. Since I stepped in, one of the things I’ve been hoping to do is give more visibility to our organization’s product design team and the great work they do. That desire brings us here: The Product Design Spotlight.
In addition to showing off the team’s work, I’m selfishly hoping that writing this will help me improve as a communicator and thinker. I’m a mediocre writer at best, so it’s a good excuse to exercise a part of my brain that probably needs to be flexed more often if I’m being totally honest.
Enough of the preamble. Let’s get on with it.
So, what’s this all about?
The team has a few motivations for starting this up, but the primary hope is to create a space to showcase and share the great work that the design team at Mattermost is doing on a regular basis. The intent is to offer this showcase of work to a broader audience — within the company and externally with our community.
We often share and collaborate within our tight-knit design team in our weekly ‘design crit’ sessions, but that’s meant to be a safe space for critique and collaboration. As designers who combat imposter syndrome, we need a safe place like that. On the flip side, as an open-source company, it’s also important for our design team to share more openly and transparently about the things we’re exploring rather than keeping things too closed.
What to expect in future volumes
In future issues, we plan to share design work in all stages of development. Some of it may be more visual in nature, while other work might be more conceptual in nature. In short, here are some of the things you might find in this publication moving forward:
- In-progress feature design mockups
- Video walkthroughs of design solutions
- Conceptual designs for the vision of the product
- Early previews of new features
- Content related to our design system (Compass Design System)
- UX research findings or results
It will likely be an evolving project and we will likely pivot as we go (we need to be agile after all), but we’ll see how it comes together over time.
For now, a peek behind the curtain…into our Figma starter templates
Next issue we will dive into some more project-based work, but in this first introductory volume, I thought I would share something we’ve been working on as a team to help make our team more efficient: Figma starter templates.
Figma is our tool of choice for designing and prototyping the user experience. Over the years, each of our designers has had their own way of starting projects in our workspace. We were noticing quite a few inconsistencies that ended up affecting our team collaboration within the design team and with other parts of the organization. We agreed that we needed to improve that.
So, we set out to establish patterns to help us organize and present our work consistently across the team for a few key reasons:
- To get up and running with a new project “supa-fast”.
- To establish a consistent pattern for how our files are structured and organized so that any designer can jump in on any project and contribute to it.
- To create a familiar experience for those viewing design files so that product managers (PMs) and engineers across the organization know where to look and what to focus on.
The following are some of the main elements of our starter files that will improve our efficiency as a team, and provide us with ways to share and present work consistently and cohesively.
The project cover
We started with a consistent cover template for projects to help us easily find project files within Figma and display them consistently. This also displays when sharing Figma links with our colleagues or stakeholders.
I’m not going to lie, it’s satisfying for my brain when all the files are properly using this cover consistently.
Page structure
Our starter file also helps us follow a consistent page structure so engineers and PMs can more easily get familiar with the file and find what they’re looking for.
Project info
The project info page gives us a place to store a summary of the project and the key questions we need to be answered. It serves as a good baseline to have completed before we can dive in on any wireframes or interface design work.
UI design starting point
We have a starter file for each core part of the platform: Channels, Boards, Playbooks, and Calls. Each starter file has a page for design specifications that provides designers with the most common screens for the product accompanied by placeholders for interaction notes, callouts, and section groupings. Rather than having to build this all from scratch each time, we have prebuilt views that save us a tonne of time getting up and running with the interface design. It also helps us lay out our work very consistently from project to project.
Each of these pre-built screens is made up of components and foundational elements from our design library in Figma—which is part of what we call the ‘Compass Design System’. This is a topic for another installment, but you can learn more about the design system here.
Competitive research, explorations, user flows, and more
There is a lot of other work that goes into the design process and the starter template provides spaces for that as well. We have pages to store screenshots and notes on competitor solutions as well as pages to map out user flows and more explorative design work.
We also have a page for checklists to ensure we’re following key steps of the design process and to help us keep the standard of quality high.
There’s more to unpack with these templates, but any more detail might be a little too much ‘inside baseball’, as they say, for anyone outside of our team. In all, we’ve already found it to be very useful and it has improved our efficiency as a design team. Mission accomplished!
Until next time…
That was just a taste, but I look forward to sharing lots more goodies in future volumes of the Product Design Spotlight. In the next issue, we’ll focus more on the feature work and explorations that the team has been doing recently. I hope you will find this valuable and interesting moving forward.
We’d love to hear your thoughts about this initiative and what you’d like to see in future volumes. Please share feedback with us!
