top of page
Group 2085661578.png
Group 2085661579.png

Project Timeline 

Group 2085661585.png

Project Overview 

TimeOverview.png
Group 2085661587.png
Group 2085661588.png
Challenges

Challenges

Group 2085661592.png
Group 2085661593.png
Group 2085661594.png

Research Overview

Our research methodology is built on a foundational solo project, details of which are accessible here.

For primary research, we engaged with 11 users aged between 18 and 24 from diverse backgrounds.

Painpoints

Group 2085661578.png
Group 2085661582.png
Group 2085661583.png
Group 2085661584.png
AAA.png

Takeaways from this Competitive Analysis 

Group 2085661611.png
Group 2085661612.png
Group 2085661613.png

Based on the above research, we identified three key areas to address.

1. Users should have easy access to the recorded sessions.

2. They should be able to share the link by copying it easily.

3. Time-saving for our users: Easy to spot, One-click download.

Lo-Fidelity Wireframes 

User interviews and market analysis, along with an understanding of current industry standards, helped me sketch out some low-fidelity user flows.

Group 2.png

In Meeting Page

Untitled_2 3.png

Pop Up Confirmation 

Group 3.png

Meeting Recording Started Notification 

Group 4.png

Meeting Recording Ended Notification 

Use Cases

Creating use cases based on user pain points helped me identify the necessary touchpoints for addressing those issues. This led the team to develop two distinct flows: inside meeting user flow and outside meeting user flow, resulting in two cases that can be effectively addressed.

1. Outside Meeting

  • Meeting Pages for Present day meetings and Past Meetings

  • Saved in Chat screens

2. Inside Meeting

  • Desktop Screen

  • Mobile Screens

01

Outside Meeting User Flow

By "outside," I mean the path a user will follow to access previously recorded sessions when they are not currently in a meeting.
The following is a simplified diagram I created, which helped us understand user touchpoints and identify where design interventions are needed.

Group 2085661550.png
Anchor 1
ap

High fidelity design Screens for Outside Meeting user flow

After identifying all the touchpoints requiring new screen designs to make accessing meeting recordings easier for users, we began designing each screen individually. Below is an example of the final iteration, which was implemented in production during my tenure at my previous company.

Video: This prototype video showcases a high-fidelity user flow for in-meeting interactions.

UI Design Decisions 

To enhance the user experience and streamline navigation, we meticulously followed a comprehensive design process. This involved organizing the layout for optimal clarity, implementing intuitive navigation, and selecting a professional color scheme. Below is an overview of our design decisions

Group 2085661599.png
Group 2085661600.png
Group 2085661547.png

Image: Upcoming Meeting Page

Here is a detailed description of the past meeting recording screen we designed. 

The past meeting recording screen is designed to be user-friendly and intuitive. It features a dedicated section where all recorded meetings are listed chronologically, making it easy for users to find specific recordings. Each recording entry includes essential details such as the meeting title, date, and duration. Users can quickly preview or playback recordings with a single click.

Additionally, there are options to share the recording via a generated link, download it for offline access, or delete it if no longer needed. We also incorporated search and filter functionalities to help users efficiently locate specific recordings based on various criteria.

This screen aims to streamline managing and accessing past meeting recordings, ultimately saving users time and enhancing their overall experience.

Group 2085661548.png

Image: Past Meeting Page

  1. Compact Layout: The layout is optimized for smaller screens, ensuring that key information is easily accessible without overwhelming the user. Meetings are listed in a scrollable format with essential details prominently displayed.

  2. Responsive Navigation: A bottom navigation bar provides quick access to different sections of the app, such as Today’s Meetings, Past Recordings, and Settings. This ensures users can navigate with ease using their thumbs.

  3. Touch-Friendly Controls: All interactive elements, such as buttons and icons, are sized appropriately for touch interaction, minimizing the risk of accidental taps and enhancing the overall user experience.

  4. Visual Cues: We use visual cues, such as color-coded meeting statuses and icons, to quickly convey important information. For example, an ongoing meeting is highlighted in a different color for immediate recognition.

  5. Streamlined Actions: Key actions, such as joining a meeting, accessing recordings, or sharing links, are simplified to one or two taps. This ensures that users can perform important tasks quickly and efficiently.

  6. Notification Integration: The design includes seamless integration with mobile notifications, alerting users to upcoming meetings or changes in their schedule, even when the app is not open.

  7. Adaptive Design: The interface adapts to various screen sizes and orientations, maintaining usability across different mobile devices.

Meeting Screen

Single meeting recording links

Drawer

Copied Notification 

Download Notification 

Multiple meeting recording links

02

Inside Meeting User Flow

The diagram shows the detailed process of recording a meeting, from start to finish. When a meeting begins, the user can start recording, and a notification pops up to confirm that recording has started. As the meeting continues, the system keeps track of the recording status. When the user decides to stop recording, a confirmation dialog appears to prevent accidental stops. Once confirmed, the recording ends, and another notification informs the user that it has finished. This carefully designed process ensures that users receive clear feedback at each step, making the recording feature easy and reliable to use.

High Fidelity Designs - In Meeting user flow desktop screens

1. In-call Meeting screen 

2. Meeting Recording started notification

3. Meeting recording in progress

4. Confirmation pop-up before ending the meeting recording

5. Meeting recording ended notification.

In Meeting user flow Mobile screens

Saved in chat designs

We identified three types of meetings based on their style:

1. Scheduled Meeting: Pre-planned meetings set in advance with a fixed start and end time.

2. One-to-One Meeting: Personal meetings between two individuals, often for check-ins or specific discussions.

3. Ad-Hoc Meeting: Spontaneous meetings that are set up on the fly without prior scheduling.

Desktop Design Screens

Recording is available in chat for easy access.

Multiple Recording are available in chat for easy access.

Mobile Screens

The card design within the chat interface exemplifies a seamless and user-centric approach to managing meeting recordings. Integrated notifications ensure users are promptly informed of the recording's start and end, enhancing transparency without disrupting the chat flow. The card features a prominent play button, recording duration, file size, and intuitive icons for downloading and sharing, all designed with touch interaction in mind.

This visual hierarchy ensures quick access to essential functions, enhancing usability and efficiency. By embedding recording features directly into the chat, the design reduces cognitive load and aligns with users' natural workflows, demonstrating a deep understanding of UI/UX principles and elevating the overall user experience.

Further...

Screenshot 2024-05-29 at 8.38 1.png

Results and Impacts

The above design solutions were implemented across four different platforms: Desktop, Mobile, WebRTC, and Mobile WebRTC, and on various operating systems like Windows, iOS, and Android. The significant UI improvements made the application more useful and visually appealing, boosting sales by 70%. For the first time, we made meeting recordings easily accessible within the application itself.

 

Challenges and Lessons Learned

This project revealed the complexity of meeting recording and showed that multiple solutions can be used simultaneously to address a single problem. Efficient communication between the design and development teams throughout all phases sped up the process. We learned that designing with the future in mind can prevent numerous issues and save significant time and effort in the long run.

 

Next Steps

We plan to extend the same functionalities to all participants of video calls, making it beneficial for everyone involved.

bottom of page