UI/UX design for OpenStream

[teerth17]

Project Task

• [ ] Start Designing UI/UX of the Extension
  • Sketch out the user interface and user experience for the extension.

[Vandana-3]

Starting with the user flow for the scenario of user starting the recording, with the ability to record screen and webcam simultaneously. Working on next steps, with low fidelity wireframes and a storyboard for the same.

Simple User Flow:

Detailed User Flow:

[ykdojo]

This looks great! Thank you for this, @Vandana-3!!

[Devanshukoli]

It's awesome @Vandana-3

[Vandana-3]

Some rough sketches for discussion

[artymiz]

I like the look of the UI! @Vandana-3 should we also consider different screen capture options if we want to extend the features later? For example, sharing a selected area of a screen or an application.

[ykdojo]

This looks great to me! I feel like for the initial version, we could have these two parts (camera and screen) recorded into separate files? Then we can add an option to have custom layouts later on?

[Vandana-3]

Thanks for taking a look @artymiz and @ykdojo.

Yes, considering different screen capture options is necessary we can either add it into the dropdown as we keep adding features(Current screen, window only, entire screen, or selected section only- and google chrome screen sharing options would get into more detail. You could suggest more on the technical feasibility.

@ykdojo that sounds so much more flexible for the users, we could just show them the preview of the webcam instead of saying its the layout. Nice, new dimension added to the product, to be able to edit layout after recording.

[ykdojo]

Right, there are many questions to answer here like,

Should we allow the user to edit the layout after they finished recording it?

But I figured for now, the user can get two separate files and edit them together on their own.

[ykdojo]

It's been two weeks since the last update, so I'll move this back from in progress to to do

[Akshay1018]

Hi @ykdojo , which is the final UX design to get started? I see 2nd screenshot is more user-friendly instead of a select box in the first design.