VMX by AndOr

VMX is a Powerful FREE HD Video Editor app with all the latest and professional features. Add music, transition effects, text, emoji and filters, blur background and etc are some of the important features. It can be used as a slideshow creator which will help users to create slideshow from photos and selfies, make a collage, and add text and stickers and many more.

To comply with my confidentiality agreement I have omitted and appropriated confidential information. These designs are a reinterpretation of the original.

My Role

I was part of the product team and responsible for the User experience strategy and design of the Android app. I lead the UX work, producing all major deliverables and presenting these to the Product Manger and other stakeholders between November 2019 and January 2020. I worked alongside an android developer who focused on the Android app.

The Challenge

Create First Phase in 2 Months

This is the internal product The Management wanted to create the internal Product with the primary objective of creating an advanced video editor app that has the best functionality and usability beyond their competitors and can be used globaly

To coincide with the design of the app in 2 months, our team was under extreme pressure to move fast. We were tasked to deliver an Android high‐fidelity prototype to our android team within 2 months. The combination of a fixed deadline, app store submission time, testing, and usability testing meant I needed to get the experience right in early weeks.

Create & Edit Video

The VMX App is a video editing app which provides Free, sustainable, and user-friendly features to its user. It also has in-app purchases for some advanced features. The VMX app launched on 08th July 2020 and had over 100,000 downloads at the press time

The open nature of the app is to create, edit & share videos. Users can easily their own custom animations. Add text and animate gives users the flexibility to extra text on the videos. This app shares an aim to help Free and premium members to use editing features more effectively.

The Approach

Focusing on Goals

Although our brief was to develop better functionality than our competitors, we stressed that engaging in a feature parity war was neither strategic nor had the best interests of the app's users at heart.

To differentiate ourselves in an already mature and competitive market, we needed to define a desirable role for the app and how it would meet the needs of the users. We were thrilled by the opportunity to create something more meaningful.

Followed Design Thinking Methods

We opted for a lean approach that emphasized rapid sketching, prototyping, user feedback and design mockups. This created early team‐wide alignment, sparked tons of great ideas and created a strong sense of ownership across different disciplines within my organisation.

Build Trust through transparency

Sharing our methods and thinking from the outset helped to build a strong team relationship. Ample opportunities for input at all stages of the project built trust and created a comfortable environment to share ideas—forming a partnership that will serve much value beyond this phase.

Keeping everyone on the same page

Meeting with key members helped us to understand the business challenges. Together we identified risks and aligned on expectations and constructed a shared vision for the app. Following this, I crafted an experience strategy outlining our phased approach and direction for the app.

The Discovery

What does 'Editing' mean to user

The discovery phase was a quick, high‐intensity effort that allowed us to define project milestones, Market Research, Review the competitor landscape, understand our vision, and begin research into user needs, behaviors, and pain points. We also kicked off a technical discovery phase to understand feasibility and constraints.

Our research revealed that the concept of 'Editing' represented something different to users of the App. Users' motivations for editing and creating videos in the app is differed, hinting at different requirements.

After designating persona types and aligning this with our phasing strategy we were able to prioritize who we would be focusing on supporting in the early stages. The phase 1 app focused on supporting the goals of Joe, our primary user persona. We planned for later phases to support other users

We used personas constantly throughout the project to guide design decisions, priorities, and create empathy amongst the team.

Our persona hypothesis consisted of two different archetypes which we used to facilitate discussions about our user's needs, desires, and varying contexts of use. Through careful analysis of our research, we identified sufficient behavioral variables to segment our user audience. These variables could be categorized into activities such as frequency of use of the app, skills such as video editing, and photo editing are such reasons. We discussed the personas with our stakeholders to develop a clear picture of whom the design of the app would target in phase 1 and later in future releases

Editor Empathy

Tight timing meant that we needed to be efficient in conducting user research and collecting feedback. We conducted a range of interviews with stakeholders, co‐workers, and friends, did some competitor analysis to gauge what people were saying, and utilized officially which help us to understand users motivations for participating in the video editing app. These varied research techniques helped to quickly gain insights into the needs of our users and gave us a concrete understanding of the environment and workflows

Visualising the end‐to‐end

We used experience mapping techniques to visualize and communicate the user's end‐to‐end experience across various touch‐points of VMX. This allowed us to represent user pain points and see where we needed to focus our attention. Mapping out the user's emotions was key to setting our expectations about the aspirational emotional state we were aiming to design for.

The Vision

A Better Editing Experience

Whilst our competitors focus on taking the pain out of the editing, our vision was to help users get more pleasure out of it. We wanted to become an enabler for a better solution

Minimise the Bad

Our key priority for the early phases was to focus on primary user goals. Our first task–stripping the app to its core and focus on usability and convenience.

Amplify the Good

Beyond the obvious features, we saw opportunities to build a deep emotional connection with our users. Our vision was to create an honest, human app.

Bring Together

We envisioned empowering editing culture, where users could co‐create videos and contribute to the community.

The Requirements

Designing for what users want to know, do & feel

