The Detail View after integrating it with the Analytics page
Prezi Detail View
A details page for presentations, allowing you to share, download and monitor performance.
** The Problem **
People who are regular presenters wanted a way to export and share presentations outside the editor.
** Discovery **
To understand why we set up interviews with regular users and people just starting out. Looked at usage data and mapped the possible entry points for these features. We learned that people who were asking for this feature were regular presenters who often just tweaked presentations but didn’t create them. They used internal templates designed by their graphic department and wanted a way to quickly share presentations without going into the editor environment.
** Ideation **
The idea was to bring these features to the dashboard where all your presentations live.
Thoughts & ideas around bringing these features to the dashboard
** Phase 1 **
We already had a context menu that could be accessed by right clicking on a presentation (but very few users knew that). So the idea was to extend it with the features from the editor and make it more discoverable.
The redesigned presentation tile with the new context menu
** Phase 2 **
But we didn’t stop there. The context menu was a good first step but there was very little space to work with and users felt overwhelmed when looking at all the options. So, for our second iterations we decided on three guiding principles:
Have enough space to lay everything out in an understandable way
Display analytics data related to the presentation
Make the sharing and export to pdf features more prominent
People either shared their presentations by sending out a link or exporting them to pdf and attaching it to an email, so it made sense to prioritise these use cases. We wanted to have the analytics feature built into the solution because people we interviewed were struggling to see if people were interested in what they had to say. Displaying viewer data would make their workflow a lot easier.
We decided to try out a subpage layout because it gave us plenty of space to work with. We already had an older version of analytics working on a separate page so instead of integrating it immediately, we decided to put a CTA there to see if people want to use it.
The first version of the detail view we put out for A/B testing
After two weeks we compared the performance of the new details page to the older version. Traffic to analytics increased significantly as well as sharing and exporting presentations. However we were not satisfied entirely. Our existing style guides had low contrast issues and buttons by default looked inactive, the page layout also needed some additional work.
** Refining **
In the “final” version we worked on cleaning things up and making it more understandable. Analytics was also integrated into the page.
The refined Prezi Detail View in action
Spellcheck
Creating a spellcheck and recommendation option for the Prezi Editor.
** The Problem **
The original Prezi editor had a spellcheck option, but when Prezi Next was introduced everything had to be rewritten to get rid of the flash based technologies it was relying on. Flash was out and so was the spellcheck.
** Starting out **
A great spellcheck has three crucial properties:
Highlighting words have to be clearly visible for people with bad sight, vision impairments, sitting in sunny environment with old screens
The recommendation engine should only display relevant result, ranked by probability and should do this quickly.
Fixing the mistake with one of the recommendations has to be easily accessible.
** Visibility **
Since the expected colour for highlighting errors is red, there are multiple visibility problems you have to tackle.
The most common form of colour blindness is deuteranomaly. People with this condition have a hard time distinguishing between reds, greens, browns and oranges, which makes it hard to see the underline on certain backgrounds. In other cases the background of your presentation is also red, making it near impossible to see the underline.
To solve this problem we decided to draw a barely noticeable second underline underneath the red one in white. This solution guarantees good visibility on most backgrounds.
Export sheet and explanation for the spellcheck
** Interaction **
For the interaction I had to design something that’s not in your face but easily invokable. We ended up integrating the recommended words into the right-click context menu. This pattern is familiar for a lot of people who use Microsoft Office or Google Docs (most of our users). The animation for correcting errors was designed to give users a sense of confirmation that the error was replaced and fixed. All is good, keep on typing.
The spellcheck within the editor
Template Chooser
A redesign of the Prezi Next template choosers to address several usability and technical issues.
The template chooser is by far the most important step in a users journey. It opens every time you start a new presentation. Building it right gives people confidence in their ability to use the tool.
** Problem **
We knew from usability tests with first time users that our initial release for the template chooser was not ideal. Previewing a presentation took several seconds and after selecting the right one you still had to wait for the editor to load. This meant 1 in 5 people left before they got to the editor. We also knew that another team was asked to create a 100 new templates for the editor and that the current layout could not handle that.
The old version of the template chooser, which was designed with 30-40 templates in mind
** Discovery **
From a design standpoint, I wanted to come up with a structure that can handle tons of content. Because people come from different field to create presentations, I focused on creating groups/topics and ease of browsing between the options.
Exploring layouts for the page
For the engineering team the challenge was to decrease the time for the template previews to load. Because by previewing a template users can learn how topics and transitions work in Prezi we wanted to keep the capability. The goal was to shorten the loading time as much as possible
** Testing & Implementation **
For testing I selected a solution that can allows for free browsing and jumping into categories quickly. Difficulty badges were added to the concept to push people into templates with high first-time user success rates. A prototype was created in Framer to see things in action.
User flow for navigating through the template chooser
Meanwhile, the engineering team came up with a solution to cut presentations into short video snippets. Each time a user clicked on the next slide they could still see the transitions and animations but without waiting for the preview to load. This also allowed us to load the actual engine in the background while you’re browsing between templates, cutting the editors load time from 7-8 seconds to 3.
The template chooser skill levels and preview
Editor Onboarding
An on boarding experience to tech people how to use the Prezi Next editor.
** The Problem **
On boarding was always a huge topic at Prezi, since the medium is kinda complex people either get it and love using it or are intimidated from the start.
In Prezi Classic (the old Prezi built on flash) on boarding was taking a linear hand-holding approach which we knew alienated a lot of users who preferred to try out things on their own.
** Discovery **
To understand how people approach learning new tools we conducted interviews with 12 marketing and sales professionals. It turn out people learn in lots of different ways. Some people prefer hand-holding while others jump right in, trying a few basic actions. However they rarely tried out new tools on their own and got basically zero training when something new was introduced into their process so often times they had to watch youtube videos to understand things.
** Approach **
We wanted a design that allows people to follow along or completely dismiss it. After some digging around on Useronboard.com and having heated discussion about the Slack on-boarding. We knew one thing for sure: No tooltips.
Tooltips take you out of context by forcing you to click somewhere on a screen, they are also pretty bad if you want to revisit the tutorial.
Instead our approach was more similar to knowledge bases which can be revisited as many times you want to. Since we already had a chat support option built into the editor it made same to build on top of it and potentially help out the support with their workload .
Image Cropping
Creating an image crop within the Prezi Next editor.
** The problem **
We have an ongoing list of user requests that we gathered from support tickets, sales calls and usability tests. On top of the list we had image cropping for many months but for some reason it didn’t get on the roadmap. We pushed for it with the power of solid reasoning and irresistible charm to put it back where it belongs (the roadmap).
** Exploration **
Based on past interviews we knew that most of the people wanted image cropping to have circle images. Since topics in Prezi are by default circle shaped people wanted to cut their images to match their topics.
Another shape requested was a 16:9 ratio, this obviously made sense for cropping background images and 1:1 to have a perfect squares.
To create the image crop we had to be consistent with other content manipulation tools within the editor and familiar enough that it doesn’t require extensive on boarding. We decided to build it within a test environment first, because the interactions are fairly complex to replicate with a prototype and it’s important that users are in the flow of creation when observed. Unfortunately the project was postponed 😢.
A handover document I created for development to reference