Screen Recording Challenge

Nice Design

Hey Vatsal, cool design. I was also thinking of adding a mouse zoom feature, but was running out of time. I just had a few things I'd like to point out here, and a few suggestions. 1. The record button (top-left screen) I guess could be red color (as is the norm to spot a record button) Familiarity to other products helps, don't you think? 2. In the second screen (top right) I'm guessing the big round button in the middle signifies that recording is in progress but in that case, user could use a timer. Also, as is the behavior in all camera apps, the button that's used to start recording also ends it. But in the screen that is placed separate. So I wonder what's the purpose of the red circular button in the center? Also, if the recording is going on it'd help to see a separate toolbar that doesn't show options that I might not need. Like I don't see myself changing the screen ratio once I start recording. Maybe that's something to consider. I hope this helps. Other than this the app looks great, clean and minimal. You've done a great job here. Kudos.

I agree with Neha there. These screens don't look much consistent to me, with no design theme going on. Also, the image you posted doesn't show the features of the app clearly as it is quite zoomed out. I hope you improve these things in further designs.

Extraordinary

Nice one

Jaabruu

Khare khar 1k number hon lala

Nice one

Nice job

Ek number

Ha moj haaa

Nice work 🙌

Hey Bhavik, Good approach for great user experience and useful UI

Nice design. Keep it up 👍

Good work. Keep it up

Nice design keep it up👍

Nice Design 👍

Hey Bhavik, correct me if I'm wrong, but it looks like the screens are mere screenshots from some other app (except the screen on bottom left) Because all the other screens don't quite match the style of the bottom-left one. That's just an observation, I could be wrong. But maybe you could try designing with a consistent theme. I hope this helps. Have a great day.

Hi Abhinav Juyal, Thank you for your valuable feedback and support. I will definitely try to improve every detail in the future. Thanks again!!!

Hi Jeya, Good start!!! But I would recommend you to add more screens over screen recording!! 👉When I am boarding. Is it mandatory to walkthrough the onboarding, if no can you add a way to jump directly over to main tool. You have given a button "I want record a vedio" on click of that what I expect to land directly on tool but I see help tutorial. Next to it is the button asks to upload a video" I don't think adding that button really make sense. What would I do adding already recorded video over app, challenge is for recording not for editing video. So you can remove that button atleast from there!! 👉Over desktop screen you have given 3 different controls, the control at top left misses the alignment of the internal elements icons and text both and size. Also the are not segregated properly as per law of proximity They just have a named allow permission, but as a user I found them difficult to understand. 👉You can either name them each or can experiment with their placement. I would suggest you to modify the section, segregate the components with similar category name the each control so that the user can understand, their utility. All 3 controls placed at different location this may trouble the user over space and interaction when actually starts recording. 👉There is "draft icon" for the component of the bottom, is that, Save Icon!! recording already gets save when we end it. So I would like to know the use of that icon. 👉I wonder when I saw the 3 tabs for choose what to share, modal, I think we just need to select the part of the desktop and record, so adding those 3 tabs completely distracts the solution in terms of problem stated. I really expect to see something more in terms of recording screen rather onboarding and sign up,

Hi all, For a better view - Please check here👇, https://xd.adobe.com/view/3d0875d4-6cc1-4fa1-95c8-64f1a9f5d3b2-685b/

Hello, Neha  I like that the solution is very much to the point and not more cluttered with additional features. I would suggest adding more export options for user feasibility and expanding sharing options. I liked that user can also select Region while the selection of record or taking shot. what will be the use case of  full desktop recording for the toolbar , it will be hidden or user can confirmable with shortcut  as a first time user. because users have a learning curve once they recognize shortcut controls. I hope you will gain some insight from my findings. Cheers Bharath

Heya... this is not a feedback, I was running out of time so couldn't write a proper description, so here goes... I did this one on a sprint, it was quite fun. I looked around other screen recording apps. I talked to some of my friends who work remotely (which I presumed is my TG) and collected insights on what they currently use, when do they often need it, what do they like or not like about their current choices, and what would be an ideal screen recorder for them. Based on those insights, most of them didn't need editing options, but all of them liked the idea of showing their face and sharing directly to their team (i.e. not having to download and then upload to share) so I took care of that. When you hover over the icons, almost everything has a keyboard shortcut which would help frequent users. USER FLOW Open app > Start recording > Stop recording > Watch preview > Share to team Let me know what you think.

