dtorr.work
Flipgrid_Camera.jpg

Flip Camera

Microsoft’s ed-tech product, Flip, empowers student voices by providing them with a video-based platform to discuss topics from the classroom. As my first project with Microsoft, I led design for the updated user interface of the Flip camera across mobile and tablet (for both iOS and Android) and web browsers. The engineers and I focused on making it easier for students and educators to interact with new features while also simplifying the recording process.

 

Flip Camera

Microsoft’s ed-tech product, Flip, empowers student voices by providing them with a video-based platform to discuss topics from the classroom. As my first project with Microsoft, I led design for the updated user interface of the Flip camera across mobile and tablet (for both iOS and Android) and web browsers. The engineers, PM, and I focused on making it easier for students and educators to interact with new features while also simplifying the recording process.

Role Timeline
Senior Designer 3 months

Flipgrid Camera on web and mobile

Background

In redesigning the Flip camera, our goal was to enhance the user interface and ensure our camera could be integrated into other Microsoft products. The previous web camera interface is displayed in the video below:

Previous camera UI on web

Users

Students and educators were our main focus when improving Flip’s camera recording experience. Here’s what we understand from our core users, and how the Flip camera can help them succeed:

Students
Technology is providing students with many innovative ways to learn. It is important for students to be engaged in their learning in order to maximize their education. The Flip camera allows students — ranging from kindergarten to higher ed — to:

  • Share their ideas, stories, and work via video response to an educator’s topic

  • Respond to other student responses

Educators
With the growing integration of technology into the classroom, educators are rethinking how they can teach most effectively. This includes leveraging new tools that can help them engage with their students and streamline their lesson plans. The Flip camera allows educators to:

  • Start the conversation by creating videos to share with students and their families

  • Provide video feedback to student responses

With our users in mind, the improved Flip camera has the ability to enhance learning and teaching for our students and educators.

User journey for educators and students

Inspiration

After reviewing many different social media cameras, I was most inspired by those of TikTok and Instagram for the Flip camera redesign. Here’s why:

TikTok
TikTok provides users with an endless amount of editing options and effects which empowers users to make creative videos. It has also simplified the recording process to make it easy to create and share videos. This works especially well for their younger audience, who are shaping the way we view and share content through social media.

Instagram
Instagram has set the standard for other social media networks, such as TikTok, to encourage users to create and share publicly. When using Instagram Stories, users can curate quick stories to share with their followers for a short duration of time.

Although Flip is not a social media product, we can apply the same principles used by those platforms to improve our user engagement. Similarly to social media, when incorporating a camera into social learning it is crucial that we make the recording process fun, simple, and exciting for all.

Inspiration - Snapchat, Thriller, TikTok, VSCO, and Instagram Stories

Process

Given that Flip users can vary dramatically in their experience and proficiency with technology, simplifying the Flip camera was a major focus for our team. Partnering with a PM, I was able to determine the ideal user flow that would simplify the recording process on web, tablet, and mobile. After creating 111 high-fidelity screens, I reviewed my designs with the accessibility team to ensure usability for all users. During the handoff, I provided design guidelines and a walk-through of the user flow to the engineers. I worked in continuous partnership with them up until the release of the camera to ensure technical feasibility and to make any necessary revisions based on the evolution of the camera.

Process of sketching camera flow

Final Design

In January 2020, after succeeding in implementing numerous updates, our team officially released the camera redesign. We focused on allowing users to add effects (e.g. custom stickers) more easily, toggle audio on/off when recording, and revise their recordings prior to uploading them.

View the Flip web and mobile demos below:

Web Camera

Mobile Camera

Community Impact

Although metrics are still being analyzed, user reactions to the updated Flip camera have been very positive. The feedback we receive through social media is very important to us, as community is a key component to Flip’s success. Listed below is a sample of inspiring responses we received after announcing our updates:


Team

UI/UX - Danielle Torres
PM - Chloe Bouxsein
Accessibility - Liz Maddy
Engineers - Paul Conlin, Nate Clay, Graham Earley, Joe Barrett, Nathan Guggenberg