Loading...

Presentr

Captured an interactive public-speaking experience to have at the reach of your hands; for those who want to feel confident and improve their presentation skills.

Presentr is a public speaking mobile coaching app that replicates the experience of having a coach by your side at all times. You can practice, assess and learn with Presentr just like you would if you were working one-on-one with a coach.

My contribution: Branded the redesign of the company and app, designed UI and UX flows for the app. In order to better understand how public speaking coaches, transform their client's minds and throught-process on how to approach speaking in public; I had to experience myself. Which I sat in a few sessions to observe their methods, and tips to help be analysis solutions to implement those methods into the app.
Client
Presentr

Tools
Adobe XD, Lucidcharts, Jira, InVision,

My Role
Lead and sole UI/UX Designer — branding design, user interface design, and user experience design

Team
1 Product Manager/CTO
1 Lead Developer
1 iOS Dev
1 QA Specialist
2 Public Speaking Coaches

Hypothesis

Speaking in front of a small, medium, or even a mega-large crowd is one of the most common fears to the everyday person. Fear of being judged, freaking yourself out on what others are thinking about you during your presentation can make you stumble on your words and lose your place. It’s a vicious cycle.


Understanding the Users
Target Audience

Presentr is a B2B app, for companies wanting their teams to improve on their public speaking skills. Feel more confident in speaking in front of crowds, clients or meetings

Goals

Many people's goals is to gain the confidence and skills to present at a 1-on-1 meetings, small team meetings, large audience.

Common problems

73% of the population struggles with a fear of public speaking to a certain degree. Here are some reasons people are afraid of public speaking. For users interested in improving their public speaking skills and feel more confident speaking in front of a crowd.

  • Being judged
  • Being criticized right then and there by someone in the audience
  • Forgetting what to say
  • Freezing (deer in a headlight)

The product
What is Presentr?

This platform helps users improve on their public speaking with helpful tips and fluid key public speaking components that notifies the users in real-time during the main app feature, live app presentation. Also, there are fun interactive mini-games so the user can focus on individual public speaking components to improve on, such as speed, tone, pace, and reducing filler words.

Goal

This app will make them feel more confident when presenting in real-life.

Product lifecycle

  • Record your presentation, so the app can assess your baseline
  • Review your score and tips
  • Practice, practice, practice!
  • Continue to improve with mini games
  • Record your presentation with your new adjusted skills and tips
  • Feel more confident and present in real-life.

Branding
Colors

The original logo and branding had a dark gem color, which aged the overall branding style. Which also projects an overall strict seriousness to the branding. Especially since most people have a fear of public speaking; the co-founders really wanted the rebranding to be welcoming and inviting. Produced a more receptive and friendly color palette.

Logo mockups

The original logo's graphic was of a person jumping, which does not relate to public speaking. I explored with relatable graphic elements that can symbolize public speaking or the act of presenting. Designed with the idea of implementing microphones, a podium, and a person talking. Also while keeping in mind if the logo can stand strong and simple enough to be a sized down icon.

Final logo

The final redesigned logo is the word "Presentr", with a person in the "P" of "Presentr". The person's head is the hole of the "P" and the base of the P's curve is supposed to be a podium, with a tiny microphone popping out.


Research & User Testing
Users public speaking sessions

During my duration at Presentr, we were working in a co-working environment, in which there was access to many people from different types of companies. We conducted free public speaking sessions, coached by both of the founders (a public speaking coach). The Project Manager and I observed and gathered feedback from the sessions. Ideate how to capture and digitize a public speaking session into an app.

Improving the score indicators

Originally the score indicator was visually a white dot within the score range that fluctuates based on the user’s performance. After a user tester session, multiple testers were asking where they landed on the range. It was clear that the UI of the score indicator was not visually strong enough for the testers to notice their results. Based on the feedback, I made the score indicator taller and change the color to black, to it can be more noticeable.

Heat map

Used heat map analysis to see where real users were on the screens, and where they were clicking/interacting. Which helps guide us to adjust the UX for confused users.


User's content preparation challenge
Freezing during a presentation

Users were unsure what to talk when they were presenting, as a freestyle presentation (when they can talk about anything).

Solution

Added a feature where users can pick a general topic to talk about for their presentation. Added an outline of the topic's talking points to prep the user beforehand. The talking points will appear during the presentation. So they can focis on the performance of their presentation to improve on their public speaking skills, rather than worrying about the content.


Assessment flow challenge
Problem

The assessment flow is to help gauge the user’s public speaking baseline, to know where they stand within the ideal speaking range. To help them understand which aspects they need to improve on. The assessment is only for first time users of the app, when they first sign in. Within the original assessment flow users felt stuck, they didn’t know what’s the purpose of the assessment. What does the baseline consist of, even though the instructions were on the intro screen; users were still confused. After the users completed the assessment flow, they were forced to read a blog article, which is a section of the app, in order access the main features of the app.

Solution: Clarifying the assessment

Made changes to clarify any confusion with the assessment flow, so users have a proper onboarding and assessment. Added a welcome video prior to the video, and I simplified the intro screen text and added an outline/breakdown of the assessment flow so users know what to expect during this flow, and why is it important. Previously, users felt stuck when they were in the flow, they did know where they were within the flow and how much more till they completed it. To solve this, I added a progress bar that’s at the top of each screen within the assessment flow. That way they can see exactly which section of the flow they are on. In the original flow, users were forced to open a blog article before entering the main app features. Wanted to give them an option to explore the app, although since this would be their first time using the app, added an app guide (only for the first time use).


Prep
Flows

Developed user flow charts for the development team. So they can see the app overall and multiple user scenarios.

Design specs and exporting

When handing off assets and dimensions to the dev team, I had to make sure that they had all the proper and approved specs. That way the approved designs and flows were translated correctly.

  • File sizes for iOS mobile
  • HEX colors
  • Measurements
  • Branding fonts
  • Exporting file formats: PNG, JPEG, GIF
  • Design specs via Adobe XD

Mobile Features
Present

If users don’t have a presentation prepared, they can freestyle a presentation in the app. We gave them an option to pick a topic to talk about as a guided experience, also they can activate or deactivate real-time feedback during their recording.

Scores

Scores page for all your recordings and the detailed breakdown. Also tips and descriptions of the breakdown scores, so users can understand how their recording was scored and where they need to focus on improving.

Mini games

Mini games to help you improve by focusing on certain public speaking skills, such as volume, pace, and filler words.

Mini game: Pace

This mini-game will help users adjust their pace, so they are presenting in an ideal range, not too fast or slow. If they talk too fast, their car will accelerate and hit the car ahead; if they talk too slow their car will hit the car behind them. The visual purpose of this game is to keep the green car within the same range as the pace car.

Mini game: Filler word

While presenting during this mini-game, if the user says a filler word, the screen will fill with water. The mission of this game is to make sure the water level doesn’t go past the red line.