Hello Sushrita, The 3 different control panels can obstruct the interaction quite complicated arrangements of components. I noticed as a user few of the controls like green rectangle with plus, while recording, this layout will be complicated interms of interaction. Few of them are just unnecessarily added like premium.. there are such elements which may disrupts user experience. Please try to revised the panels sticking to problem statement.

hello, Sushrita  well-executed as a utility app, all scenarios and use cases are covered with sophistication. I am just curious about the floating controls. If we will be recording the entire screen, will the floating controls hinder the experience? & also control visible in recording while we target  larger resolution area for recording. i like the controls that embed in topbar of mac. i understood that app is more focus toward the task or screen Recording and align more to problem statement. One more nifty suggestion for the recording bar: we need to separate the control for stop and record instead of showing it twice in the recording status bar. I like the spotlight cursor concept, drawing objects, and the thumbnail shot for recording. I wonder how the Recording thumbnail will accommodate if we take more then two recording at a time. apart from the all suggestion & aspect it's  very well executed & well Deserved Entry to be won. Best of luck, and kudos for your efforts on this entry. cheers Bharath

Hey Goutham , You come up with different approach to solve this problem statement. using widget to record screen it's easy to use and design is minimalist, Great job. I would like to highlight few points. - If someone wants to record a presentation or also want to be visible so there should be an option for webcam also. - If I'm recording with mic and I want to disable system's sound so that mic's sound (My Voice) can be recorded clearly instead of no audio there could be two option one for mic and one for sound. - There is a part left of the main challenge "So I can send clips of what I am working on to my team" Keep up the great work ;

Hey Goutham, I'm melting over the modern look of your design, good job there. (Personal question, which icon library did you use?) I do have a few things that I'm confused about... 1. In the 3rd part, the button that says "No audio", I can't tell the state of that. So I have to click it to enable no audio, or is it telling me that there's no audio and I have to click it to turn it on. In my opinion there are 2 ways you can approach this.. a) Use only icon, people (especially the TG for this app) are very familiar with the icon and its purpose through all the meeting apps. So maybe use use the mic icon (with and without the slash) to show the state of their microphone. b) you can make this into a toggle switch. But don't use negative wording, that gets very confusing. Just say "Record microphone" and a switch in front of it. Those are my suggestions, but feel free to experiment on your own. 2. In the 1st part, when you say "Open app" what am I expecting to see there... just curious. Other than that, I think it's a pretty neat design. I hope my suggestion helps. Keep creating and have a great week ahead.

Hey Tejas, I would like to give you a few suggestions: Missing features: - Option to capture just images, entire video or screen area. - Option to change the location where my recorded videos are going to be saved in my system. - No option to close the tab that is open. Few flows are not very clear - How will this bar open? - According to brief user should be able to share the recorded video, there is no clarity of how will that be done. - Why would user open this bar to see the recording. After the video is recorded it should be visible directly in the location that they save it. - How and when will the bar in the center with recorded time, pause and stop appear? UI Improvements - Icons can made bigger and text under it can appear when user hovers on those icons. - Why are some buttons disabled? I do not understand the logic. - The icon for selected part and entire screen are the same, you can try to play around it to clearly differentiate the functionality. Try to work on user flow, many things are not clear.

Hey, Tejas Skemorphic design are always aesthetically smoothing and pleasing, Kudos for you to try that!!!! But with screen recording how would simplify the end user goals of sharing with team is the is still unresolved! There can be more in terms interaction with tool, how can you make simpler, usable and effective solution for both, personal use and teamwork. After all there are lot of screen recorders available in the market, but your solution should be fair enough to match the end user goal and requirements. With your approach It would have been great if you would have clearly represented a design more in terms of screen recording for selected part of desktop and sharing with team members, which is our problem to be solved.

I absolutely love this skeuomorphic design! it's so aesthetically pleasing and just makes me wanna use this app. I would suggest incorporating more export options for faster sharing of clips? maybe show a preview of the clip on the left most tab that says 'my recording'. otherwise, It's very good and I love the clean design, no extra clutter and unnecessary features, love it. all the best!

