Overview
As a product design intern on the MDS team, I updated the Bottom Sheet system to create framework requirements that ensure cohesiveness and clarity across the org.
I also participated in design critiques to collaborate on system-wide decisions and office hours to answer anything Bottom Sheet related.
Problem
Historically, Bottom Sheets were one of the most used components, as well as one of the most commonly asked about in support requests and office hours.
Lack of documentation contributed to confusion, inconsistent usage for product teams and designers, and a need for the MDS team to respond to questions on a case-by-case basis. Shortly into the project, I also discovered a major overlap in how we used the Bottom Sheet and Modal Component.
Research
I studied Human Interface and Material Design in-and-out, conversed with designers from Instagram and Facebook's Design Systems teams, consulted engineers, researched competitors, and conducted an audit on all things Bottom Sheets in Messenger. Some key findings from the audit– inconsistency and absence of documentation in design specs, close affordances, interactions, platform differences, best practices, and more.
To convince my team, I presented findings from my audit, such as the wide variety of sheet heights in use, some documented and some not.
My Role
With the intent of alleviating support requests to my team, providing clarity to other stakeholders (e.g. design, product, engineering), and tightening up overall usage across the platform, I defined key principles, visual guidelines, and best practices.I created a comprehensive written documentation and Figma library, including guidance for 20+ interactions and 70+ framework patterns for iOS and Android. Eventually, I was able to see it in living use, referenced by myself and my team members as a single source of truth to help answer questions to other designers seeking to use Bottom Sheets.
Provided interaction guidance (e.g. Resizing- the entire surface area can be dragged or top grabber can be tapped to instantly resize.
Bottom Sheets can also be dragged and snapped back into place, think window blinds, to take brief glimpses at the parent view.
Takeaways
Through my internship on the team, I learned to value balancing structure and flexibility– providing enough guidance for cohesion and order but also leaving space for innovation. I also grew a stronger appreciation for maintenance of strong design systems as product experiences scale.
Moving forward, I'd seek to monitor subsequent support requests and conduct another audit to measure the success of the updated documentation, in projects files and in-app. I'm also curious about further pursuing the relationship between the Bottom Sheet and Modal component. Inspired by lite apps, I briefly floated the idea of deprecating the Modal component, because of the constant and confusing overlap, in hopes of decreasing the memory and data haul of Messenger.
Full deck found here!%201.png)
.png)
