UI/Visual Designer
home-ppt.jpg

PPT Animations for Mobile

Enabling customers to view PowerPoint animations and transitions in Highspot.

Hand holding mobile phone
 

My role in this project included UX and UI/Visual Design as well as conducting user research interviews to gather feedback.

Tools Used: Miro, Sketch, InVision

UI/Visual Design, UX Design, UX Research

 
 

Project Summary


 
 

Overview

Content creators spend time building beautiful presentations for a reason—they want their content to tell a story and they use PowerPoint animations and transitions to help. With the new ability to view this rich content in Highspot, our old mobile presentation viewer needed to be updated to allow users to navigate through the presentation and see those transitions instead of scrolling through a vertical layout of the pages.

 
 
 

Customer Problems

  • Sales reps want to draw prospective customers in with engaging content, and ensure they remember specific points and are drawn to the story that is being told

  • Customers want to consume PowerPoints at their full fidelity for maximum content consumption impact

 
 
 

Goals

We strove to ensure that PowerPoint animations and transitions are displayed to employees when viewing content in Highspot, and customers when viewing pitches. My goals for the new mobile experience included:

  • Changing the experience from a long-scroll reading experience to a single slide at a time view, allowing transitions to be shown

  • Providing mobile users better touch controls for showing and hiding page navigation controls

  • Creating a way for users to see page thumbnails and navigate to specific slides without having to scroll through the entire presentation

 
 

Process


 

Competitive Analysis

With so many rich content creation and consumption tools on the market, I started by researching competitors and other media apps to gather common patterns for viewing and presenting documents. This helped me identify a few possible directions to test with customers to determine the most intuitive gestures and page navigation controls.

 
 
 
 

Wireframes

After using the comparison apps myself, I identified four possible directions for navigation and made wireframes of each solution. I reviewed the wireframes with the rest of the design team to gather initial feedback and narrowed the options down to the two strongest:

  • Keeping the current long-scrolling view without animations as the default and creating a new “present” mode that users launch to view the rich version of the presentation and hide the page header and footer

  • Showing the animations at all times and using a tap control to show and hide the page header and footer

 
 
 
 

Customer Interviews

Along with my PM, I interviewed a few customers who had requested this feature to get feedback on how they currently navigate presentations in Highspot and to test the two directions I mocked up with wireframes. This led to a couple of key findings:

  • No one we interviewed ever used full page mode in the current viewer and did not want a “present” mode

  • All users expected the animations to be visible at all times

 
 
 

Solution Flows

The leadership and dev teams decided that instead of building the functionality to view animations from scratch, we would utilize a vendor to help. To aid in this decision and illustrate the two UX directions outlined above, I created a couple of flow charts.

 
 

Option 1 to add a new “present” mode

 

Option 2 to show all animations by default

 

The Solution


 

Improved navigation and touch controls for presentations

 

This final direction improved the existing presentation viewing and navigation experience in a few key ways:

  • Improving navigation of large presentations by adding in a thumbnail drawer. Instead of having to scroll to a particular page, users can now open the thumbnails and jump to a slide

  • More intuitive touch controls for showing an hiding navigation UI. With this new design, users can tap the screen to show and hide the header and footer, a familiar experience for mobile

  • By adding in the ability to hide the header and footer UI, users can focus on the content