UX/UI Designer
podiumCover.png

podium

helping you become a confident speaker

 

 

 
 
 
 

Prototyping Round 1

In this first phase of prototyping and evaluation, we created several low-fidelity static and interactive wireframes to test 3 high level themes before going into next phase of building higher fidelity prototypes.

podium_prototype_v1_test.jpg
 

1. General Approach

We created wireframes with 2 different approaches and also incorporate other activities to understand users' preference and possible ways to interact with the solution.

Goal

  • Understand how our solution would fit into users' workflow
  • Gather initial thoughts on interface design and platform

Activities

  1. Concept Envisionment
  2. Paper Wireframe Walkthrough
  3. Interview

Participants

3 experienced speakers from previous research
 

Option 1
Cleaner interface, focused on the speech-building process. It had a more linear and streamlined flow, mostly driven by modals.

Option 2
Focused on voice analysis metrics and long-term progress related to them. Interface was more complicated but with faster access to all the functions, inspired by digital audio workstations.

 
 

Findings

  • Participants preferred the simpler interface design and structure-focused approach like Option 1.
  • Participants liked voice analysis data but were confused about its meaning and context.
  • It felt more natural for participants to use text input (typing) instead of audio recording to create outline.
“I don’t know what 83% means in this context.”

“I don’t know what 83% means in this context.”

 

2. Flow

Walkthrough with think-out-loud to evaluate the clarity of flow and desirability of features.

Goal

  • Did the flow make sense?
  • Was the onboarding and speech creating process clear?
  • Was there any feature missing?

Activities

Low-fidelity InVision Prototype walkthrough

Participants

6 participants from MHCID cohort
 
 

Findings  

  • Onboarding process was clear, but experience could be more exciting and relevant to further motivate users.  
  • The ability to video record was desired, but still missing from this iteration.
podium_prototype_v2_walkthrough.gif
 

3. Content

We focused on content in this evaluation, because content is critical for a learning tool.

Goal

  • Did the speech categories and frameworks work for users?
  • What was users' reaction towards tying voice analysis to goal setting?

Activities

Low-fidelity InVision prototype usability test
Tasks: Start a speech, practice recording, and generate feedback form

Participants

3 participants from previous research
 
 

Findings

  1. Reactions towards content were generally positive.
  2. Some participants imagined themselves recording their practice on a smartphone while being mobile.
  3. Process to share feedback form with people was very unclear to participants.

"Does it generate feedback automatically?"

 
 

Key Takeaways

1. Typing at a desk was natural for creating outline, while some participants could also imagine practicing on a phone.
2. Video recording was highly desired, but missing from our early prototypes.
3. How feedback function worked was unclear to users, and not prominent enough in the interface.


To solve these problems, we included video recording and reworked site architecture to emphasize feedback feature in our next build.
While web app seemed to be the right form for our solution, mobile companion app would be another future goal.

 
 

 

Architecture

We revamped the site architecture with an emphasis on the 3 key aspects of public speaking framework, and eliminated superfluous features from early wireframes.

 

1. Sitemap

Due to the large amount of features and information in our solution, we started with organizing the content. This sitemap covers the entirety of the podium web application. The core interactions occur within the speech editor, but users without an account can access demo speeches and explore an alternate version of the editor. 

 
 

2. User Flow

This flow diagram illustrates the typical user journey of creating, practicing and sharing a speech with others for feedback. The reviewer flow shows the steps of completing a feedback form through a mobile browser. Login is not necessary for the reviewer.

 
 

3. Hero Flow

This is the hero flow that demonstrates an ideal flow of using podium. It was created to streamline the next phase of prototyping, with only the key steps that we'd like to evaluate first.

 
 
 

 

 

Prototyping Round 2

In this phase, we focused on refining detailed interactions of our key features. Interactive prototypes were created with Principle.

podium_Public_Speaking_Framework_Features.png
 

Build an Outline

  • A learning tool that helps beginners structure effectively by generating a customized outline based on the type of speech, and providing personalized tips.
  • Also a flexible and customizable canvas that accommodates different levels of use.
  • Our design brings back the familiarity of using notecards. You can rearrange different parts of speech with ease.

Drag and drop section cards to organize your speech.

podium_prototype_outline.png
 

Record Your Practice

  • Make precise refinements to your delivery style by analyzing and reflecting on vocal qualities such as pitch, pacing, clarity and filler words. 
  • Easy navigation with interactive data visualization or auto generated transcript of your practice.
  • Ideal for experienced speakers who record themselves already, but can also train beginners to get into the habit. 

Scrub through the data visualization, or navigate with transcript.

podium_prototype_practice.png
 

Ask for Feedback

  • This feature provides a framework to easily get/give meaningful and actionable feedback.
  • Podium suggests questions you can ask based on the type of speech you’re giving.
  • Feedback form will be sent along with your practice video as a link via text or mail.

Drap and drop auto-generated questions or add your own question.

 

Give Feedback (Mobile)

  • Reviewers can leave in-line reactions with emojis as they're watching your practice video, making this experience fun and easy for both sides.
  • After watching the video, reviewers will be asked to fill out the form you create, to provide qualitative feedback.
 

Check Feedback

  • Check reviewers' responses to the questions on your feedback form.
  • Navigate your practice video with inline feedback, so you can make refinements to specific part of your speech.
podium_prototype_feedback.png