Designer
Prototyper
Stories Creation
2017 — 2018
I joined Instagram soon after Stories had shipped and was proving to be a huge success. I was able to work with an amazing team of designers and engineers in a wonderful supportive environment where everyone was trusted to do great work. I'm still sad that they moved back to San Francisco.
Designer
Prototyper
Stories Creation
2017 — 2018
I joined Instagram soon after Stories had shipped and was proving to be a huge success. I was able to work with an amazing team of designers and engineers in a wonderful supportive environment where everyone was trusted to do great work. I'm still sad that they moved back to San Francisco.
Stories Camera
With the addition of numerous creative effects, content formats, and capture modes the camera had become overwhelming and inconsistent. To address these shortcomings I conceived of a full redesign with a novel gestural interface that I created along with a full working prototype. I also worked with partners to get stakeholder buy-in to start the project. This concept was shown at Facebook F8
Stories Camera
With the addition of numerous creative effects, content formats, and capture modes the camera had become overwhelming and inconsistent. To address these shortcomings I conceived of a full redesign with a novel gestural interface that I created along with a full working prototype. I also worked with partners to get stakeholder buy-in to start the project. This concept was shown at Facebook F8
Images Movement
Images Movement
Text Animation
Text Animation
Camera Roll Import
The process of importing media using the OS provided controls was inefficient and had a very small preview of the content. I designed a new import screen with large previews that is a quick swipe away from the camera. To make it easier to quickly post multiple times, I also added a way to select additional items and edit the posts without having to start the posting flow from the beginning for each post.
Camera Roll Import
The process of importing media using the OS provided controls was inefficient and had a very small preview of the content. I designed a new import screen with large previews that is a quick swipe away from the camera. To make it easier to quickly post multiple times, I also added a way to select additional items and edit the posts without having to start the posting flow from the beginning for each post.
Images Movement
Images Movement
Text Animation
Text Animation
Landscape Media
At first Stories only supported portrait media and landscape content was center cropped leaving people out of the image. Creators were also limited in the composition of the post since the media took up the full frame. To address these limitations I scaled landscape content to fit the frame and allowed all media to be repositioned and scaled with gestures anywhere on the canvas. The exposed background was created with a simple gradient from the dominant colors at the top and bottom edges of the image.
Landscape Media
At first Stories only supported portrait media and landscape content was center cropped leaving people out of the image. Creators were also limited in the composition of the post since the media took up the full frame. To address these limitations I scaled landscape content to fit the frame and allowed all media to be repositioned and scaled with gestures anywhere on the canvas. The exposed background was created with a simple gradient from the dominant colors at the top and bottom edges of the image.
Landscape Media
At first Stories only supported portrait media and landscape content was center cropped leaving people out of the image. Creators were also limited in the composition of the post since the media took up the full frame. To address these limitations I scaled landscape content to fit the frame and allowed all media to be repositioned and scaled with gestures anywhere on the canvas. The exposed background was created with a simple gradient from the dominant colors at the top and bottom edges of the image.
Images Movement
Images Movement
Text Animation
Text Animation
AR Face Filters
The first camera effects added to the Stories Camera were a set of Face Filters that added virtual 3D elements like glasses, animal ears, and flower crowns. Each of these filters responded to tilting your head or triggering animations when you opened your mouth. Along with another designer I assembled, animated, and coded the first set of these filters.
AR Face Filters
The first camera effects added to the Stories Camera were a set of Face Filters that added virtual 3D elements like glasses, animal ears, and flower crowns. Each of these filters responded to tilting your head or triggering animations when you opened your mouth. Along with another designer I assembled, animated, and coded the first set of these filters.
Images Movement
Images Movement
Text Animation
Text Animation
iPhone X Support
I led the design effort to adapt the app to support the tall aspect ratio and safe areas of the newly announced iPhone X. A particular challenge was how to adapt the Stories creation and viewing experiences that previously expected all content to be 9:16 and presented fullscreen to create an immersive experience. At each screen of the creation and viewing experience I designed how we should break the individual constraints to take advantage of the new hardware.
iPhone X Support
I led the design effort to adapt the app to support the tall aspect ratio and safe areas of the newly announced iPhone X. A particular challenge was how to adapt the Stories creation and viewing experiences that previously expected all content to be 9:16 and presented fullscreen to create an immersive experience. At each screen of the creation and viewing experience I designed how we should break the individual constraints to take advantage of the new hardware.
Images Movement
Images Movement
Text Animation
Text Animation
Send to Sketch
Soon after joining Instagram I noticed that Facebook had developed a document format and plugins that allowed for moving design elements between Sketch and Origami. I added code to internal builds of Instagram that iterated the entire layer tree and encoded the values to this document format allowing any designer or engineer to easily get a layered and editable snapshot of the actual app in Sketch.
Send to Sketch
Soon after joining Instagram I noticed that Facebook had developed a document format and plugins that allowed for moving design elements between Sketch and Origami. I added code to internal builds of Instagram that iterated the entire layer tree and encoded the values to this document format allowing any designer or engineer to easily get a layered and editable snapshot of the actual app in Sketch.
Send to Sketch
Soon after joining Instagram I noticed that Facebook had developed a document format and plugins that allowed for moving design elements between Sketch and Origami. I added code to internal builds of Instagram that iterated the entire layer tree and encoded the values to this document format allowing any designer or engineer to easily get a layered and editable snapshot of the actual app in Sketch.
Images Movement
Images Movement
Images Movement
Text Animation
Text Animation
Text Animation