Crop.video
Crafting a modern UI for smart video tools.
- Employer
- RoleDesigner
- DeliverablesUX Design, Design system, Web app design, Prototype
- PlatformWeb
- Year2021
The Dutch start-up Crop.video is on a mission to lead the aspect ratio revolution. Their product uses AI to optimize videos for social media, and is being used by large networks like Fremantle, FOX, Talpa Network, Royal Opera House and AVROTROS. In 2021, Brthrs, the agency I was working for at the time, acquired Crop.video. I was responsible for redesigning the dated user experience and interface of the web application, together with two other designers who focused on the website and branding.
Background
Imagine you're creating a highlight video for the club night you hosted. You've spent hours working on it, with the intention of posting it to your social media platforms. After rendering the final final version in widescreen, you open your favorite social media app to upload it, only to discover that the app only supports vertical videos. To your disappointment, many of your carefully crafted shots of people dancing are awkwardly cropped out. If only there was a way to efficiently optimize your video for all aspect ratios… That's where Crop.video comes in.
The editor view for Crop.video, with a list of camera shots.
As its name suggests, one of Crop.video's main selling points is the ability to crop video for various aspect ratios. The product uses AI to split different shots apart, after which the user can crop each shot separately for vertical, square and horizontal formats.
Upload video flow.
The app was designed with novice users and Gen Z in mind. To enhance their experience, we added an extra layer of fun to interactions such as video uploads.
Selected screens from the user onboarding.
We chose lighthearted 3D illustrations to amplify the fun aspect of various sections of the app, such as the user onboarding and empty states. Each illustration corresponds to the screen’s context.
Projects, account settings and subscription screens.
The user environment outside of the editor is intentionally left as simple as possible.
A few of the modal views in the web app UI.
As the web app uses modal views extensively, we had to make sure that they had a consistent layout and feel. This was made possible by creating a consistent design system.
Various screens and interactions for adding, editing and styling subtitles.
Aside from cropping individual camera shots, the product also offers tools for adding branding and subtitles.
When editing subtitles, the user is in different mode from cropping. In this mode, the UI adapts to optimize the space used for adding subtitles.
Components from the Crop.video design system.
After the prototype was approved, we worked on a complete and consistent design system to build the final screens with.