Hey Designist, first of all, Congratulations for your first entry!!!!! I would really like to help you with feedback, please take it!! First I would definitely suggest you considering the User experience, that's the core here. The color pallete you have chosen are too light and faded interms of usability so maintain the contrast and balance of entire layout!. Also controls are not clear and prominent enough to view and act up on!! Also I noticed that icon size is different in the bottom panel! The green and red dot there, has no meaning and are lonely and confused me at first sight!! so please add descriptive labels Font are not so clearly visible you can either try with some clear and easily readable font, since this task is frequent to the so needed clear typography. Please add control to play pause and end recording and share option to further share with team after recording. Since the single red button in the middle serves no purpose to meet the goal of recording! These are my findings and I hope my feedback will prove beneficial to you. Happy weekend and Keep up the good work!!!

Hey Designist, first of all, I must say it's a good work but there are things that need a bit of attention so whatever I say take it as feedback. There is no way to share that was the purpose of the challenge. After the video is captured an option to share should be there. Also, if it automatically saves then there should be a message/toast telling the users. Users might not understand the usage of some options in the bar below so naming them along with the icon will be good. The more informative you are the clearer it gets The font selection was readable so that’s good. The color choice was up to the mark, it's the basic colors (White, Black, and Grey), it's simple and is not so overpowering color palette which I liked. But the call-to-action buttons of the bottom bar are grey I feel like a darker color like black would be more visible. The layout of the design looks accessible and overall UI is all right but more options would be better for the users. In the last recorded on top of the videos there should be a kebab or meatballs menu icon at the corner so that users can easily navigate and be able to share along with other options. These are my opinion take them as feedback to improve. I hope my feedback was useful.

This is our first time joining the challenge. Next time we will try to add some more screens.

hello Lucky, First of all thank you so much for you valuable feedback. - Actually I have tried many times to post higher resolution of the image, but website was crashing every-time I ty to upload a resolution mote than 1x. That's why I ended up uploading a 1x quality. - Secondly I have added timer for every recording for full screen and crop screen as well which can be hardly visible here because of the image quality. - Thirdly the 4th screen is for screen recording of crop screen where you can adjust the size as per your requirement which is bit different from the second and the third one. But I am glad that highlighted about the ( Gestalt principle ). I will keep that in mind from the next. Thank you again.

Hey pallab First of all you tried to come up with a solution and it's great. My eyes are not that good to see your design clearly and give feedback but I would like to suggest a few points. - In your design, you used neutral colors ( Black, grey & white ) instead of going monochromatic just experiment with different colors. - In the second screen I guess it's the recording state screen but there is no recording information. how will the user know how long they have been recording - In the fourth screen, the component is different from the other three ( Only the bottom is in a round shape ), if I would be making this I would try to make every screen same to apply the law of familiarity ( Gestalt principle) Well keep it up.

thanks for feedback Abhi @Abhinav Juyal 👉Screen 1  Basically it's just a onboarding , that show user can aware about the essential features at once or may select the necessary for them. 👉For screen no 2 if you research thoroughly for app as a product you will find the quick controls at left  side bar is more frequent for to user ease,  the right side it's a design or a shot from website  do not consider as part of solution. I just noticed and understood that we only have desktop-oriented feasibility in the given problem statement. If I consider the product for desktop & web differently , then it might be a more costly at practical side. so tried to develop the what exist & what needed the most.  I missed out on the select region and compression option for better optimised output, which I will definitely revise. I will definitely add the email for sharing, but instead of sending a file, a link will be the best way to save space. I agree that for team collaboration, we can add the drawing option or live sharing while doing it. 👉 Agree on last point & i will definitely revise what needed & add more  value to problem statement Once again, kudos for your constructive feedback, and I am grateful for your amazing insights. Thanks and cheers! Bharath

