• Design
  • About me
kt
  • Design
  • About me

Messenger camera

Goal

Build a scalable social camera on Messenger that enables people to express themselves via content sent to thread or to stories.

Problem

Phase 1:

The inherited problem with the messenger camera revolves around the clarity / placement of tools and a system that doesn’t scale well with new tools being added in.

Scalability - Messenger camera started out with limited and simple editing tools. However, as the amount of features and tools grew, we needed a better IA that could grow with the tools that we are introducing.

Phase 2:

Alignment with FB product suite - After the first design and interaction study, we shifted into making sure that the camera was aligned with how people expected to use other social cameras within the FB family of apps. Since Instagram’s camera was what people were used to most for content posting and story creation; we aligned parts of the camera to bring back a sense of familiarity between the suite of apps.

Camera capture clean up - We realized that the second iteration of camera wasn’t giving the new camera modes the highlight and room it needed to perform. This was due to the controls and mask effects competing for attention, so we began by cleaning up the view on the initial capture screen through hiding the masks under a button / tap.

Results

Phase 1 testing -

image editing from thread view went up 3.2%

Post capture AR mask usage up 2%

Phase 2 solution -

Finished camera redesign alignment with other FB social cameras ie: IG

End to end camera flow that incorporates iOS system components when possible to reduce the use of custom components and app size. The new camera design is now integrated into the larger Messenger Lightspeed rewrite to improve performance and reduce app size overall.

Process

- IA audit

- Interaction study

- cross product alignment

- usability study

Camera IA audit
old messenger camera.png
initial wireframes postcap tools.png
port 1.jpg
Artboard.jpg
Artboard Copy.jpg
Artboard Copy 2.jpg