Synthesizing goals from our research served as a lens through which we could consider not only what the app should do, but also how it should feel. We believed this would be the difference between delivering a good experience and a great one. Thinking about emotional design early on helped our team understand the importance of aesthetics and tone of voice to the experience.

User Flows for Ideal Experiences

Knowing who exactly I was designing for allowed me to ask myself how the app fits into the lives of the users. I imagined ideal experiences and focused on how our personas think and behave rather than getting into specifics about interfaces, technologies or business goals.

Keeping the scenarios at a high level allowed us to work fluidly and explore concepts that we could easily communicate with our team. They formed the backbone of our requirements and allowed us to express these from both a functional and emotional perspective allowing for further empathy with our users

Extracting Requirements with Mental Models

Combing through our research and brainstorming the different things people do before, during, and after editing allowed me to come up with a broad set of tasks–quickly. I categorized and segmented the tasks into behavioral affinities and aligned content and features. This gave me a way to visualize what functionality and content would be useful, what tasks needed supporting, what opportunities were available to innovate.

Afterwards, I entered all the ideas into a spreadsheet and prioritised them against our personas needs, tech feasibility, and business objectives. This informed our phasing strategy for the app, the product feature roadmap and the product backlog.

Brand and Experience Requirements

Understanding the usage contexts of the app helped me develop a clear vision of the tonal expectations of our users. To communicate the personality of our app to our team, we developed a set of experience principles. These were used to sense‐check design decisions, articulate core values, and describe key attributes the app experience should uphold for both the users and the brand. The principles were used constantly to drive the aesthetic, feel, and overall tonal direction of the app.

The Framework

Setting the Design Direction

We took a top‐down approach to defining the overall structure of the experience. Sketching and storyboarding, I generated stacks of ideas about the arrangement of UI, functional and data elements, and interactive behaviours. Starting broad, our vision began evolving into something tangible. A high‐level design language, interactions and the app's anatomy began to piece together.

On Track and In Sync

Once our management approved the content and functionality to roll out in the app, I could start to structure that content. I used flow chart to represent the architecture of the app. Adopting a numbering system early was beneficial in helping our team stay in sync.

Structuring the experience

After identifying the main 'plot‐points' in our scenarios, I defined the primary pathways our personas would explore through the app. Crafting several key user journeys for each of our personas, was the best way to conceptualise and structure the proposed content and functionality. I began to think about particular usage contexts, the opportunities they present and how elements manifesting themselves in the interface would help to support the user.

I storyboarded my ideas to help design and communicate more complex interactions and flows. This was a huge time‐saver and allowed me to avoid prototyping edge cases.

Wireframe Designing with Balsamiq

High- Fidelity Design with XD

Once Wireframe Approved, I designed the Hi-Fi Designs which helps the team to understand what we are going to make and keep us all on the same page and allowed us to gain feedback and approval from both our management and development team. On the flip side, the prototype was my final deliverable to the development team. This meant that any design amendments needed to be reflected in the prototype itself. When I iterated the visual design, I could swap the assets, and the change would be reflected in every instance in the prototype.

Work In Progress

Balsamiq proves the best tool when it comes to the initial wireframing stage and easy to work on. I personally prefer to work on Balsamiq it helps me to create initial visualization of the product. Wireframing is a powerful tool in creating transparency in our design process. After wireframe approval we moved to the High Fidelity Design..

Detailed Design

Introducing … VMX

Make important things fast

The main screen has been designed to allow users quick access to primary functions of the application. The size of the icons make tapping easier, the order of the icons are based on ease of reach and the layout was chosen to provide a way for the design to scale for future releases.

Minimise learning

Primarily designed to support people on the go, users can depend on their prior experience with other video editing app and existing android design conventions to help them learn to use the app

Is it good for me, or is it bad for me?

Our app leverages principles of emotional design to inspire users to do editing in a very simplified way. Special features like adding effects, text, emojis make it more advanced with a basic free plan. For creating videos, we hoped to amplify the positive aspects of Editing and help users focus on the good features, rather than the commonly available feature. We want to create a sense of reassurance and let users know they're our priority. We offered high-quality features for an advanced video editing experience. From a learner to an experienced user we have made it easy for everyone.

Designed for Confidence

The interface design strives to be confident. It does not contain UI‐bling or unnecessary elements. We opted for clear, readable typography —choosing colours with high contrast to increase legibility in outdoor, low‑light conditions. The design is uncluttered, clean, large and well spaced. All our design decisions help to exude a sense of confidence in the design.

The Refinement

Testing With Users

I worked closely with our Usability Testing Team to help define tasks, establish objectives and evaluate the app.

To ensure the test was realistic, we opted to use a real build of the application. However, this revealed how functionally unstable the app was. Between the times spent recovering from bugs and app crashes we were able to find usability issues related to perceived affordances, layout and search

Fixing Issues

We observed critical issues related to features which allowed us to re-prioritize development tasks in the remaining time. Our android developer checked the issues and fix them.

The Impact

Over 100,000+ downloads

Andor Communications VMX has received both positive and negative feedback since the first release and later version update. Users have responded well to the app's features and the simplistic redesign. The issue which was reported was fixed by the Developers.