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.
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