Hi, Bharat, I just reviewed your design, you can improve over the points I have highlighted, 👉Screen 1 you have given option between screen&facecam, you don't need to equip entire space for that you can just add them as a control. 👉For screen no 2, you have given select template as one of the option, still I couldn't understand the use of that feature, No!! we don't need it here for this solution. Here we are not editing any video, We just need a solution where a user can select any part of the screen and record and share with team members. Considering the problem given you have to revised your solution based on that. 👉Just noticed 3 tabs, entire screen, window, chrome tab, again just want you to recall the problem statement. we just want snip and record to selected area of the screen 👉Also I would like to suggest you to revise the solution adding feature for which can improve the user collaboration with the team members with screen recording as application!!! Providing solution in terms of extension will work on the browser screen and windows, here we need to record work part of desktop so need some solution as desktop application. 👉You have given option to watch video and tutorial on screen 2, we can simply add them over help or support page. I would recommend you to revise entire solution as per problem statement

Hey Rohit, good work here. I have some points to share that you can improve upon. 1. In the link sharing feature screen, I wonder how that modal was opened. I was suggest adding some signifiers along with it. What do I mean by that? We humans are visual creatures, and while using the millions of other apps that we use everyday, we've gotten pretty used to some things being the way they are. So perhaps adding a link icon there would signify that clicking on that button would show them options to share. That way it would easier for them to find the option. 2. One part of the problem statement was to able to send clips of "parts" of your screen.. but in your solution, you seem to have missed that. Perhaps and option to select the area that they wish to record before starting the recording could be helpful. 3. On the main page, you have 3 tabs, one of them being "Folder" which seems quite out of place. Firstly I'm confused about its purpose and secondly the other 2 options along with it are related to recording or capturing the screen but this one looks like a library of sorts. There's a law in design called the Law of Similarity, which says that things that look similar, are expected to perform a similar function. So perhaps you wanna put that folder option somewhere else. 4. Lastly I would say that the overall UI looks kinda out-dated, people nowadays are used to seeing modern, clean standard design. So I'd like to suggest a YouTube channel that you can refer to, if you wish to improve your UI. Try https://www.youtube.com/@MalewiczHype he has good content. That's all from my side, I hope this helps. Have a great weekend.

Hey rohit , I would like to suggest few point ! - Scanning information is hard . - Upper navigation is too big and why there is a menu bar in top right corner , and what is the need when there is already so much left space. - Font size can be reduce. - You need to focus on UI.

Please refer to this link for better reference to the UI and features , https://www.behance.net/gallery/157778279/Capture-it

Heya Tapaswini.. nice modern look... I had a few confusions thou.. maybe you could improve on that 1. Firstly, what do you mean when you say custom screen recording? I'm guessing it's about selecting an area on the screen. In that case I would suggest using some familiar words like "Crop screen size" or "Select area to record" It'd be much easier to understand for the users. 2. The sound icon in the second screen follows a different theme than the other two icons on the left. At first glance, I thought that sound was on. So two suggestions here.. - use a sound icon that also has a forward slash to signify that it's disabled, so that it looks similar. - I guess by default you could keep the mic on, keeping in mind the use case. 3. on the first screen, there's an icon on the top left that looks like a snapshot, but then there's also a screenshot option below. What's the difference. 4. I can't recognize the functions of some buttons proper because of very low contrast ratio. I understand that it's a modern design but maybe you can consider changing the colors a bit so as to highlight where the user can click. For examples, I can barely make out the home icon on top. And it's hard to tell that the fields in the middle are drop down. 5. I'm also curious about the drop down options. You have named the fields "Only screen" and "Custom" and that's not giving me any idea on what there might be. I suggest you add a label to these fields that tells me what I'm selecting for. 6. And lastly I would say, in the second screen the white theme of the app on a light background is not easily visible, you could consider giving a black overlay behind. Bonus: How about a sharing option right here... That's it from my side... that was an extensive list, but by no means exhaustive. I hope this helps and have a great week ahead.

Hi Neha, Thank you for suggestions. I will work upon it

Hey Nilesh, good work. I'd just one thing... the toolbar looks really cluttered and it's hard to make out if these are buttons and what their purpose is. So I'd suggest just using a big icon or text. Try not to add too much text inside that small rectangle. You can fit in all that information in a tooltip if you want, which can be displayed when they hover on the button. This would help keep the design clean, you can also give additional info and that makes the app more interactive. I hope that helps. Let me know how it turns out. Have a great week ahead

Hey Caroline, I'm afraid the problem statement was to design one for a desktop, not mobile.