Montra is a video creation tool that helps people record, edit, and share professional videos with the power of AI. My role was to design a user interface based on pre-existing wireframes and to make changes to the user experience as I saw fit. This is a little walkthrough of how I designed the web app.
Getting started
After familiarizing myself with the app and its features, I started planning out the new layout that fixes a few problems the initial wireframes had. The pre-existing wireframes had components that overlapped the video preview section, something I didn't like from a user experience standpoint.
Designing new components
My goal with the components was to make them modern and friendly without the interface feeling intimidating, which can sometimes be the case for this type of product. You'll notice that the components have a more playful roundness compared to the more sophisticated look that most modern video editors have. Here's a look at some of the components I designed for the app:
Initial design concepts
After designing the components, I worked on the first mockups of the app, creating both a light theme and a dark theme. These mockups laid a solid foundation for the final design.
Final design
After a design review of the initial mockups, we made several changes. Here are some notable changes we implemented:
- Reducing the roundness of main components from 16px to 8px.
- Sticking to a dark theme as the primary color scheme.
- Improving the accessibility of interactive elements to make them more distinguishable. For example, the toggle backgrounds were too dark and lacked sufficient contrast against their background.
- Removing the close buttons on the slide deck and slide editor.
- Several minor UI tweaks (spacing, alignment, size, etc.).
Below is a look at the completed design: