top of page

Evolving seamless online presentation experience

base.png
base2.png
Screenshot 2024-03-12 at 18.21.41.png

In 2020, at the pandemic's peak, people worldwide got stuck in virtual workplaces. The usual touch of human connection in businesses was locked behind cold screens. Suddenly, people were talking to black little boxes during meetings because some of us had poor internet connections, were multitasking (a.k.a handling kids), or didn’t feel like showing their faces. Productivity was low! 

This is the story of how I helped make data-informed product decisions on Presenter, a desktop presentation tool, to support remote working, making big business impacts from home.

Role

Product Designer

Duration

I participated for 6 months, the product launched in Oct, 2021

Process

​UX Research (Evaluative & Generative), ideation, wireframe, concept testing, prototyping. usability testing, iterations

Business Metrics

feature adoption rate, production stickiness rate, MAU, conversion on subscription after the trial period,  revenue $$

Live Product

Personify Presenter

My Role

I led the UX discovery, design, concept testing, and usability testing of the product - Presenter between July 2020 and January 2021. I collaborated closely with 1 product manager, a group of developers, and 2 other visual designers who worked on the detailed visual design. The features I worked on launched on October 14th, 2021.

Business Goal

Improve our product to be tailored to work-from-home needs to boost revenue.

Metrics include feature adoption rate, production stickiness rate (especially the count of MAU), conversion on subscription after the trial period, and revenue. 

Discovery Research

With a massive base of users (perks of a B2C company), I quickly convinced key stakeholders with two research proposals to help us identify what we should be solving for that would hit the business goal.  1. An evaluative research via survey to get feedback on the current product. We spotted many common patterns across users’ pain points from the survey. The product manager utilized the survey data to prioritize backlog to address technical bugs and quick design fixes such as missing error messages and unclear wordings of buttons. The survey also revealed that users wanted to see new features since they use features as a currency to compare and decide which app to pay for. This finding echoed Personify’s business needs. Hence, I got buy-ins from the C-suite to prioritize the qualitative study on understanding our users’ behaviors working from home. Furthermore, we received many feature requests and inspiration from our users. 2. A generative research through user interviews to understand how they work from home during the pandemic. With 7 user interviews with power users, we found the following critical insights

From research, we found that: 

  • We have 2 types of users.

  1. Presentation master (sales, coach) that’s sharing an entire screen across multiple monitors or applications at once.
  2. The slideshow-based presenter put everything in a deck.

  • Goals

  1. Users need an enhancing tool to achieve a professional impression (excellent branding) for online presentations that’s easy to set up.
  2. Integrate different elements or formats into a seamless presentation.

  3. Fast learning curve

user journey

I translated findings from the two research projects into various artifacts, including the user journey. The diagram aided us in framing the problems we were solving around our users’ needs in their workflow. 

Framing Problems

  • How to present naturally?

  • How to support easy control during the presentation so they feel confident in using the technology?

  • How do we boost interaction or collaboration with audiences?

HMW

...How might we provide work-from-home users with a simple but powerful presentation tool to boost engagement during the presentation and make a business impact?

Vision

The tool will be simple but powerful, with a seamless, immersive experience. It will be a tool that enhances and supports users' needs and integrates well with other software

Design Approach

Problem Statement

“I want my presentation to deliver a professional image and, at the same time, to be dynamic and interesting. I must customize content for different audiences so they can connect with me.” - Sales Rep at a software company.

Ensure users’ confidence by supporting the planning ahead of time for their presentation flow.

The studio mode allows users to feel prepared and present with confidence.
  • Users can import files (e.g., slideshow) and add app screen share in scenes ahead of time in a project. 
  • To prepare their presentation, users can plan where the persona will appear on each slide or during the screen share. Hence, your image will not get in the way of your content. 
  • Users can also note down their talk points for each scene. The speaker note carries over when users import from PPT.

  • Widgets that support boosting engagement during the presentation

  • Annotation tools and sticky allow users to collaborate with their audiences during the presentation and boost engagement.

first version of mode selection
UI of Studio Mode

Early Phase exploration
How we got here?

Ideation

The product at that time, as shown below, mainly empowered users who shared the whole screen during their presentation. Our two main user types present very differently, and how do we make sure both users’ needs are met? Based on our research, there was a huge opportunity to help users prepare their presentations ahead of time.

Furthermore, we received a lot of great ideas on features from the survey that we included in the ideation process.

3.3.2. Annotate - Pencil tool - Drawn lines.png
3.3.2. Annotate - Pencil tool - Drawn lines.png

📍The original product (pro mode) allows the presenter to present like a weatherman while sharing the whole screen.

Concept Testing

I led the presentation of the new concept based on our ideation with one major enterprise client using low-fidelity design to validate our ideas. They’re also pleased that we included them in the early design phase. The feedback was positive; hence, we moved forward with this new studio mode concept.

Concept testing low fidelity wireframes

📍 Imagine you are in a music studio. There are many controls in the control room, but the recording session is only in the recording room. Likewise, the middle part of the studio is the only part your audience will be able to see during your presentation. The users who use the tool to present can easily control or make changes without showing the editing functions to their audiences. This is the concept we presented.

Pivotal Change
Constant collaboration with the engineers

With the complexity of the concept, I made sure we started the discussion with the engineering team early in the design phase and avoided ad-hoc design changes due to a lack of consideration of technical feasibility. The idea of only sharing the middle screen of the editing studio was not technically feasible. Alternatively, as we identified from the research, we pivot to focus on preparation and presenting, which is part of their workflow. Users can present the content they preloaded as the main screen share. When they are in presenting mode, a toolbar is floating on top where the user can move the location freely. This toolbar is not visible to their audiences. Hence, they can easily pull up the necessary tools, such as persona moving. They can see the notes, what’s next slide, and all the annotation tools to support their presentation and look professional and confident.

Panels in Present mode

Test & Iterations

I conducted an unmoderated preference test, 1 internal usabilty session, and 2 external usability sessions with 7 and 3 users, respectively. In the last round of testing, 95% of tasks were accomplished without struggles.

Problem 1
Visual clarity on the purpose of the tool

Challenges that emerged from rounds of internal usability testing include

  • Assumptions that the tool is just letting users import and edit slideshows since the annotation tool is prominent.

  • Unclear icons made users spend time guessing their functionalities.

Before

first version used in usability test

📍first version used in usability test

Hence, we reframed the user stories to focus on solving users’ problems and making the UI intuitive.

As a salesperson,

I want to know how the tool can empower my work,

So that I can save time figuring out what the tool can do for me.

As Personify (the company),

We want to clearly convey the key functionalities of the tool visually,

So that we can retain users with an easy learning curve.

second version used in usability test still has hidden child menu

📍second version used in usability test still has hidden child menu

final version with all the main actions and labels listed out to ensure clarity and ease of use.

📍final version with all the main actions and labels listed out to ensure clarity and ease of use.

After

Problem 2 
Jumping out from groupthink

Another finding that we identified from the usability test was from groupthink. We borrowed the object layer pattern from design tools like Figma and Adobe XD. Members of the team were all familiar with it. However, the test proved that users were unfamiliar with it and didn’t find it intuitive. Again, designers are not the users; the usability tests validated the statement and helped us avoid making mistakes. An onboarding tutorial would be helpful, but we cannot entirely rely on it.

How can we make it an interaction that is more common or comfortable to the general public? 

object layer pattern from design tools like Figma

Before

📍object layer pattern from design tools like Figma

After

object layer color picking 1

📍Design Option 1: I adopted the Gestalt principle of proximity by having a toolbar below the object to edit color, order, and deletion.

final version with all the main actions and labels listed out to ensure clarity and ease of use.

📍Design 2: I adopted the Gestalt principle of the common region. Putting these functions right next to redo and undo that belong to the same “edit” category.

We eventually went with design 2 to take all the edit functions out of the center "screen" area.

Final Design &
Product Launch

2 modes selection
project dashboard.png
UI of Presenter studio mode.png

In the 10 months after my involvement in the project, the team continued to evolve and polish the visual design. Furthermore, finessing the functional details as the app was being built. Although I was not part of this process, seeing most of my work brought to life was great. 


On October 14th, 2021, the new Presenter with studio mode launched. It was an impressive achievement by the team, considering it was the first new feature launch since 2018. The product manager I worked with back then also reached out to me as he wished I could witness the work I contributed significantly coming alive.

bottom of page