Project One: Custom Push Device Notifications
In early 2020, Instagram’s push notifications—the notifications you got on your phone when there’s activity on your Instagram account—were set to the default iOS/Android settings. They weren’t distinguishable from all the other app notifs, and there was very little interactivity. We had an opportunity to really customize them and bring them up to Instagram standards.
I started by documenting the device notifications, studying the latest iOS and Android push notification functionality, and listed down what we wanted in the new designs: the full-color icon, a headline, text and media previews, the classic Instagram actions, etc.
With the specs mostly in place, I created two sets of components, one for each device OS, and each with variants for different display types. These in turn went through several iterations and reviews as we worked out what to prioritize. The challenge here was to narrow down one or two optimal experiences for each type while keeping them aligned with our preferred outcomes.
Instagram has a lot of different notification types that needed to translate into push notifs. For the initial launch we started with about nine of the most common ones. I created flows for each type, one for Android and another for iOS, and also included alternate flows for ideas that I thought would be interesting to explore.
Above are the flows for how the three new notif buttons could direct link to the familiar app actions.
Above are the possible flows for silent notifs. This showed how we could allow for with Instagram interactions without opening the app.
For in-depth, real-life feedback, I used the above interactive prototypes to show a few flows for push and silent notifications. This was integral in getting our team and stakeholders to align on our initial roll out.
The new designs tested very positively, and began rolling out in the latter half of 2020.
Project Two: Activity Catch-Up (Resurrected User Experience)
One of the user types we focused on in the Growth team were resurrected users—people who used Instagram previously, took a break, and then returned after a time.
This project was during an interesting time in Instagram history: Instagram Shopping and Reels (its short-form video feature) were slowly being tested and rolled out, which meant that I’d have to work with a main navigation that was in flux.
First, we reviewed the current experience (shown above). Despite its simplicity, users were not engaging as much with the Activity (heart icon) tab, and tended to move to another part of Instagram before the animation could even finish.
After working on a few different solutions, we decided that on Instagram, tooltips were still the most streamlined and intuitive way to dispense information on new activity—we just needed to improve them on multiple fronts.
I mocked flows for each activity type for the current Instagram architecture and the upcoming one (which, among other things, rearranged the icons on the main Instagram surface and sent the activity icon to the profile page).
The process was long and required consistent and thorough check-ins with different teams, reviews by the design systems team, and animation speccing.
Displaying the flow for the DM and Activity tooltips on the old Instagram framework.
The flow on the new Instagram framework with Activity now folded into Profile to make room for Shopping and Reels.
This project took about three months from concept to roll out. The above prototype on the left was the default RUX; after Instagram Shopping and Reels were officially launched to most of North America and the world, the Activity tab folded into Profile, and users saw the flow on the right.