Facebook Stories was always experimenting with new editing tools. However, we were running out of real estate to display an increased inventory.
I was tasked with creating an interaction model that could elegantly display a broader set of editing tools.
Not only did our team exceeded our metric goals by 4X, but we tested and shipped scalable expanding list functionality that is still being used over two years later...which is a LONG time in FB terms!
When we started the project, I began by creating some quick abstracted prototypes. I loaded these quick concepts onto a test device so various members of our design team could FEEL the experience rather than only viewing it on a conference room display.
This prototype approach helped convey the importance of nailing certain UX subtleties like ergonomic zones for the thumb, intuitive positioning, and animation nuances for expanding, collapsing, and/or scrolling.
Early concept for how we might group certain types of tools together.
Early concept to estimate how expanding and scrolling could feel.
Once we’d agreed on general directions to test (expandable list & grouping), I set off to create higher-fidelity concepts for us to bring back to design and eng review. It’s always helpful to circle up as a team and have regular check-ins so we can align on next steps and most efficiently use our time.
I led a brainstorm with four designers and three engineers to nail down some details we wanted to bring to life and headed back to work my magic. Most times I started with static designs in Figma and then animated a set of key interactions in Principle.
All of these concepts were left on the cutting room floor because they either didn’t test well in user holdouts, or because they were deemed too expensive to build and/or maintain.
A fixed height concept we called “Rolodex”. It didn’t test well for comprehension and resulted in high cognitive load.
A demo for how to indicate an active editing tool. Colored rectangles show logic for placement based on the tool’s position in the expanded list view.
A robust grouping concept – deemed too ambitious due to high engineering cost, which made me sadly agree to cut from our list of test candidates.
I learned a lot about how to navigate design decisions from this project. At the time (2019 & '20), Facebook Stories was a major area of investment for the company so shipping new designs was highly pressurized and required a mountain of evidence supporting the decision.
I also learned the importance of visual communication when it comes to convincing leads to make a large investment. Our product leads were anxious about shipping extreme design changes all at once, and leaned heavily on quantitative metrics rather than taking a design-led approach. I found this frustrating and still believe Facebook should take more risks to avoid falling behind in the social media formats race.
Lastly, I gained valuable experience leading a team during this project. I organized check-ins and facilitated discussions, solicited feedback from a variety of stakeholders, and focused on building foundational relationships that led to future cross-team endeavors.
I think this was the turning point at which I became interested in Design Management.
